【Galgame+小说双模式】【全表情/场景立绘】斗罗大陆三龙王传说

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700;800&family=Noto+Serif+SC:wght@500;600;700;900&family=Oxanium:wght@500;600;700&display=swap");
/* =========================================================
   0. 设计令牌（全部挂在 :is(.markdown-body,.rili-markdown-renderer)，可向下继承）
   ========================================================= */
:is(.markdown-body,.rili-markdown-renderer){
  /* —— 底色 / 表面 —— */
  --abyss:#05070f;
  --bg-1:#0a0f22;
  --bg-2:#0e1530;
  --bg-3:#070b1c;
  --surface:rgba(20,28,56,.66);
  --surface-2:rgba(13,19,40,.82);
  --surface-3:rgba(9,13,30,.9);
  --glass-blur:10px;

  /* —— 文字 —— */
  --txt:#dfe6ff;
  --txt-dim:#9aa6cf;
  --txt-faint:#7c88b0;
  --ink:#cdd6f7;

  /* —— 主题灵气色（azure↔violet） —— */
  --spirit:#7fb6ff;
  --spirit-2:#b48bff;
  --spirit-rgb:127,182,255;
  --spirit2-rgb:180,139,255;
  --gold:#ffd277;
  --gold-rgb:255,210,119;

  /* —— 六色魂环 —— */
  --ring-white:#eaf0ff;
  --ring-yellow:#ffd45e;
  --ring-purple:#bd7bff;
  --ring-black:#8a78ff;     /* 黑环在暗底以靛紫高光呈现 */
  --ring-red:#ff5d6e;
  --ring-orange:#ff9a3c;

  /* —— 进度条语义色 —— */
  --bar-spirit-a:#5f9bff; --bar-spirit-b:#a07dff;   /* 魂力 */
  --bar-evo-a:#3ad6a0;    --bar-evo-b:#8ef0c4;       /* 进化 */
  --bar-bond-a:#ff7aa8;   --bar-bond-b:#ffc0d6;      /* 契合/亲密 */
  --bar-fate-a:#b06bff;   --bar-fate-b:#ff5a6b;      /* 世界线偏离 */

  /* —— 品质色 —— */
  --q-common:#9aa6cf;
  --q-fine:#5fd0ff;
  --q-rare:#6f8bff;
  --q-epic:#c07bff;
  --q-legend:#ffb24a;

  /* —— 线框 / 描边 —— */
  --line:rgba(127,160,230,.18);
  --line-strong:rgba(150,180,255,.32);
  --glow:rgba(var(--spirit-rgb),.35);

  /* —— 圆角 / 间距 —— */
  --r-s:7px; --r-m:12px; --r-l:18px;

  /* —— 缓动 —— */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.2,.8,.2,1);
  --dur-fast:180ms;
  --dur-mid:320ms;
  --dur-slow:520ms;

  /* —— 字体 —— */
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",serif;
  --font-num:"Rajdhani","Cinzel","Oxanium",ui-monospace,"Microsoft YaHei",sans-serif;

  /* —— 每个面板的默认强调色（被 summary[p] 覆盖） —— */
  --acc:var(--spirit);
  --acc-rgb:var(--spirit-rgb);

  /* —— 全局基底 —— */
  position:relative;
  padding:4px;                /* 平台规定 markdown-body padding ≤5 */
  color:var(--txt);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.85;
  letter-spacing:.2px;
  color-scheme:dark;
  background:
    radial-gradient(120% 80% at 12% -10%,rgba(var(--spirit2-rgb),.12),transparent 60%),
    radial-gradient(120% 80% at 92% 0%,rgba(var(--spirit-rgb),.10),transparent 55%),
    linear-gradient(168deg,var(--bg-1) 0%,var(--bg-2) 46%,var(--bg-3) 100%);
  -webkit-text-size-adjust:100%;
  animation:mbEnter .7s var(--ease-out) both;
}

/* 作用域内盒模型重置（不用全局 *，仅命中本卡标签，修复移动端 padding 撑破视口） */
:is(.markdown-body,.rili-markdown-renderer) :where(
  nhud,nmode,ntime,nloc,nenv,npov,ndiv-line,nfate,nfl,nfv,nfbar,nffill,nquest,nqm,nqs,qs,
  ntext,nb,nm,nt,ni,nl,nv,nd,ns,nbar,nfill,nring,ncard,act,gp,gp-body,gp-home,gp-hi,gp-sub,gp-time,
  nport,nfb,nspot,ntt,nti,
  nfate-mini,nfml,nfmv,nfmbar,nfmfill,
  details,summary,p[dlg],T,Ti,li
){
  box-sizing:border-box;
  min-width:0;
}

/* 外壳（平台若用此类包裹气泡，则套上"游戏屏"边框；不存在也不影响）
   注意：此类在 :is(.markdown-body,.rili-markdown-renderer) 作用域外，禁止调用 markdown-body 的变量 —— 全部写字面量 */
.bg-gray-100\/90.relative.inline-block{
  background:linear-gradient(168deg,#0a0f22,#070b1c);
  border:1px solid rgba(150,180,255,.32);
  border-radius:18px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 18px 50px -20px rgba(0,0,0,.8),
    inset 0 0 60px -30px rgba(127,182,255,.5);
  overflow:hidden;
}

/* =========================================================
   1. 环境氛围层：漂浮灵尘（单层伪元素，低开销）
   ========================================================= */
:is(.markdown-body,.rili-markdown-renderer)::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;z-index:0;
  background:
    radial-gradient(2px 2px at 18% 30%,rgba(var(--spirit-rgb),.5),transparent),
    radial-gradient(2px 2px at 72% 18%,rgba(var(--spirit2-rgb),.45),transparent),
    radial-gradient(1.5px 1.5px at 40% 70%,rgba(var(--gold-rgb),.4),transparent),
    radial-gradient(1.5px 1.5px at 88% 60%,rgba(var(--spirit-rgb),.4),transparent),
    radial-gradient(2px 2px at 60% 88%,rgba(var(--spirit2-rgb),.4),transparent);
  background-repeat:no-repeat;
  opacity:.6;
  animation:moteDrift 16s ease-in-out infinite alternate;
}
/* 顶部一缕灵光（静态装饰线，省一个常驻动画） */
:is(.markdown-body,.rili-markdown-renderer)::after{
  content:"";
  position:absolute;left:0;right:0;top:0;height:2px;
  pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(var(--spirit-rgb),.9),rgba(var(--spirit2-rgb),.9),transparent);
  filter:blur(.5px);
  opacity:.7;
}
:is(.markdown-body,.rili-markdown-renderer) > *{position:relative;z-index:1;}

/* 滚动条 */
:is(.markdown-body,.rili-markdown-renderer) ::-webkit-scrollbar{width:8px;height:8px;}
:is(.markdown-body,.rili-markdown-renderer) ::-webkit-scrollbar-track{background:rgba(0,0,0,.3);border-radius:8px;}
:is(.markdown-body,.rili-markdown-renderer) ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--spirit),var(--spirit-2));
  border-radius:8px;border:2px solid transparent;background-clip:padding-box;
}
:is(.markdown-body,.rili-markdown-renderer) ::-webkit-scrollbar-thumb:hover{background:var(--gold);}

/* =========================================================
   2. 思维助手 CoT —— details[cot]：系统终端质感（克制）
   ========================================================= */
:is(.markdown-body,.rili-markdown-renderer) details[cot]{
  margin:0 0 14px;
  border:1px solid rgba(var(--spirit-rgb),.18);
  border-radius:var(--r-m);
  background:linear-gradient(180deg,rgba(10,16,34,.7),rgba(7,11,26,.7));
  overflow:hidden;
}
:is(.markdown-body,.rili-markdown-renderer) details[cot] > summary{
  list-style:none;cursor:pointer;
  padding:9px 14px;
  font:600 12px/1.4 var(--font-num);
  letter-spacing:2px;text-transform:uppercase;
  color:var(--txt-faint);
  background:rgba(var(--spirit-rgb),.05);
  display:flex;align-items:center;gap:8px;
  transition:color .25s var(--ease),background .25s var(--ease);
}
:is(.markdown-body,.rili-markdown-renderer) details[cot] > summary::-webkit-details-marker{display:none;}
:is(.markdown-body,.rili-markdown-renderer) details[cot] > summary::before{
  content:"◐";color:var(--spirit);font-size:13px;
}
:is(.markdown-body,.rili-markdown-renderer) details[cot] > summary:hover{color:var(--spirit);background:rgba(var(--spirit-rgb),.1);}
:is(.markdown-body,.rili-markdown-renderer) details[cot][open] > summary{color:var(--spirit);border-bottom:1px solid rgba(var(--spirit-rgb),.15);}
:is(.markdown-body,.rili-markdown-renderer) details[cot][open] > summary::before{content:"◓";}
:is(.markdown-body,.rili-markdown-renderer) details[cot] > :not(summary){
  padding:10px 16px;
  font-size:12.5px;line-height:1.7;color:var(--txt-dim);
  font-family:var(--font-num);letter-spacing:.3px;
  animation:fadeUp .4s var(--ease-out) both;
}

/* =========================================================
   3. 顶部 HUD —— nhud
   ========================================================= */
:is(.markdown-body,.rili-markdown-renderer) nhud{
  display:block;position:relative;
  margin:0 0 16px;padding:14px 16px 12px;
  border-radius:var(--r-l);
  background:
    linear-gradient(180deg,rgba(20,28,56,.8),rgba(11,16,36,.86));
  border:1px solid var(--line-strong);
  box-shadow:
    0 10px 30px -18px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 40px -24px rgba(var(--spirit-rgb),.7);
  overflow:hidden;
  animation:fadeUp .6s var(--ease-out) both;
}
/* HUD 左侧能量棱 */
:is(.markdown-body,.rili-markdown-renderer) nhud::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--spirit),var(--spirit-2),var(--gold));
  box-shadow:0 0 12px var(--glow);
}
/* HUD 流光扫过（transform 驱动，避免 left 触发重排） */
:is(.markdown-body,.rili-markdown-renderer) nhud::after{
  content:"";position:absolute;top:0;left:0;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(var(--spirit-rgb),.12),transparent);
  transform:translateX(-140%);
  animation:hudShine 7s ease-in-out infinite;
  pointer-events:none;
}
:is(.markdown-body,.rili-markdown-renderer) nmode,
:is(.markdown-body,.rili-markdown-renderer) ntime,
:is(.markdown-body,.rili-markdown-renderer) nloc,
:is(.markdown-body,.rili-markdown-renderer) nenv,
:is(.markdown-body,.rili-markdown-renderer) npov{
  display:inline-flex;align-items:center;gap:5px;
  margin:3px 10px 3px 0;
  font-size:13px;color:var(--txt-dim);vertical-align:middle;
}
:is(.markdown-body,.rili-markdown-renderer) nmode{
  font:700 12.5px/1 var(--font-num);letter-spacing:1.5px;
  color:var(--gold);
  padding:4px 11px;border-radius:999px;
  background:rgba(var(--gold-rgb),.1);
  border:1px solid rgba(var(--gold-rgb),.4);
  box-shadow:0 0 14px -4px rgba(var(--gold-rgb),.6);
}
:is(.markdown-body,.rili-markdown-renderer) ntime{color:var(--spirit);font-family:var(--font-num);font-weight:600;letter-spacing:.5px;}
:is(.markdown-body,.rili-markdown-renderer) nloc{color:var(--txt);}
:is(.markdown-body,.rili-markdown-renderer) nloc::after{
  content:"";display:inline-block;width:6px;height:6px;margin-left:4px;border-radius:50%;
  background:var(--spirit-2);box-shadow:0 0 8px var(--spirit-2);
  animation:pulse 2.4s ease-in-out infinite;
}
:is(.markdown-body,.rili-markdown-renderer) nenv{display:block;margin-top:2px;color:var(--txt-faint);font-size:12.5px;font-style:italic;}
:is(.markdown-body,.rili-markdown-renderer) npov{
  font-size:11.5px;color:var(--spirit-2);
  padding:2px 9px;border-radius:6px;
  border:1px dashed rgba(var(--spirit2-rgb),.4);
}
/* 分割线 */
:is(.markdown-body,.rili-markdown-renderer) ndiv-line{
  display:block;height:1px;margin:11px 0;
  background:linear-gradient(90deg,transparent,var(--line-strong) 18%,rgba(var(--spirit-rgb),.55) 50%,var(--line-strong) 82%,transparent);
  position:relative;
}
:is(.markdown-body,.rili-markdown-renderer) ndiv-line::after{
  content:"❖";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:var(--spirit);font-size:11px;
  background:var(--bg-2);padding:0 8px;
  text-shadow:0 0 10px var(--glow);
}

/* —— 世界线偏离 nfate —— */
:is(.markdown-body,.rili-markdown-renderer) nfate{
  display:block;margin:10px 0 6px;padding:9px 12px;
  border-radius:var(--r-m);
  background:linear-gradient(180deg,rgba(176,107,255,.08),rgba(255,90,107,.05));
  border:1px solid rgba(176,107,255,.28);
  position:relative;overflow:hidden;
}
:is(.markdown-body,.rili-markdown-renderer) nfl{
  display:inline-block;font:600 12px/1 var(--font-num);letter-spacing:1px;
  color:var(--ring-purple);margin-right:8px;
}
:is(.markdown-body,.rili-markdown-renderer) nfv{
  display:inline-block;font-weight:700;font-size:13px;
  color:#ffd0db;text-shadow:0 0 10px rgba(255,90,107,.5);
}
:is(.markdown-body,.rili-markdown-renderer) nfbar{
  display:block;height:9px;margin-top:7px;
  border-radius:999px;overflow:hidden;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(176,107,255,.3);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.7);
}
:is(.markdown-body,.rili-markdown-renderer) nffill{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--bar-fate-a),var(--bar-fate-b));
  background-size:200% 100%;
  box-shadow:0 0 14px -2px var(--bar-fate-b);
  position:relative;
  animation:fateFlow 3.5s linear infinite;
  transition:width 1s var(--ease-out);
}
:is(.markdown-body,.rili-markdown-renderer) nffill::after{
  con

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

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