/* dark.css —— 黑暗记录页面样式（一周目/二周目的死亡顺序）
   血色哥特主题：压抑、锈蚀、低饱和
   含：全端自适应、留白、剧情关联式彩蛋锚点 */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    background: radial-gradient(ellipse at 50% 0%, #17080c 0%, #0a0507 60%, #060304 100%);
    color: #c8b8b8;
    font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI Symbol", sans-serif;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(16px, 4vw, 40px);
    line-height: 1.95;
}
p { margin: 1.1em 0; }
.head { border-bottom: 2px solid #3a1515; padding: 16px 0 12px; margin-bottom: 14px; }
h1 { color: #b03434; text-align: center; letter-spacing: 5px; text-shadow: 0 0 16px rgba(150,20,20,.4); }
h2 { color: #9a4a4a; border-left: 4px solid #601a1a; padding-left: 12px; margin-top: 26px; letter-spacing: 2px; }
h3 { color: #8a5a5a; }
.yuki { color: #7f9cc0; font-style: italic; text-align: center; margin: 8px 0; }
.line { text-align: center; color: #8a6a6a; font-style: italic; border-bottom: 1px solid #3a1515; padding-bottom: 12px; }
.pic { text-align: center; margin: 20px 0; }
.pic img { max-width: 100%; width: 320px; height: auto; filter: saturate(.72) contrast(1.08) brightness(.92); border: 1px solid #3a1515; box-shadow: 0 6px 26px rgba(90,10,10,.45); }
.pic img.cg { width: 500px; filter: grayscale(.3) contrast(1.12) brightness(.9); }
img { max-width: 100%; height: auto; }
figure { margin: 16px 0; text-align: center; }
figcaption { color: #4a2a2a; font-size: 12px; margin-top: 6px; }
.death {
    color: #d09a8a;
    border-left: 3px solid #601a1a;
    background: rgba(96,26,26,.12);
    padding: 8px 12px;
    margin: 14px 0;
}
blockquote {
    margin: 14px 8px; padding: 10px 18px;
    border-left: 4px solid #601a1a;
    background: rgba(96,26,26,.10);
    border-radius: 0 10px 10px 0;
    color: #b09090; font-style: italic;
}
table { border-collapse: collapse; width: 100%; margin: 12px 0; }
th, td { border: 1px solid #3a1515; padding: 7px 12px; text-align: left; }
th { background: #1c0b0e; color: #b03434; }
tr:nth-child(even) td { background: rgba(96,26,26,.06); }
details { margin: 10px 0; padding: 8px 14px; border: 1px solid #3a1515; border-radius: 10px; background: rgba(28,11,14,.6); }
summary { cursor: pointer; color: #a06060; font-weight: bold; }
a { color: #a33; text-decoration: none; }
a:hover { color: #e06060; }
/* 剧情关联式彩蛋：正文里某个关键词（如「组装长矛」）平时与正文同色、
   看不出是链接；鼠标悬停才泛出血光并显出虚线，点进去是下一页。
   彩蛋藏在"和剧情有因果关系"的词上，玩家读到会心一击。 */
.anchor {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .3s, border-color .3s, text-shadow .3s;
}
.anchor:hover {
    color: #e06060;
    border-bottom-color: #c22;
    text-shadow: 0 0 10px rgba(220,50,50,.7);
    cursor: pointer;
}
.foot { color: #4a2a2a; font-size: 12px; text-align: center; }
.killer { color: #d24040; font-weight: bold; text-decoration: none; border-bottom: 1px dashed #c22; }
.killer:hover { color: #ff6a6a; text-shadow: 0 0 10px rgba(255,60,60,.6); }
.secret { color: #6e2222; opacity: .7; text-decoration: none; font-size: 13px; font-family: "Segoe UI Symbol","Microsoft YaHei",sans-serif; }
.secret:hover { opacity: 1; color: #e06060; }
.secret2 { color: #a06060; text-decoration: none; border-bottom: 1px dotted #601a1a; }
.secret2:hover { color: #e06060; }
/* 左上角"回到主页"按钮：黑暗页的逃生口，固定悬浮 */
.home {
    position: fixed; top: 10px; left: 12px; z-index: 61; /* 高于入场帷幕，黑暗页逃生口常驻 */
    display: inline-block; padding: 4px 14px;
    color: #8a6a6a; text-decoration: none; font-size: 13px;
    border: 1px solid #3a1515; border-radius: 999px;
    background: rgba(10,5,7,.75);
}
.home:hover { color: #e0c8c8; border-color: #a33; }
.loop2 .home { color: #6a7688; border-color: #1e2c46; background: rgba(4,6,10,.75); }
.loop2 .home:hover { color: #cfe0f0; border-color: #4a6a9a; }
hr { border: none; border-top: 1px solid #3a1515; margin: 26px 0; }
audio { width: 100%; margin: 8px 0; }
.tag { display:inline-block; background:#1c0b0e; border:1px solid #3a1515; border-radius:999px; padding:1px 12px; margin:2px 4px 2px 0; font-size:13px; color:#a06060; }

/* —— 二周目（回溯线）视觉差异化：冷蓝"时间倒流"基调 ——
   一周目链 = 血红；二周目链 = 血蓝（希罗的死亡回溯主题）。
   通过 <body class="loop2"> 启用。 */
.loop2 {
    background: radial-gradient(ellipse at 50% 100%, #0a0c17 0%, #05070a 60%, #030407 100%);
    color: #bcc4c8;
}
.loop2 h1 { color: #6f86b8; text-shadow: 0 0 16px rgba(60,90,160,.45); }
.loop2 .head { border-bottom-color: #1e2c46; }
.loop2 h2 { color: #5d739c; border-left-color: #2a3a5a; }
.loop2 .line { color: #6a7688; border-bottom-color: #1e2c46; }
.loop2 .death { color: #b8a898; border-left-color: #2a3a5a; background: rgba(40,60,90,.14); }
.loop2 .pic img { border-color: #1e2c46; box-shadow: 0 6px 26px rgba(20,40,90,.45); }
.loop2 table th { background: #0b101c; color: #6f86b8; }
.loop2 table th, .loop2 table td { border-color: #1e2c46; }
.loop2 .anchor { color: inherit; }
.loop2 .anchor:hover { color: #8ab4e6; border-bottom-color: #4a6a9a; text-shadow: 0 0 10px rgba(80,140,220,.7); }
.loop2 .killer { color: #7fa4d6; border-bottom-color: #4a6a9a; }
.loop2 .killer:hover { color: #a8ccf0; text-shadow: 0 0 10px rgba(120,180,255,.6); }
.loop2 .foot { color: #3a4658; }
.loop2 hr { border-top-color: #1e2c46; }
.loop2 .secret2 { color: #5d739c; border-bottom-color: #2a3a5a; }
.loop2 .secret2:hover { color: #8ab4e6; }

/* ============================================================
   通用动效组件库（与 light.css 对应，血色/冷蓝双主题）
   main.js 自动为 .card/table/figure/blockquote/details/.tl/.quote/.stats 加 .reveal
   ============================================================ */
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .6; }

/* 滚动显现 */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal-l { opacity: 0; transform: translateX(-30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.js .reveal-r { opacity: 0; transform: translateX(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.js .reveal-l.in, .js .reveal-r.in { opacity: 1; transform: none; }
.js .stagger-in > * { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js .stagger-in.in > * { opacity: 1; transform: none; }
.js .stagger-in.in > *:nth-child(2) { transition-delay: .12s; }
.js .stagger-in.in > *:nth-child(3) { transition-delay: .24s; }
.js .stagger-in.in > *:nth-child(4) { transition-delay: .36s; }
.js .stagger-in.in > *:nth-child(5) { transition-delay: .48s; }
.js .stagger-in.in > *:nth-child(6) { transition-delay: .6s; }

/* 标题：血色流光 + 闪烁 */
.head { position: relative; overflow: hidden; }
.head::after {
    content: ""; position: absolute; left: -40%; top: 0; bottom: 0; width: 30%;
    background: linear-gradient(100deg, transparent, rgba(200,60,60,.14), transparent);
    animation: sheen 5s ease-in-out infinite;
}
.loop2 .head::after { background: linear-gradient(100deg, transparent, rgba(90,130,200,.14), transparent); }
@keyframes sheen { 0%,60% { left: -40%; } 100% { left: 120%; } }
.head h1 { animation: bloodpulse 4.5s ease-in-out infinite; }
.loop2 .head h1 { animation: coldpulse 4.5s ease-in-out infinite; }
@keyframes bloodpulse { 0%,100% { text-shadow: 0 0 16px rgba(150,20,20,.4); } 50% { text-shadow: 0 0 30px rgba(220,50,50,.8), 0 0 60px rgba(150,20,20,.4); } }
@keyframes coldpulse { 0%,100% { text-shadow: 0 0 16px rgba(60,90,160,.4); } 50% { text-shadow: 0 0 30px rgba(110,160,230,.8), 0 0 60px rgba(60,90,160,.4); } }

/* 图片：低饱和还原悬停 + Ken Burns */
.pic img, figure img { transition: transform .5s cubic-bezier(.2,.7,.3,1), filter .5s, box-shadow .5s; }
.pic img:hover, figure img:hover { transform: scale(1.03) translateY(-3px); filter: saturate(1) brightness(1.05); box-shadow: 0 14px 40px rgba(140,20,20,.5); }
.loop2 .pic img:hover, .loop2 figure img:hover { box-shadow: 0 14px 40px rgba(40,80,160,.5); }
.kb { overflow: hidden; border-radius: 10px; }
.kb > img { animation: kenburns 24s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenburns { from { transform: scale(1) translate(0,0); } to { transform: scale(1.12) translate(-2.5%,2%); } }

/* 死亡记录横幅：滴血式扫光 */
.death { position: relative; overflow: hidden; animation: deathglow 3.6s ease-in-out infinite; }
@keyframes deathglow { 0%,100% { box-shadow: inset 0 0 0 transparent; } 50% { box-shadow: inset 3px 0 12px rgba(200,40,40,.35); } }
.loop2 .death { animation: none; }
.loop2 .death::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 40%, rgba(120,170,240,.08) 50%, transparent 60%);
    background-size: 250% 100%; animation: rewind 4s linear infinite; }
@keyframes rewind { from { background-position: 250% 0; } to { background-position: -250% 0; } }

/* 时间线 */
.tl { position: relative; margin: 20px 0 20px 6px; padding-left: 26px; border-left: 2px solid #3a1515; }
.loop2 .tl { border-left-color: #1e2c46; }
.tl::before { content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: 100%;
    background: linear-gradient(180deg, #b03434, transparent); transform-origin: top; animation: timeline 2.2s ease-out both; }
.loop2 .tl::before { background: linear-gradient(180deg, #6f86b8, transparent); }
@keyframes timeline { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.tl .ti { position: relative; margin: 0 0 18px; }
.tl .ti::before { content: ""; position: absolute; left: -33px; top: 8px; width: 10px; height: 10px; border-radius: 50%;
    background: #0a0507; border: 2px solid #b03434; animation: pulsedot 2.8s ease-out infinite; }
.loop2 .tl .ti::before { border-color: #6f86b8; background: #05070a; }
@keyframes pulsedot { 0% { box-shadow: 0 0 0 0 rgba(176,52,52,.5); } 70%,100% { box-shadow: 0 0 0 12px transparent; } }
.tl .ti h3 { margin: 0 0 4px; color: #b06a6a; }
.loop2 .tl .ti h3 { color: #7f9cc0; }

/* 台词块 */
.quote { position: relative; margin: 20px 4px; padding: 14px 18px 14px 44px;
    border-left: 3px solid #601a1a; border-radius: 0 12px 12px 0; background: rgba(96,26,26,.10); }
.quote::before { content: "「"; position: absolute; left: 12px; top: 4px; font-size: 24px; color: #a04848; }
.loop2 .quote { border-left-color: #2a3a5a; background: rgba(40,60,90,.12); }
.loop2 .quote::before { color: #5d739c; }
.quote .who { display: block; margin-top: 6px; font-size: 12px; color: #6a4a4a; text-align: right; }
.loop2 .quote .who { color: #4a5a72; }

/* 资料条 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 16px 0; }
.stat { position: relative; overflow: hidden; border: 1px solid #3a1515; border-radius: 10px; padding: 10px 6px; text-align: center; background: rgba(28,11,14,.6); }
.loop2 .stat { border-color: #1e2c46; background: rgba(11,16,28,.6); }
.stat b { display: block; font-size: 17px; color: #c87474; letter-spacing: 1px; }
.loop2 .stat b { color: #8ab4e6; }
.stat span { font-size: 12px; color: #6a4a4a; }
.loop2 .stat span { color: #4a5a72; }
.stat::after { content: ""; position: absolute; inset: auto 0 -100% 0; height: 100%;
    background: linear-gradient(0deg, rgba(150,30,30,.25), transparent); transition: bottom .45s cubic-bezier(.2,.7,.3,1); }
.loop2 .stat::after { background: linear-gradient(0deg, rgba(60,100,170,.25), transparent); }
.stat:hover::after { bottom: 0; }

/* 分割线扫光 */
hr.sweep { position: relative; overflow: hidden; border: none; height: 1px; background: linear-gradient(90deg, transparent, #3a1515 25%, #3a1515 75%, transparent); }
hr.sweep::after { content: ""; position: absolute; top: -1px; height: 3px; width: 22%;
    background: linear-gradient(90deg, transparent, #b03434, transparent); filter: blur(1px); animation: sweep 4s ease-in-out infinite; }
.loop2 hr.sweep { background: linear-gradient(90deg, transparent, #1e2c46 25%, #1e2c46 75%, transparent); }
.loop2 hr.sweep::after { background: linear-gradient(90deg, transparent, #6f86b8, transparent); }
@keyframes sweep { 0% { left: -25%; } 100% { left: 105%; } }

/* 表格行悬停 */
table tr { transition: background .25s; }
table tr:hover td { background: rgba(150,30,30,.10); }
.loop2 table tr:hover td { background: rgba(60,100,170,.10); }

/* 画廊 + 灯箱 */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 16px 0; }
.gal img { width: 100%; height: 115px; object-fit: cover; object-position: top; border-radius: 8px; cursor: zoom-in;
    border: 1px solid #3a1515; filter: saturate(.6) brightness(.85); transition: transform .35s, filter .35s, box-shadow .35s; }
.gal img:hover { transform: scale(1.05); filter: saturate(1) brightness(1); box-shadow: 0 10px 26px rgba(0,0,0,.6); }
.lightbox { position: fixed; inset: 0; z-index: 99; display: none; place-items: center; background: rgba(5,3,4,.94); backdrop-filter: blur(6px); padding: 20px; cursor: zoom-out; }
.lightbox.on { display: grid; animation: lbfade .3s ease both; }
.lightbox img { max-width: 94vw; max-height: 88vh; border-radius: 10px; }
@keyframes lbfade { from { opacity: 0; } to { opacity: 1; } }

/* 滚动进度条 + 回顶 */
#scrollbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60;
    background: linear-gradient(90deg, #701414, #d04040); box-shadow: 0 0 12px rgba(200,40,40,.7); }
.loop2 ~ #scrollbar, body.loop2 #scrollbar { background: linear-gradient(90deg, #24365a, #6f96c8); box-shadow: 0 0 12px rgba(90,140,210,.7); }
#totop { position: fixed; right: 16px; bottom: 18px; z-index: 60; width: 42px; height: 42px; display: none; place-items: center;
    border-radius: 50%; cursor: pointer; border: 1px solid #3a1515; background: rgba(10,5,7,.85); color: #b03434; font-size: 18px; transition: transform .25s, background .25s, color .25s; }
#totop.on { display: grid; animation: lbfade .4s ease both; }
#totop:hover { transform: translateY(-4px); background: #601a1a; color: #fff; }
.loop2 #totop { border-color: #1e2c46; color: #6f86b8; }
.loop2 #totop:hover { background: #2a3a5a; color: #fff; }

/* details 展开动画 */
details { transition: border-color .3s; }
details:hover { border-color: #601a1a; }
details[open] > * { animation: panelin .5s ease both; }
@keyframes panelin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
summary::after { content: "▾"; float: right; transition: transform .3s; color: #a06060; }
details[open] summary::after { transform: rotate(180deg); }
.loop2 summary { color: #5d739c; }

/* 首页按钮呼吸 */
.home { animation: homepulse 3.4s ease-in-out infinite; }
@keyframes homepulse { 0%,100% { box-shadow: 0 0 0 0 rgba(176,52,52,.35); } 50% { box-shadow: 0 0 0 8px transparent; } }

/* ============================================================
   动效扩展库 II（黑暗页版：血色/冷蓝双主题）
   ============================================================ */

/* —— h2 下划线展开 —— */
h2 { display: inline-block; position: relative; }
h2::after { content: ""; position: absolute; left: 12px; right: 0; bottom: -4px; height: 2px;
    background: linear-gradient(90deg, #b03434, transparent);
    transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.7,.3,1) .15s; }
.loop2 h2::after { background: linear-gradient(90deg, #6f86b8, transparent); }
h2.in::after { transform: scaleX(1); }

/* —— 信号故障闪烁（标题/横幅偶发 glitch） —— */
.flicker { animation: flicker 7s linear infinite; }
@keyframes flicker {
    0%, 91%, 94%, 97%, 100% { opacity: 1; transform: none; }
    92% { opacity: .4; transform: translateX(2px) skewX(3deg); }
    95% { opacity: .75; transform: translateX(-2px); }
    98% { opacity: .5; transform: translateX(1px) skewX(-2deg); }
}

/* —— 乱码解码文字（main.js 对 .scramble 生效） —— */
.scramble { display: inline-block; }

/* —— 扫描线噪点（整页低透明度 CRT 感，body.grain 启用） —— */
body.grain::after { content: ""; position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .05;
    background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px);
    animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translateY(0); } 100% { transform: translateY(-3px); } }

/* —— 血字浮现（死亡横幅标题专用：从模糊到清晰 + 血色扩散） —— */
.bloodrise { animation: bloodrise 2.4s ease-out both; }
@keyframes bloodrise {
    0% { opacity: 0; filter: blur(10px); letter-spacing: 14px; color: #401010; }
    60% { opacity: 1; filter: blur(1px); }
    100% { opacity: 1; filter: none; letter-spacing: 5px; }
}
.loop2 .bloodrise { animation-name: coldrise; }
@keyframes coldrise {
    0% { opacity: 0; filter: blur(10px); letter-spacing: 14px; color: #16223a; }
    60% { opacity: 1; filter: blur(1px); }
    100% { opacity: 1; filter: none; letter-spacing: 5px; }
}

/* —— 滴血分隔（.drip 元素下方悬垂血滴动画） —— */
.drip { position: relative; }
.drip::after { content: ""; position: absolute; left: 18%; top: 100%; width: 3px; height: 10px; border-radius: 0 0 3px 3px;
    background: linear-gradient(#8a1e1e, transparent); animation: dripping 3.4s ease-in infinite; }
.loop2 .drip::after { background: linear-gradient(#3a5a8a, transparent); }
@keyframes dripping {
    0% { height: 0; opacity: 0; }
    30% { height: 14px; opacity: 1; }
    60%,100% { height: 2px; opacity: 0; transform: translateY(26px); }
}

/* —— 倒计时/编号翻牌（main.js 给 .stat b 注入翻牌） —— */
.stat b { display: inline-block; transform-origin: 50% 0; }
.stat.flip b { animation: flipnum .7s cubic-bezier(.2,.8,.3,1) both; }
@keyframes flipnum { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* —— 全局点击涟漪（黑暗主题色） —— */
.clickrip { position: fixed; z-index: 97; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
    border: 2px solid rgba(190,60,60,.75); pointer-events: none; animation: crip .8s ease-out forwards; }
.loop2 .clickrip { border-color: rgba(110,150,210,.75); }
@keyframes crip { to { width: 130px; height: 130px; margin: -65px 0 0 -65px; opacity: 0; } }

/* —— 光标余烬尾迹 —— */
.dust { position: fixed; z-index: 96; width: 4px; height: 4px; border-radius: 50%; pointer-events: none;
    background: rgba(200,70,70,.9); box-shadow: 0 0 8px rgba(200,70,70,.8);
    animation: dustfade 1s ease-out forwards; }
.loop2 .dust { background: rgba(120,160,220,.9); box-shadow: 0 0 8px rgba(120,160,220,.8); }
@keyframes dustfade { to { opacity: 0; transform: translateY(12px) scale(.2); } }

/* —— 彩蛋触发词微光提示（降低寻找难度：悬停/经过时泛起呼吸光） —— */
.anchor { position: relative; }
.anchor::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(220,80,80,.5), transparent);
    opacity: 0; transition: opacity .4s; }
.anchor:hover::after { opacity: 1; }
/* 被 main.js 标记 .eglow 的彩蛋词：极淡的呼吸光，提示"这个词不一般" */
.eglow { animation: eg 5s ease-in-out infinite; }
@keyframes eg { 0%,100% { text-shadow: none; } 50% { text-shadow: 0 0 9px rgba(220,80,80,.55); } }
.loop2 .eglow { animation-name: eg2; }
@keyframes eg2 { 0%,100% { text-shadow: none; } 50% { text-shadow: 0 0 9px rgba(120,170,240,.55); } }

/* —— 页面开场帷幕（黑暗版） —— */
#curtain { position: fixed; inset: 0; z-index: 999; pointer-events: none; background: #060304;
    animation: curtain 1.4s ease-in forwards; }
.loop2 #curtain { background: #030407; }
@keyframes curtain { to { opacity: 0; visibility: hidden; } }

/* —— 视差层 —— */
[data-para] { will-change: transform; }

/* —— 黎明页（r3_end）专属多层画布 —— */
#dawn { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
#dawnrays { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.dawntitle { position: relative; }
.dawntitle::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -10px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, transparent, #ffd9b0, #e8a87c, #ffd9b0, transparent);
    background-size: 200% 100%; filter: blur(.5px);
    animation: dawnline 5s linear infinite, dawnbreathe 3.6s ease-in-out infinite; }
@keyframes dawnline { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes dawnbreathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ============================================================
   动效扩展库 III（黑暗页第三批）
   ============================================================ */

/* —— 表格行逐行亮起（血色/冷蓝随主题） —— */
.js table tr { opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .5s ease, background .25s; }
.js table.in tr { opacity: 1; transform: none; }
.js table.in tr:nth-child(1) { transition-delay: .05s; }
.js table.in tr:nth-child(2) { transition-delay: .13s; }
.js table.in tr:nth-child(3) { transition-delay: .21s; }
.js table.in tr:nth-child(4) { transition-delay: .29s; }
.js table.in tr:nth-child(5) { transition-delay: .37s; }
.js table.in tr:nth-child(6) { transition-delay: .45s; }
.js table.in tr:nth-child(7) { transition-delay: .53s; }
.js table.in tr:nth-child(8) { transition-delay: .61s; }

/* —— 链接墨水渗透下划线（暗色版） —— */
a { background-image: linear-gradient(#b03434, #b03434); background-size: 0% 1px;
    background-position: 0 100%; background-repeat: no-repeat; transition: background-size .45s cubic-bezier(.2,.7,.3,1), color .25s; }
a:hover { background-size: 100% 1px; }
.loop2 a { background-image: linear-gradient(#4a6a9a, #4a6a9a); }

/* —— 图片"显影"悬停（死亡 CG 从模糊血雾中显形；悬停瞬间触发） —— */
.develop:hover > img { animation: developflash .9s ease; }
@keyframes developflash {
    0% { filter: blur(8px) saturate(.25) brightness(.6); }
    60% { filter: blur(2px) saturate(.6) brightness(.85); }
    100% { filter: none; }
}

/* —— 立体书翻页悬停 —— */
.bookpic { perspective: 1200px; }
.bookpic > img { transform-origin: left center; transition: transform .8s cubic-bezier(.3,.8,.3,1), box-shadow .8s; }
.bookpic:hover > img { transform: rotateY(-24deg); box-shadow: 24px 12px 46px rgba(0,0,0,.6); }

/* —— 聚光灯悬停（main.js 写入 --mx/--my） —— */
.spotlight { position: relative; overflow: hidden; }
.spotlight::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(220,90,90,.10), transparent 60%); }
.spotlight:hover::after { opacity: 1; }
.loop2 .spotlight::after { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(110,150,220,.10), transparent 60%); }

/* —— 死亡横幅悬停：血月扫描线掠过 —— */
.death:hover::before { content: ""; position: absolute; left: -30%; top: 0; bottom: 0; width: 30%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(220,80,80,.12), transparent); animation: deathscan .9s ease forwards; }
.loop2 .death:hover::before { background: linear-gradient(100deg, transparent, rgba(110,160,230,.12), transparent); }
@keyframes deathscan { to { left: 110%; } }

/* —— details 悬停：标题烛火闪烁 —— */
summary:hover { animation: candle .5s ease-in-out infinite; }
@keyframes candle { 0%,100% { opacity: 1; } 45% { opacity: .72; } 70% { opacity: .92; } }

/* —— 波浪文字（main.js 拆 .waveword 为 span.wv） —— */
.wv { display: inline-block; animation: wv 2.6s ease-in-out infinite; }
@keyframes wv { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 60% { transform: translateY(2px); } }

/* —— 霓虹色相流转（.neonhue） —— */
.neonhue { animation: neonhue 10s linear infinite; }
@keyframes neonhue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }

/* ============================================================
   动效扩展库 IV（黑暗页第四批：全局氛围 + 现代质感）
   ============================================================ */

/* —— 全局鼠标环境光（main.js 注入 #mouselight：一周目血雾 / 二周目冷蓝雾） —— */
#mouselight { position: fixed; left: 0; top: 0; width: 540px; height: 540px; border-radius: 50%;
    z-index: -1; pointer-events: none; will-change: transform;
    background: radial-gradient(circle, rgba(150,30,30,.13), transparent 62%); }
body.loop2 #mouselight { background: radial-gradient(circle, rgba(60,90,160,.13), transparent 62%); }

/* —— 资料卡旋转光环（血色版） —— */
.stat::before { content: ""; position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(0deg); opacity: 0; transition: opacity .45s; pointer-events: none;
    background: conic-gradient(transparent 0 38%, rgba(190,60,60,.5) 50%, transparent 62% 100%); }
.stat:hover::before { opacity: .8; animation: orbit360 5.5s linear infinite; }
.stat b, .stat span { position: relative; z-index: 1; }
body.loop2 .stat::before { background: conic-gradient(transparent 0 38%, rgba(100,140,200,.5) 50%, transparent 62% 100%); }
@keyframes orbit360 { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* —— 引言块悬停：血色引号放大 + 光带渗入 —— */
.quote { transition: border-color .4s, background .4s, transform .4s; }
.quote::before { transition: transform .45s cubic-bezier(.3,1.5,.4,1), color .4s; }
.quote:hover::before { transform: scale(1.6) translateY(-3px); color: #d08585; }
.quote:hover { background: linear-gradient(90deg, rgba(150,40,40,.14), transparent); transform: translateX(4px); }
.loop2 .quote:hover::before { color: #8fa8cc; }
.loop2 .quote:hover { background: linear-gradient(90deg, rgba(50,80,140,.14), transparent); }

/* —— details 展开：内容滑动淡入 —— */
details[open] > *:not(summary) { animation: dtslide .55s cubic-bezier(.2,.8,.3,1) both; }
@keyframes dtslide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* —— 画廊图片遮罩揭示入场（main.js 给 .gal 挂 stagger-in） —— */
.js .gal.stagger-in > img { clip-path: inset(0 100% 0 0); opacity: 0; transform: none;
    transition: clip-path .8s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.js .gal.stagger-in.in > img { clip-path: inset(0 0 0 0); opacity: 1; }

/* —— 死亡横幅入场：专用浮现（不动 letter-spacing，避免污染段落排版） —— */
.death.bloodrise { animation: deathrise 1.8s ease-out both; }
@keyframes deathrise {
    0% { opacity: 0; filter: blur(8px); background: rgba(96,26,26,0); }
    100% { opacity: 1; filter: none; }
}
.loop2 .death.bloodrise { animation-name: deathrise2; }
@keyframes deathrise2 {
    0% { opacity: 0; filter: blur(8px); }
    100% { opacity: 1; filter: none; }
}

/* —— 死亡横幅悬停：文字血光渗出 —— */
.death { transition: box-shadow .4s, border-left-color .4s; }
.death:hover { box-shadow: 0 0 26px rgba(160,30,30,.25), inset 0 0 40px rgba(120,20,20,.12); }
.loop2 .death:hover { box-shadow: 0 0 26px rgba(50,90,160,.25), inset 0 0 40px rgba(40,70,130,.12); }

/* —— h2 悬停字距呼吸 —— */
h2 { transition: letter-spacing .4s; }
h2:hover { letter-spacing: 3px; }

/* —— 全局细节：选区色 / 滚动条 / 键盘焦点环 —— */
::selection { background: rgba(150,35,35,.6); color: #f0dede; }
body.loop2 ::selection { background: rgba(60,90,160,.6); color: #dfe8f5; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0507; }
::-webkit-scrollbar-thumb { background: linear-gradient(#5a1f1f, #241012); border-radius: 6px; border: 2px solid #0a0507; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(#8a3030, #3a1518); }
body.loop2 ::-webkit-scrollbar-thumb { background: linear-gradient(#24365a, #12182a); }
:focus-visible { outline: 2px solid rgba(200,110,110,.8); outline-offset: 3px; border-radius: 4px; }
body.loop2 :focus-visible { outline-color: rgba(140,170,220,.8); }

/* ============================================================
   多套黑暗主题背景（body 类驱动，替代全站同一纯黑）
   ============================================================ */
/* —— 一周目艾玛视角：暗紫压抑 + 缓慢呼吸的紫雾 —— */
body.th-r1 { background: radial-gradient(ellipse at 50% -8%, #170a1c 0%, #0c0510 55%, #060308 100%); background-attachment: fixed; }
body.th-r1::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 85%, rgba(120,60,170,.10), transparent 55%),
        radial-gradient(ellipse at 82% 20%, rgba(170,60,120,.08), transparent 50%);
    animation: r1mist 18s ease-in-out infinite alternate;
}
@keyframes r1mist { from { opacity: .5; transform: translateX(-1.5%); } to { opacity: 1; transform: translateX(1.5%); } }
body.th-r1 h1 { color: #9a5ab0; text-shadow: 0 0 16px rgba(130,60,170,.45); }
body.th-r1 .head { border-bottom-color: #2e1a3a; }
body.th-r1 h2 { color: #8a5a9a; border-left-color: #46224e; }
body.th-r1 .death { border-left-color: #5a2a62; background: rgba(90,40,100,.14); }
body.th-r1 .line { border-bottom-color: #2e1a3a; }
body.th-r1 table th { background: #170b1c; color: #a878c0; }
body.th-r1 table th, body.th-r1 table td { border-color: #2e1a3a; }
body.th-r1 hr { border-top-color: #2e1a3a; }
/* —— 二周目冷蓝：缓慢下坠的霜尘（canvas 由 main.js 提供 #frost） —— */
#frost { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55; }
/* —— 灭世终幕：血月 + 飘灰 —— */
body.th-apoc { background: radial-gradient(ellipse at 72% 14%, #2a0a10 0%, #12050a 55%, #070305 100%); background-attachment: fixed; }
body.th-apoc::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background: radial-gradient(circle at 72% 14%, rgba(230,60,50,.20), rgba(140,20,30,.07) 26%, transparent 46%);
    animation: bloodmoon 8s ease-in-out infinite alternate;
}
@keyframes bloodmoon { from { opacity: .55; } to { opacity: 1; } }
/* —— 处刑记录页：底部血色地火 —— */
body.th-pyres { background: linear-gradient(180deg, #0a0507 0%, #120608 55%, #1e0808 88%, #2e0c08 100%); background-attachment: fixed; }
body.th-pyres::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background: radial-gradient(ellipse at 50% 112%, rgba(255,90,40,.13), rgba(180,40,20,.05) 45%, transparent 65%);
    animation: pyre 6s ease-in-out infinite alternate;
}
@keyframes pyre { from { opacity: .55; } to { opacity: 1; } }
/* —— 处刑人偶剧场：绞杀纹章暗格 —— */
body.th-doll { background: linear-gradient(160deg, #0c0708 0%, #130a0c 50%, #0a0507 100%); background-attachment: fixed; }
body.th-doll::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .35;
    background:
        repeating-linear-gradient(45deg, transparent 0 34px, rgba(120,40,40,.05) 34px 36px),
        repeating-linear-gradient(-45deg, transparent 0 34px, rgba(120,40,40,.05) 34px 36px);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
}

/* ============================================================
   入场帷幕（gate）——黑暗页版式，与 light.css 同结构
   ============================================================ */
html.gate-on { overflow: hidden; }
.gate {
    position: fixed; inset: 0; z-index: 59; overflow: auto;
    display: none; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; padding: 8vh 22px; cursor: pointer;
}
html.js .gate { display: flex; }
#gate-file { display: block; }
html.js #gate-file { display: none; }
html.js #gate-file.open { display: block; }
.gate .g-line {
    display: block; margin: 16px 0; font-size: clamp(15px, 2.4vw, 20px);
    letter-spacing: 3px; opacity: 0; transform: translateY(14px); filter: blur(6px);
    transition: opacity 1.3s ease, transform 1.3s cubic-bezier(.2,.8,.3,1), filter 1.3s ease;
}
.gate .g-line:nth-child(1) { transition-delay: .5s; }
.gate .g-line:nth-child(2) { transition-delay: 2.1s; }
.gate .g-line:nth-child(3) { transition-delay: 3.7s; }
.gate .g-line:nth-child(4) { transition-delay: 5.3s; }
.gate .g-line:nth-child(5) { transition-delay: 6.9s; }
.gate .g-line .sp { font-size: .8em; opacity: .65; margin-right: .6em; letter-spacing: 1px; }
.gate.lit .g-line { opacity: 1; transform: none; filter: none; }
.gate .g-line .gw { opacity: 0; animation: dgw 4.2s ease-in-out infinite, gwin .5s ease both; animation-delay: 0s, var(--gd, 0s); }
@keyframes dgw { 0%,100% { opacity: .92; } 50% { opacity: 1; text-shadow: 0 0 22px currentColor; } }
@keyframes gwin { to { opacity: 1; } }
.gate .g-reply { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 1.4s cubic-bezier(.2,.7,.3,1), opacity 1s ease .3s; width: 100%; }
.gate.replied .g-reply { max-height: 420px; opacity: 1; }
.gate .gr-line { margin: 12px 0; font-size: clamp(16px, 2.6vw, 22px); font-weight: bold; letter-spacing: 2px; }
.gate .gr-line .quo { font-size: 1.5em; vertical-align: -.15em; opacity: .55; }
.gate.replied .gr-line { animation: replyin 1.1s cubic-bezier(.2,.8,.25,1) both; }
.gate.replied .gr-line:nth-child(2) { animation-delay: 1.1s; }
.gate.replied .gr-line:nth-child(3) { animation-delay: 2.2s; }
@keyframes replyin { from { opacity: 0; transform: translateY(16px) scale(.96); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
.gate .g-hint { margin-top: 7vh; font-size: 12px; letter-spacing: 5px; opacity: 0; transition: opacity 1.2s ease 8.4s; animation: gbreathe 3s ease-in-out infinite; }
.gate.lit .g-hint { opacity: .8; }
@keyframes gbreathe { 0%,100% { opacity: .3; } 50% { opacity: .85; } }
.gate.shatter .g-line { animation: gshatter 1.5s cubic-bezier(.4,0,.7,.2) both; }
.gate.shatter .g-line:nth-child(2) { animation-delay: .1s; }
.gate.shatter .g-line:nth-child(3) { animation-delay: .2s; }
.gate.shatter .g-line:nth-child(4) { animation-delay: .3s; }
.gate.shatter .g-line:nth-child(5) { animation-delay: .4s; }
.gate.shatter .g-reply { animation: gshatter 1.2s ease both; }
@keyframes gshatter { to { opacity: 0; transform: translateY(-46px) rotate(5deg) scale(1.5); filter: blur(14px); } }
/* —— 黑暗 gate 主题色 —— */
body.th-blood .gate .g-line { color: #b05a52; text-shadow: 0 0 18px rgba(170,40,40,.5); }
body.th-blood .gate .g-line .sp { color: #6a3535; }
body.th-blood .gate .gr-line { color: #d08a7a; }
body.th-blood .gate .g-hint { color: #6a3a3a; }
body.th-cold .gate .g-line { color: #6f86b8; text-shadow: 0 0 18px rgba(70,110,190,.5); }
body.th-cold .gate .g-line .sp { color: #3d4f75; }
body.th-cold .gate .gr-line { color: #9ab4dc; }
body.th-cold .gate .g-hint { color: #3a4658; }
body.th-dawn .gate .g-line { color: #e8b888; text-shadow: 0 0 18px rgba(255,170,90,.45); }
body.th-dawn .gate .g-line .sp { color: #a0704a; }
body.th-dawn .gate .gr-line { color: #ffcf9e; }
body.th-dawn .gate .g-hint { color: #a06a4a; }
body.th-ice .gate .g-line { color: #a8c4e8; text-shadow: 0 0 18px rgba(140,180,240,.5); }
body.th-ice .gate .gr-line { color: #cfe0f5; }
body.th-ice .gate .g-hint { color: #4a6280; }
body.th-violet .gate .g-line { color: #b89adc; text-shadow: 0 0 18px rgba(150,100,220,.5); }
body.th-violet .gate .g-line .sp { color: #6a5090; }
body.th-violet .gate .gr-line { color: #e3c8ff; }
body.th-violet .gate .g-hint { color: #6a5090; }

/* ============================================================
   入场帷幕 · 四种差异化表演（data-gate 驱动）
   每页文字入场方式与消散方式各不相同，避免雷同。
   ============================================================ */
/* —— ash（灭世终幕 · 血月灰烬）：文字自底部升起微晃，消散时如灰烬坠落四散 —— */
.gate[data-gate="ash"] .g-line { transform: translateY(28px) rotate(-1.2deg); }
.gate[data-gate="ash"].lit .g-line { transform: none; }
.gate[data-gate="ash"].lit .g-line:nth-child(odd) { transform: rotate(.6deg); }
.gate[data-gate="ash"].shatter .g-line { animation: ashfall-out 1.6s cubic-bezier(.5,0,.8,.4) both; }
.gate[data-gate="ash"].shatter .g-reply { animation: ashfall-out 1.4s ease both; }
@keyframes ashfall-out {
    30% { opacity: 1; }
    to { opacity: 0; transform: translateY(60px) translateX(-14px) rotate(-12deg) scale(.9); filter: blur(8px); }
}
.gate[data-gate="ash"]::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: 0;
    background: radial-gradient(ellipse at 50% 120%, rgba(255,90,50,.14), transparent 55%);
    transition: opacity 1.4s ease;
}
.gate[data-gate="ash"].lit::after { opacity: 1; }

/* —— ice（二周目 · 冷蓝冰裂）：逐字打字机式横向擦入，消散时冰裂骤坠 —— */
.gate[data-gate="ice"] .g-line {
    transform: translateX(-22px); clip-path: inset(0 100% 0 0);
    transition: opacity 1s ease, transform 1s cubic-bezier(.2,.8,.3,1), clip-path 1.1s cubic-bezier(.7,0,.3,1), filter 1s ease;
}
.gate[data-gate="ice"].lit .g-line { clip-path: inset(0 0 0 0); transform: none; }
.gate[data-gate="ice"] .g-line .gw { animation: none; opacity: 1; }
.gate[data-gate="ice"].shatter .g-line { animation: icecrack-out 1.1s cubic-bezier(.3,.1,.2,1) both; }
.gate[data-gate="ice"].shatter .g-reply { animation: icecrack-out 1s ease both; }
@keyframes icecrack-out {
    18% { transform: translateX(0) scale(1); filter: none; }
    30% { transform: translateX(2px) skewX(3deg) scale(1.04); filter: brightness(1.6); }
    to { opacity: 0; transform: translateY(40px) scale(.7) skewX(-8deg); filter: blur(3px) brightness(.4); }
}

/* —— dawn（三周目 · 黎明光柱）：文字自中心放大聚拢，消散时化作上升光尘 —— */
.gate[data-gate="dawn"] .g-line { transform: scale(.82); letter-spacing: 10px; filter: blur(4px) brightness(1.4); }
.gate[data-gate="dawn"].lit .g-line { transform: none; letter-spacing: 3px; filter: none; }
.gate[data-gate="dawn"] .g-line { transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2,.8,.2,1), filter 1.2s ease, letter-spacing 1.4s ease; }
.gate[data-gate="dawn"].shatter .g-line { animation: dawnrise-out 1.6s cubic-bezier(.3,0,.2,1) both; }
.gate[data-gate="dawn"].shatter .g-reply { animation: dawnrise-out 1.4s ease both; }
@keyframes dawnrise-out {
    20% { opacity: 1; filter: brightness(1.8); }
    to { opacity: 0; transform: translateY(-70px) scale(1.12); filter: blur(10px) brightness(2.2); }
}
.gate[data-gate="dawn"]::before {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 40%; transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255,210,150,.16), transparent 70%);
    clip-path: polygon(42% 0, 58% 0, 90% 100%, 10% 100%); filter: blur(16px);
    opacity: 0; transition: opacity 1.6s ease; pointer-events: none; z-index: -1;
}
.gate[data-gate="dawn"].lit::before { opacity: 1; }

/* —— ink（一周目终幕 · 墨迹低语）：文字如墨晕染显影，消散时墨迹洇开 —— */
.gate[data-gate="ink"] .g-line { filter: blur(12px); transform: scale(1.06); opacity: 0; }
.gate[data-gate="ink"].lit .g-line { filter: blur(0); transform: none; opacity: 1; }
.gate[data-gate="ink"] .g-line .gw { animation: none; opacity: 1; }
.gate[data-gate="ink"] .g-line { transition: opacity 1.6s ease, filter 1.6s cubic-bezier(.2,.7,.2,1), transform 1.6s ease; }
.gate[data-gate="ink"].shatter .g-line { animation: inkbleed-out 1.7s ease both; }
.gate[data-gate="ink"].shatter .g-reply { animation: inkbleed-out 1.5s ease both; }
@keyframes inkbleed-out {
    25% { opacity: .9; filter: blur(2px); }
    to { opacity: 0; transform: scale(1.5); filter: blur(22px); }
}
/* ice/dawn/ink 的 transition 简写会重置逐行延迟，这里补回（nth-child 特异性更高） */
.gate[data-gate="ice"] .g-line:nth-child(1), .gate[data-gate="dawn"] .g-line:nth-child(1), .gate[data-gate="ink"] .g-line:nth-child(1) { transition-delay: .5s; }
.gate[data-gate="ice"] .g-line:nth-child(2), .gate[data-gate="dawn"] .g-line:nth-child(2), .gate[data-gate="ink"] .g-line:nth-child(2) { transition-delay: 2.1s; }
.gate[data-gate="ice"] .g-line:nth-child(3), .gate[data-gate="dawn"] .g-line:nth-child(3), .gate[data-gate="ink"] .g-line:nth-child(3) { transition-delay: 3.7s; }
.gate[data-gate="ice"] .g-line:nth-child(4), .gate[data-gate="dawn"] .g-line:nth-child(4), .gate[data-gate="ink"] .g-line:nth-child(4) { transition-delay: 5.3s; }
.gate[data-gate="ice"] .g-line:nth-child(5), .gate[data-gate="dawn"] .g-line:nth-child(5), .gate[data-gate="ink"] .g-line:nth-child(5) { transition-delay: 6.9s; }

/* 小屏 */
@media (max-width: 640px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .gal { grid-template-columns: repeat(2, 1fr); }
    .gal img { height: 96px; }
    .gate .g-line { letter-spacing: 2px; margin: 12px 0; }
}

/* 尊重减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .js .reveal, .js .reveal-l, .js .reveal-r, .js .stagger-in > * { opacity: 1; transform: none; }
}