/* ============================================================ 纸嫁衣宇宙 · 氛围系统 v4 (共享样式, 全站 26 页引用) 包含: 白天模式变量覆盖 / 字号调节 / 卡片按钮纸嫁衣化 / 氛围装饰(暗角/红边/红绸/角花/红丝/纸人/灯笼/黄符/红烛/纸钱) / 进度条与滚动条美化 / 响应式断点 / 浅色适配 关联: assets/zjy_ambient.js ============================================================ */ /* ===== 白天模式: 变量级覆盖(攻略页等所有页面整体变浅) ===== */ body.light-mode{ --color-canvas:#f7efe0; --color-surface:#fffdf7; --color-surface-alt:#faf3e5; --color-ink:#3d2b1a; --color-muted:#6b5940; --color-ink-dim:#8f7d63; --color-red:#b02525; --color-red-glow:#d44a4a; --color-gold:#9a7426; --color-gold-light:#b8862d; --color-border:#e2d6be; --color-border-light:#d2c0a0; --color-nav-hover:#f3e8d4; --bg:#f7f1e6; --surface:#fffdf7; --card:#faf3e5; --card-hover:#f3e8d4; --ink:#3d2b1a; --muted:#6b5940; --dim:#8f7d63; --gold:#9a7426; --red:#b02525; --border:#d2c0a0; --border-light:#c9b896; --blue:#4a7cc4; --orange:#b25c1a; } /* 深二级攻略导航补齐纸昼材质，避免正文已变黄纸而框架仍留整块黑底 */ body.light-mode .sidebar{ background: repeating-linear-gradient(0deg,rgba(120,80,40,.035) 0 1px,transparent 1px 5px), linear-gradient(180deg,#f5ebd9,#efe0c8) !important; border-right-color:#d2c0a0 !important; box-shadow:2px 0 12px rgba(120,80,40,.1);} body.light-mode .top-bar{ background: repeating-linear-gradient(90deg,rgba(120,80,40,.035) 0 1px,transparent 1px 5px), linear-gradient(180deg,#fffdf7,#f5ebd9) !important; border-bottom-color:#d2c0a0 !important; box-shadow:0 2px 10px rgba(120,80,40,.08);} body.light-mode .sidebar-btn:hover{background:#f3e8d4;color:#3d2b1a;} body.light-mode .sidebar-divider{background:#d2c0a0;} /* ===== 字体调节: 扩大作用范围 ===== */ .step-desc,.step-title,.step-actions,.step-hint,.chapter-subtitle,.step-scene,.step-info,.step-num, .cult-desc,.cult-head b,.insight-point,.tl-content p,.easter-card-body p,.music-card-detail, .game-card-desc,.char-desc,.song-detail,.news-desc,.ri-text{ font-size:calc(1em * var(--fs-scale,1)) !important; } /* ===== 卡片纸嫁衣化: 红绸顶条 + 描金边 ===== */ .game-card,.char-card,.music-card,.news-card,.easter-card,.result-item,.tl-item,.cult-card,.ref-card,.song-card,.world-card,.step-card,.link-item,.card,.story-card{ position:relative !important;border:1px solid rgba(180,130,60,.28) !important; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 3px 14px rgba(0,0,0,.22); } .game-card::before,.char-card::before,.music-card::before,.news-card::before,.easter-card::before, .result-item::before,.tl-item::before,.cult-card::before,.ref-card::before,.song-card::before,.world-card::before,.step-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:1;border-radius:0; background:linear-gradient(90deg,#8a1a1a,#c41e1e 42%,#d4a84b 78%,#8a1a1a);opacity:.8; } .game-card:hover,.char-card:hover,.music-card:hover,.news-card:hover,.easter-card:hover,.result-item:hover,.tl-item:hover,.cult-card:hover,.ref-card:hover,.song-card:hover,.world-card:hover,.step-card:hover,.link-item:hover{ border-color:rgba(212,168,75,.55) !important;box-shadow:0 0 18px rgba(212,168,75,.18),0 4px 18px rgba(0,0,0,.3); } /* ============================================================ 卡片 → 三种载体 (v5 器物志) 游戏/新闻/文化卡 = 木质牌位+窗花角; 搜索结果 = 符纸; 人物卡 = 绢帛卷轴 ============================================================ */ /* ---- 木牌位: 木纹基底 + 四角剪纸窗花 ---- */ .game-card,.news-card,.cult-card,.step-card,.easter-card,.world-card,.story-card,.song-card,.ref-card,.tl-item,.music-card,.link-item{ background: radial-gradient(circle at 12% 8%,rgba(255,255,255,.05),transparent 40%), repeating-linear-gradient(92deg,rgba(0,0,0,.06) 0 1px,transparent 1px 4px), repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 7px), linear-gradient(160deg,var(--color-surface,#1a0a0a),var(--color-surface-alt,#241010) 55%,var(--color-surface,#1a0a0a)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 6px rgba(0,0,0,.25), 0 3px 14px rgba(0,0,0,.22) !important; } /* 剪纸窗花角 (左上+右下, SVG data-uri 云纹角花) */ .game-card::after,.news-card::after,.cult-card::after,.step-card::after,.easter-card::after,.song-card::after,.music-card::after{ content:'';position:absolute;top:3px;right:3px;width:26px;height:26px;pointer-events:none;opacity:.5;z-index:1; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='none' stroke='%23d4a84b' stroke-width='1' d='M1 25V10a9 9 0 0 1 9-9h15'/%3E%3Cpath fill='none' stroke='%23c41e1e' stroke-width='.8' d='M5 25V13a8 8 0 0 1 8-8h12'/%3E%3Ccircle cx='13' cy='13' r='2' fill='%23d4a84b' opacity='.8'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-size:contain;} .game-card:hover::after,.news-card:hover::after,.cult-card:hover::after,.step-card:hover::after,.easter-card:hover::after,.song-card:hover::after,.music-card:hover::after{opacity:.8;} /* 浅色木牌位 */ body.light-mode .game-card,body.light-mode .news-card,body.light-mode .cult-card,body.light-mode .step-card, body.light-mode .easter-card,body.light-mode .world-card,body.light-mode .story-card,body.light-mode .song-card, body.light-mode .ref-card,body.light-mode .tl-item,body.light-mode .music-card,body.light-mode .link-item{ background: radial-gradient(circle at 12% 8%,rgba(255,255,255,.35),transparent 40%), repeating-linear-gradient(92deg,rgba(120,80,40,.05) 0 1px,transparent 1px 4px), linear-gradient(160deg,#fffdf7,#faf3e5 55%,#f5ead8) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 6px rgba(120,80,40,.12),0 3px 14px rgba(0,0,0,.12) !important;} body.light-mode .game-card::after,body.light-mode .news-card::after,body.light-mode .cult-card::after,body.light-mode .step-card::after,body.light-mode .easter-card::after,body.light-mode .song-card::after,body.light-mode .music-card::after{opacity:.4;} /* ============================================================ 卡片 → 六类载体差异化 (v7: 不再千篇一律木牌位) 新闻=告示贴 / 文化卡=竹简 / 步骤卡=黄纸文书 / 音乐卡=唱本 时间线=泛黄书页 / 彩蛋卡=木匣 ============================================================ */ /* ---- 新闻卡 = 告示贴: 泛黄纸 + 两角图钉 + 横批 ---- */ .news-card{ background: radial-gradient(circle at 12% 8%,rgba(255,255,255,.12),transparent 45%), repeating-linear-gradient(0deg,rgba(120,80,30,.04) 0 1px,transparent 1px 5px), linear-gradient(165deg,#d8c49a,#c4ac80 60%,#b89870) !important; border:1px solid rgba(140,110,60,.55) !important; color:#4a3420 !important;} .news-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;z-index:1; background:linear-gradient(90deg,#9a1f1f,#c43c3c 30%,#d4a84b 70%,#9a1f1f);opacity:.85;} .news-card::after{content:'';position:absolute;top:-6px;left:10px;width:8px;height:8px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#d4b078,#8a6a3a 60%,#5e4a28); box-shadow:0 2px 4px rgba(0,0,0,.35),inset 0 -1px 1px rgba(0,0,0,.4);} .news-card::after{left:auto;right:10px;} /* ---- 文化卡 = 竹简: 竖纹竹节 + 两侧编绳 ---- */ .cult-card{ background: repeating-linear-gradient(90deg,rgba(120,80,30,.14) 0 2px,transparent 2px 22px,rgba(120,80,30,.05) 22px 24px), repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px), linear-gradient(170deg,#b8985a,#a07c3e 60%,#8a6830) !important; border:1px solid rgba(140,110,50,.6) !important; color:#f4e8c8 !important; box-shadow:inset 0 1px 0 rgba(255,240,200,.15),inset 0 -2px 5px rgba(0,0,0,.3),0 3px 12px rgba(0,0,0,.3) !important;} .cult-card::before{content:'';position:absolute;top:0;bottom:0;left:6px;width:2px; background:linear-gradient(180deg,#8a5f1c,#d4a84b 50%,#8a5f1c);opacity:.7;} .cult-card::after{content:'';position:absolute;top:0;bottom:0;right:6px;width:2px; background:linear-gradient(180deg,#8a5f1c,#d4a84b 50%,#8a5f1c);opacity:.7;} /* ---- 步骤卡 = 黄纸文书: 米黄纸 + 朱砂批示圈 + 卷角 ---- */ .step-card{ background: radial-gradient(circle at 98% 2%,rgba(120,80,30,.16),transparent 22%), repeating-linear-gradient(0deg,rgba(120,80,30,.05) 0 1px,transparent 1px 4px), linear-gradient(168deg,#d0b878,#b8985a 65%,#a88848) !important; border:1px solid rgba(140,110,50,.55) !important; color:#4a3a18 !important; box-shadow:inset 0 1px 0 rgba(255,245,210,.25),inset 0 -2px 6px rgba(90,60,20,.3),0 3px 14px rgba(0,0,0,.3) !important;} .step-card::after{content:'';position:absolute;top:3px;right:3px;width:34px;height:34px;pointer-events:none;opacity:.7; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='14' fill='none' stroke='%23b02525' stroke-width='2' opacity='.65'/%3E%3Ccircle cx='17' cy='17' r='9' fill='none' stroke='%23b02525' stroke-width='1' opacity='.4'/%3E%3C/svg%3E");} /* ---- 音乐卡 = 唱本: 暗红封面 + 金框 ---- */ .song-card,.music-card{ background: repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px), linear-gradient(168deg,#8a2a24,#6e1c18 60%,#581410) !important; border:1px solid rgba(212,168,75,.5) !important; color:#f0e0c8 !important; box-shadow:inset 0 0 0 2px rgba(212,168,75,.12),inset 0 1px 0 rgba(255,200,160,.15),0 3px 14px rgba(0,0,0,.35) !important;} .song-card::before,.music-card::before{content:'';position:absolute;top:6px;left:6px;right:6px;height:1px; background:linear-gradient(90deg,transparent,rgba(212,168,75,.5),transparent);} /* ---- 时间线 = 泛黄书页: 中线绳 + 页边 ---- */ .tl-item{ background: radial-gradient(circle at 90% 10%,rgba(120,80,30,.1),transparent 30%), repeating-linear-gradient(0deg,rgba(120,80,30,.04) 0 1px,transparent 1px 5px), linear-gradient(165deg,#cbb88a,#b8a070 65%,#a8905e) !important; border:1px solid rgba(130,100,55,.5) !important; color:#4a3820 !important; box-shadow:inset 0 1px 0 rgba(255,240,210,.2),inset 0 -2px 5px rgba(90,60,25,.25),0 2px 10px rgba(0,0,0,.22) !important;} /* ---- 彩蛋卡 = 木匣: 深木 + 铜锁扣 ---- */ .easter-card{ background: repeating-linear-gradient(90deg,rgba(0,0,0,.09) 0 3px,transparent 3px 7px), repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 2px,transparent 2px 6px), linear-gradient(165deg,#6e4c30,#5a3c24 60%,#482e1c) !important; border:1px solid rgba(160,120,70,.55) !important; color:#e8d4b0 !important; box-shadow:inset 0 1px 0 rgba(255,220,170,.1),inset 0 -3px 8px rgba(0,0,0,.45),0 3px 14px rgba(0,0,0,.35) !important;} .easter-card::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:26px;height:14px;border-radius:3px; background:linear-gradient(180deg,#c8a860,#8a6a3a); border:1px solid rgba(60,40,20,.6); box-shadow:inset 0 1px 0 rgba(255,235,190,.3),0 1px 3px rgba(0,0,0,.4);} /* 浅色: 六类载体降饱和 */ body.light-mode .news-card{background: radial-gradient(circle at 12% 8%,rgba(255,255,255,.4),transparent 45%), repeating-linear-gradient(0deg,rgba(140,100,50,.04) 0 1px,transparent 1px 5px), linear-gradient(165deg,#efe2c0,#e4d2a8 60%,#d8c498) !important; color:#4a3420 !important;border-color:rgba(150,115,60,.45) !important;} body.light-mode .cult-card{background: repeating-linear-gradient(90deg,rgba(140,100,50,.12) 0 2px,transparent 2px 22px,rgba(140,100,50,.04) 22px 24px), linear-gradient(170deg,#d8b878,#c4a058 60%,#b09048) !important; color:#3a2c10 !important;border-color:rgba(150,115,55,.5) !important;} body.light-mode .step-card{background: radial-gradient(circle at 98% 2%,rgba(140,100,50,.12),transparent 22%), repeating-linear-gradient(0deg,rgba(140,100,50,.04) 0 1px,transparent 1px 4px), linear-gradient(168deg,#eee0b8,#dcc890 65%,#d0bc80) !important; color:#4a3a18 !important;border-color:rgba(150,115,55,.45) !important;} body.light-mode .song-card,body.light-mode .music-card{background: repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px), linear-gradient(168deg,#a85a50,#8a463e 60%,#743830) !important; color:#fdf0e0 !important;} body.light-mode .tl-item{background: radial-gradient(circle at 90% 10%,rgba(140,100,50,.08),transparent 30%), repeating-linear-gradient(0deg,rgba(140,100,50,.04) 0 1px,transparent 1px 5px), linear-gradient(165deg,#e8d8b0,#d8c498 65%,#ccb488) !important; color:#4a3820 !important;} body.light-mode .easter-card{background: repeating-linear-gradient(90deg,rgba(90,60,30,.07) 0 3px,transparent 3px 7px), linear-gradient(165deg,#b08a60,#9a744c 60%,#8a6640) !important; color:#f0e0c0 !important;} /* ---- 搜索结果卡 = 符纸形: 黄纸 + 朱砂敕令条 + 撕纸锯齿 ---- */ .result-item{ border-radius:8px 8px 4px 4px !important; background: repeating-linear-gradient(90deg,rgba(120,80,20,.05) 0 2px,transparent 2px 5px), linear-gradient(170deg,#8a7420,#6a5616 70%,#5e4a12) !important; border:1px solid rgba(140,110,40,.5) !important; color:#f0e0b8 !important; clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),96% 100%,90% calc(100% - 6px),84% 100%,78% calc(100% - 7px),72% 100%,66% calc(100% - 5px),60% 100%,54% calc(100% - 7px),48% 100%,42% calc(100% - 5px),36% 100%,30% calc(100% - 7px),24% 100%,18% calc(100% - 5px),12% 100%,6% calc(100% - 7px),0 100%);} /* 顶部朱砂敕令条 */ .result-item::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;z-index:1; background:linear-gradient(90deg,#9a1f1f,#c43c3c 50%,#9a1f1f);opacity:.9;} /* hover 符纸轻颤 */ .result-item:hover{animation:paperTremble .4s ease;} @keyframes paperTremble{0%{transform:rotate(0);}25%{transform:rotate(-.6deg) translateY(1px);}55%{transform:rotate(.5deg);}80%{transform:rotate(-.3deg);}100%{transform:rotate(0);}} body.light-mode .result-item{ background: repeating-linear-gradient(90deg,rgba(140,100,30,.05) 0 2px,transparent 2px 5px), linear-gradient(170deg,#e8d488,#d4b868 70%,#c8a858) !important; border-color:rgba(160,120,50,.5) !important; color:#4a3808 !important;} /* ---- 人物卡 = 绢帛卷轴: 上下金色轴头 ---- */ .char-card{ border-radius:4px !important; background: radial-gradient(circle at 15% 10%,rgba(255,255,255,.07),transparent 45%), repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0 1px,transparent 1px 3px), linear-gradient(175deg,var(--color-surface,#1a0a0a),var(--color-surface-alt,#241010)) !important; border:1px solid rgba(180,130,60,.35) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 3px 12px rgba(0,0,0,.25) !important; } /* 上下轴头 */ .char-card::before{content:'';position:absolute;top:-4px;left:-4px;right:-4px;height:7px; background:linear-gradient(90deg,#8a5f1c,#e8c86a 18%,#f0d488 45%,#b8862d 60%,#e8c86a 82%,#8a5f1c); border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.5);} .char-card::after{content:'';position:absolute;bottom:-4px;left:-4px;right:-4px;height:7px; background:linear-gradient(90deg,#8a5f1c,#e8c86a 18%,#f0d488 45%,#b8862d 60%,#e8c86a 82%,#8a5f1c); border-radius:3px;box-shadow:0 -1px 3px rgba(0,0,0,.5);} /* hover 画芯微展 */ .char-card:hover{transform:scaleY(1.015);transform-origin:center;} body.light-mode .char-card{ background: radial-gradient(circle at 15% 10%,rgba(255,255,255,.4),transparent 45%), repeating-linear-gradient(90deg,rgba(120,80,40,.04) 0 1px,transparent 1px 3px), linear-gradient(175deg,#fffdf7,#f5ead8) !important;} /* ============================================================ 搜索框 → 铜镜照妖 (v5 器物志) 暗金双层描边 + 四角云雷纹 + focus 镜面擦拭斜光 ============================================================ */ .search-box{position:relative;} .search-box::before{content:'';position:absolute;inset:-5px -5px -3px;border-radius:16px;pointer-events:none; background: linear-gradient(135deg,rgba(212,168,75,.35),transparent 30%,transparent 70%,rgba(212,168,75,.25)), linear-gradient(315deg,rgba(212,168,75,.25),transparent 30%,transparent 70%,rgba(212,168,75,.35)); opacity:.5;transition:opacity .3s;} .search-box:focus-within::before{opacity:.9;} .search-box input{ border-radius:12px !important; border:1px solid rgba(180,130,60,.5) !important; box-shadow: inset 0 1px 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(212,168,75,.12), 0 0 0 3px rgba(120,80,30,.15) !important; transition:box-shadow .3s,border-color .3s; } /* focus 镜面擦拭斜光 */ .search-box input:focus{ border-color:rgba(232,200,106,.7) !important; box-shadow: inset 0 1px 3px rgba(0,0,0,.4), 0 0 0 3px rgba(212,168,75,.18), 0 0 20px rgba(212,168,75,.15) !important; animation:mirrorWipe .8s ease .1s 1; } @keyframes mirrorWipe{ 0%{background-position:-160% 0;} 60%{background-position:160% 0;} 100%{background-position:160% 0;} } body.light-mode .search-box::before{opacity:.35;} body.light-mode .search-box input{ border-color:rgba(160,120,60,.45) !important; box-shadow:inset 0 1px 3px rgba(120,80,30,.2),0 0 0 3px rgba(160,120,60,.1) !important; } /* ============================================================ 音乐 FAB/面板 → 唢呐 + 唱片 (v5 器物志) ============================================================ */ .music-fab .fab-icon{ width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center; background: repeating-conic-gradient(from 0deg,rgba(212,168,75,.28) 0deg 22deg,transparent 22deg 45deg), radial-gradient(circle,rgba(60,20,8,.85) 0 28%,rgba(20,6,2,.9) 75%); border:1px solid rgba(212,168,75,.5); box-shadow:inset 0 1px 1px rgba(255,230,180,.3),inset 0 -2px 4px rgba(0,0,0,.6),0 0 10px rgba(212,168,75,.2); font-size:0; } .music-fab .fab-icon::after{content:'';width:10px;height:10px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#f0d488,#8a5f1c 65%);} /* 播放时喇叭放射纹缓慢旋转 (暂停即停) */ .music-fab.playing .fab-icon{animation:suonaSpin 12s linear infinite;} @keyframes suonaSpin{to{transform:rotate(360deg);}} /* 面板顶部唱片 */ .music-panel::before{content:'';position:absolute;top:14px;left:18px;width:34px;height:34px;border-radius:50%; background: repeating-radial-gradient(circle at 50% 50%,#2a2a2a 0 2px,#3a3a3a 2px 3px,#1c1c1c 3px 5px), radial-gradient(circle,#1a1a1a 0 55%,#0d0d0d 80%); box-shadow:0 0 8px rgba(0,0,0,.6),inset 0 0 4px rgba(255,255,255,.05); border:1px solid #555;} .music-panel::after{content:'';position:absolute;top:26px;left:30px;width:6px;height:6px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#e85a4a,#8a1a1a 70%);} .music-panel.playing::before,.music-fab.playing .fab-icon{animation:suonaSpin 12s linear infinite;} /* 面板 h4 右移避开唱片 */ .music-panel h4{padding-left:42px;} .rt-btn,.mp-btn,.cnb-btn,.back-btn,.backtop,.done-btn,.fav-btn,.fbtn,.chapter-btn,.nav-toggle,.search-btn,.menu-card, .chapter-nav-btn,.back-to-universe,.view-btn,.link-item{ border:1px solid rgba(212,168,75,.42) !important; transition:box-shadow .25s,border-color .25s,transform .2s !important; } .rt-btn:hover,.mp-btn:hover,.cnb-btn:hover,.back-btn:hover,.backtop:hover,.done-btn:hover,.fav-btn:hover,.fbtn:hover,.chapter-btn:hover,.nav-toggle:hover,.menu-card:hover,.chapter-nav-btn:hover,.back-to-universe:hover,.view-btn:hover,.link-item:hover{ border-color:rgba(232,200,106,.85) !important; box-shadow:0 0 14px rgba(212,168,75,.35),inset 0 0 8px rgba(212,168,75,.12); } .rt-btn:active,.mp-btn:active,.cnb-btn:active,.back-btn:active,.backtop:active,.done-btn:active,.fav-btn:active,.fbtn:active,.chapter-btn:active,.chapter-nav-btn:active,.back-to-universe:active,.view-btn:active{ transform:scale(.94); } /* ============================================================ 按钮 → 三类古物 (v5 器物志) 主按钮·印章 / 次按钮·木牌签 / 工具钮·铜钱 ============================================================ */ /* ---- 主按钮·印章: 朱砂红漆面 + 四角錾金 ---- */ .cnb-btn,.back-btn,.back-to-universe,.search-btn,.view-btn,.done-btn,.chapter-btn{ position:relative; border-radius:7px !important; background: radial-gradient(circle at 30% 25%,rgba(255,255,255,.16),transparent 45%), linear-gradient(180deg,#c43c3c,#9a1f1f 55%,#7e1212 100%) !important; color:#f8e8c8 !important; border:1px solid rgba(212,168,75,.6) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 4px rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.4) !important; text-shadow:0 1px 2px rgba(0,0,0,.4); } /* 四角錾金三角 */ .cnb-btn::before,.back-btn::before,.back-to-universe::before,.search-btn::before,.view-btn::before,.done-btn::before{ content:'';position:absolute;top:0;left:0;width:9px;height:9px; background:linear-gradient(135deg,#e8c86a 0%,#b8862d 55%,transparent 56%); border-top-left-radius:5px;pointer-events:none;opacity:.85;} .cnb-btn::after,.back-btn::after,.back-to-universe::after,.search-btn::after,.view-btn::after,.done-btn::after{ content:'';position:absolute;bottom:0;right:0;width:9px;height:9px; background:linear-gradient(-45deg,#e8c86a 0%,#b8862d 55%,transparent 56%); border-bottom-right-radius:5px;pointer-events:none;opacity:.85;} /* hover 盖印下压; active 印泥晕染 */ .cnb-btn:hover,.back-btn:hover,.back-to-universe:hover,.search-btn:hover,.view-btn:hover,.chapter-btn:hover,.done-btn:hover{ transform:translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 4px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.45) !important;} .cnb-btn:active,.back-btn:active,.back-to-universe:active,.search-btn:active,.view-btn:active,.done-btn:active{ transform:translateY(2px) scale(.97); box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(196,30,30,.25), 0 0 18px rgba(196,30,30,.3) !important;} /* 浅色: 朱砂降为砖红 */ body.light-mode .cnb-btn,body.light-mode .back-btn,body.light-mode .back-to-universe,body.light-mode .search-btn,body.light-mode .view-btn,body.light-mode .done-btn{ background: radial-gradient(circle at 30% 25%,rgba(255,255,255,.25),transparent 45%), linear-gradient(180deg,#c87a6a,#a85a48 55%,#8a4638 100%) !important; color:#fff8ec !important;} body.light-mode .cnb-btn::before,body.light-mode .cnb-btn::after, body.light-mode .back-btn::before,body.light-mode .back-btn::after, body.light-mode .back-to-universe::before,body.light-mode .back-to-universe::after, body.light-mode .search-btn::before,body.light-mode .search-btn::after, body.light-mode .view-btn::before,body.light-mode .view-btn::after, body.light-mode .done-btn::before,body.light-mode .done-btn::after{opacity:.6;} /* ---- 次按钮·木牌签: 木纹 + 顶部红绳穿孔 ---- */ .chapter-nav-btn,.fbtn,.menu-card{ position:relative; border-radius:6px !important; background: repeating-linear-gradient(92deg,rgba(0,0,0,.08) 0 1px,transparent 1px 5px), repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 6px), linear-gradient(180deg,#8a6240,#6e4c30 60%,#5a3c24) !important; color:#f0e0c8 !important; border:1px solid rgba(160,120,70,.55) !important; box-shadow:inset 0 1px 0 rgba(255,235,200,.15),inset 0 -2px 4px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.35) !important; } /* 顶部红绳穿孔 */ .chapter-nav-btn::before,.fbtn::before{ content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%); width:7px;height:7px;border-radius:50%; background:radial-gradient(circle at 40% 35%,#e8d3b8,#8a5a3a 60%,#5e3c24); box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 0 3px rgba(0,0,0,.4); pointer-events:none;} .chapter-nav-btn::after,.fbtn::after{ content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%); width:13px;height:3px;border-radius:2px; background:linear-gradient(180deg,#c43c3c,#8a1f1f); pointer-events:none;opacity:.9;} /* hover 轻摆一次 */ .chapter-nav-btn:hover,.fbtn:hover,.menu-card:hover{ animation:woodSwing .5s cubic-bezier(.34,1.56,.64,1); border-color:rgba(212,168,75,.6) !important;} @keyframes woodSwing{0%{transform:rotate(0);}35%{transform:rotate(-2.2deg);}70%{transform:rotate(1.8deg);}100%{transform:rotate(0);}} /* 浅色: 浅木 */ body.light-mode .chapter-nav-btn,body.light-mode .fbtn,body.light-mode .menu-card{ background: repeating-linear-gradient(92deg,rgba(120,80,40,.07) 0 1px,transparent 1px 5px), linear-gradient(180deg,#d8bc94,#c4a47c 60%,#b09068) !important; color:#4a3420 !important; border-color:rgba(140,100,60,.5) !important;} body.light-mode .chapter-nav-btn::before,body.light-mode .fbtn::before{background:radial-gradient(circle at 40% 35%,#f0e0c8,#a88058 60%,#7a5a3a);} /* ---- 工具小钮·铜钱: 外圆内方, 铜绿锈 ---- */ .rt-btn,.backtop,.fav-btn{ position:relative; border-radius:50% !important; background: conic-gradient(from 0deg,#8a7a5a,#a89878 25%,#7a8a6a 50%,#a89878 75%,#8a7a5a), linear-gradient(180deg,#9a8a6a,#6a5a3a); border:1px solid rgba(120,110,70,.6) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.2), inset 0 -2px 3px rgba(0,0,0,.4), 0 2px 5px rgba(0,0,0,.35) !important; color:#f0e0c0 !important; text-shadow:0 1px 1px rgba(0,0,0,.5); } /* 方孔 */ .rt-btn::before,.backtop::before,.fav-btn::before{ content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:26%;height:26%;border-radius:2px; background:var(--color-canvas,#0d0505); box-shadow:inset 0 1px 2px rgba(0,0,0,.6); pointer-events:none;} /* hover 旋转闪光 */ .rt-btn:hover,.backtop:hover,.fav-btn:hover{ animation:coinSpin .45s cubic-bezier(.34,1.56,.64,1); border-color:rgba(232,200,106,.85) !important;} @keyframes coinSpin{0%{transform:rotate(0);}50%{transform:rotate(14deg);}100%{transform:rotate(0);}} /* 浅色: 浅铜 */ body.light-mode .rt-btn,body.light-mode .backtop,body.light-mode .fav-btn{ background:conic-gradient(from 0deg,#c8b898,#d8c8a8 25%,#b8c8a8 50%,#d8c8a8 75%,#c8b898) !important; color:#4a3a28 !important; border-color:rgba(140,110,60,.5) !important;} body.light-mode .rt-btn::before,body.light-mode .backtop::before,body.light-mode .fav-btn::before{ background:#f7f1e6;} /* ============================================================ 导航 → 戏台匾额 (v5 器物志) 顶栏底边斗拱椽子剪影 + logo 匾额框 ============================================================ */ .top-nav::after,.navbar::after,.top-bar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:7px;pointer-events:none; background: repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 6px,transparent 6px 12px), repeating-linear-gradient(135deg,rgba(212,168,75,.35) 0 5px,transparent 5px 10px); -webkit-mask:linear-gradient(180deg,#000 0 3px,transparent 4px); mask:linear-gradient(180deg,#000 0 3px,transparent 4px); opacity:.55;} /* logo/品牌匾额框 */ .nav-brand,.navbar-brand,.logo-box,.brand{position:relative; padding:4px 12px !important; border:1px solid rgba(212,168,75,.5) !important; border-radius:4px; background:linear-gradient(180deg,rgba(30,10,6,.9),rgba(20,6,2,.92)); box-shadow:inset 0 1px 0 rgba(255,230,180,.15),inset 0 -2px 5px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);} /* 底部落款小印章 */ .nav-brand::after,.navbar-brand::after,.logo-box::after,.brand::after{content:'印';position:absolute;right:-14px;bottom:-2px; font-size:.5rem;color:#f0d8c0;width:13px;height:13px;line-height:13px;text-align:center; background:linear-gradient(180deg,#b02a2a,#7e1212); border:1px solid rgba(212,168,75,.5);border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.5);text-shadow:none;} body.light-mode .top-nav::after,body.light-mode .navbar::after,body.light-mode .top-bar::after{opacity:.3;} body.light-mode .nav-brand,body.light-mode .navbar-brand,body.light-mode .logo-box,body.light-mode .brand{ background:linear-gradient(180deg,#faf3e5,#f0e4cd); border-color:rgba(154,116,38,.45) !important;} /* ============================================================ 转场 → 掀盖头 (v5 器物志) 一次性红盖头遮罩, 由 zjy_ambient.js 创建 DOM ============================================================ */ .ux-veil{position:fixed;inset:0;z-index:99999;pointer-events:none;overflow:hidden; background: radial-gradient(ellipse at 50% 40%,rgba(232,84,74,.92),rgba(140,20,20,.97) 75%,#7e1212); animation:veilLift .7s cubic-bezier(.4,0,.2,1) .15s forwards;} .ux-veil::after{content:'';position:absolute;bottom:0;left:0;right:0;height:26px; background: repeating-linear-gradient(90deg,rgba(255,230,180,.25) 0 3px,transparent 3px 9px), linear-gradient(180deg,rgba(200,60,50,.9),rgba(140,20,20,.85)); -webkit-mask:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 10px); mask:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 10px);} @keyframes veilLift{from{transform:translateY(0);}to{transform:translateY(-102%);}} .ux-veil.done{display:none;} @media (prefers-reduced-motion:reduce){.ux-veil{display:none;}} /* ============================================================ 氛围装饰层 (永不遮挡正文: z-index 2, 锚定两侧留白区) ============================================================ */ #ambientToggle{position:fixed;left:14px;bottom:14px;z-index:9997;width:42px;height:42px;border-radius:50%; background:var(--surface,#120808);border:1px solid var(--border,#2a1a1a);color:var(--gold,#d4a84b); font-size:1.1rem;cursor:pointer;transition:all .25s;box-shadow:0 2px 12px rgba(0,0,0,.35); font-family:var(--font-body,system-ui);display:flex;align-items:center;justify-content:center;line-height:1;} #ambientToggle:hover{transform:scale(1.1);border-color:var(--gold,#d4a84b);} #ambientToggle.off{filter:grayscale(1);opacity:.65;} body.light-mode #ambientToggle{background:#fffdf7;border-color:#d2c0a0;box-shadow:0 2px 12px rgba(0,0,0,.12);} body.no-ambient .ambient-layer,body.no-ambient .ambient-vignette,body.no-ambient .ambient-papermoney, body.no-ambient .ambient-edge,body.no-ambient .ambient-thread,body.no-ambient .ambient-compass,body.no-ambient .ambient-flag, body.no-ambient .ambient-silk,body.no-ambient .ambient-corner{display:none !important;} body.no-ambient .hero::before,body.no-ambient .song-card::after,body.no-ambient .log-list li::after{display:none !important;} /* ---- 侧边留白锚定工具: 内容列 1200px 居中, 装饰只占两侧 ---- */ .ambient-layer{pointer-events:none;position:fixed;inset:0;z-index:2;overflow:hidden;} .ambient-layer .ambient-paper, .ambient-layer .ambient-fu, .ambient-layer .ambient-lantern, .ambient-layer .ambient-candle{pointer-events:auto;} /* ---- 烛光暗角: 中心 55% 内全透明, 仅四角与底部渐隐 ---- */ .ambient-vignette{position:fixed;inset:0;z-index:3;pointer-events:none; background: radial-gradient(ellipse at 0% 0%,rgba(196,30,30,.13) 0%,transparent 34%), radial-gradient(ellipse at 100% 0%,rgba(196,30,30,.09) 0%,transparent 34%), radial-gradient(ellipse at 50% 118%,rgba(212,120,40,.18) 0%,transparent 42%), radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.28) 100%); animation:vignBreathe 7s ease-in-out infinite;} @keyframes vignBreathe{0%,100%{opacity:.7;}50%{opacity:1;}} body.light-mode .ambient-vignette{background: radial-gradient(ellipse at 0% 0%,rgba(180,90,40,.06) 0%,transparent 36%), radial-gradient(ellipse at 100% 0%,rgba(180,90,40,.05) 0%,transparent 36%), radial-gradient(ellipse at 50% 118%,rgba(200,120,50,.08) 0%,transparent 44%), radial-gradient(ellipse at center,transparent 62%,rgba(80,40,10,.10) 100%);} /* 按作品主题色微调 (data-game 由 zjy_ambient.js 设置) */ body[data-game="zjy4"] .ambient-vignette{background: radial-gradient(ellipse at 0% 0%,rgba(196,30,30,.16) 0%,transparent 34%), radial-gradient(ellipse at 100% 0%,rgba(196,30,30,.12) 0%,transparent 34%), radial-gradient(ellipse at 50% 118%,rgba(220,60,50,.24) 0%,transparent 42%), radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.30) 100%) !important;} body[data-game="zjy6"] .ambient-vignette{background: radial-gradient(ellipse at 0% 0%,rgba(120,60,180,.13) 0%,transparent 34%), radial-gradient(ellipse at 100% 0%,rgba(120,60,180,.10) 0%,transparent 34%), radial-gradient(ellipse at 50% 118%,rgba(140,80,200,.20) 0%,transparent 42%), radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.30) 100%) !important;} body[data-game="zjy9"] .ambient-vignette{background: radial-gradient(ellipse at 0% 0%,rgba(220,120,160,.13) 0%,transparent 34%), radial-gradient(ellipse at 100% 0%,rgba(220,120,160,.10) 0%,transparent 34%), radial-gradient(ellipse at 50% 118%,rgba(230,140,180,.20) 0%,transparent 42%), radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.30) 100%) !important;} body[data-game="shisanhaobingyuan"] .ambient-vignette{background: radial-gradient(ellipse at 0% 0%,rgba(80,140,160,.12) 0%,transparent 34%), radial-gradient(ellipse at 100% 0%,rgba(80,140,160,.09) 0%,transparent 34%), radial-gradient(ellipse at 50% 118%,rgba(90,150,170,.18) 0%,transparent 42%), radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.30) 100%) !important;} /* ---- 侧边红边 + 四角角花 + 顶部红绸 ---- */ .ambient-edge{position:fixed;top:0;bottom:0;width:6px;z-index:2;pointer-events:none; background:linear-gradient(180deg,rgba(196,30,30,.5),rgba(212,168,75,.18) 38%,rgba(196,30,30,.38) 72%,rgba(120,20,20,.6));} .ambient-edge.edge-left{left:0;border-right:1px solid rgba(212,168,75,.18);} .ambient-edge.edge-right{right:0;border-left:1px solid rgba(212,168,75,.18);} .ambient-silk{position:fixed;top:0;left:0;right:0;height:5px;z-index:2;pointer-events:none; background:linear-gradient(90deg,rgba(140,20,20,.55),rgba(196,30,30,.75) 25%,rgba(212,168,75,.5) 50%,rgba(196,30,30,.75) 75%,rgba(140,20,20,.55)); box-shadow:0 1px 8px rgba(196,30,30,.35);} .ambient-silk .silk-xi{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:13px;color:rgba(212,168,75,.55);font-weight:700;font-family:serif;letter-spacing:2px;} .ambient-corner{position:fixed;width:64px;height:64px;z-index:2;pointer-events:none;opacity:.5;} .ambient-corner svg{width:100%;height:100%;} .ambient-corner.corner-tl{top:0;left:0;} .ambient-corner.corner-tr{top:0;right:0;transform:scaleX(-1);} .ambient-corner.corner-bl{bottom:0;left:0;transform:scaleY(-1);} .ambient-corner.corner-br{bottom:0;right:0;transform:scale(-1);} /* ---- 红丝线 ---- */ .ambient-thread{position:fixed;top:-60px;left:-24px;width:2px;height:150vh;z-index:2;pointer-events:none; background:linear-gradient(180deg,rgba(196,30,30,0),rgba(196,30,30,.45) 28%,rgba(196,30,30,.3) 66%,rgba(196,30,30,0)); transform:rotate(13deg);transform-origin:top left;animation:threadWave 9s ease-in-out infinite;} @keyframes threadWave{0%,100%{transform:rotate(12.5deg) translateX(0);}50%{transform:rotate(14.5deg) translateX(7px);}} body.light-mode .ambient-thread{opacity:.6;} /* ============================================================ 纸新娘 v4 (分层SVG, 三层transform: 外层视差/中层鼠标/内层漂浮) ============================================================ */ .ambient-paper{position:fixed;will-change:transform;z-index:2;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));} .ambient-paper.paper-bride{left:max(10px, calc((100vw - 1240px)/2 - 160px));top:16vh;width:150px;height:250px;} .ambient-paper.paper-white{right:max(10px, calc((100vw - 1240px)/2 - 130px));top:24vh;width:110px;height:180px;} .ambient-paper .paper-tilt{width:100%;height:100%;transform-style:preserve-3d;perspective:700px;} /* 中层: 鼠标倾斜 */ .ambient-paper .paper-inner{width:100%;height:100%;animation:paperFloat 13s ease-in-out infinite;} /* 内层: 漂浮 */ .ambient-paper svg{width:100%;height:100%;} @keyframes paperFloat{0%,100%{transform:translateY(0) rotateZ(-.5deg);}50%{transform:translateY(-14px) rotateZ(.5deg);}} body.light-mode .ambient-paper{filter:drop-shadow(0 8px 18px rgba(0,0,0,.3));} /* ---- 黄符 v4 ---- */ .ambient-fu{position:fixed;width:44px;height:92px;will-change:transform;z-index:2;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));} .ambient-fu .fu-inner{width:100%;height:100%;transform-origin:top center;animation:fuSway 7s ease-in-out infinite;transition:animation-duration .4s;} .ambient-fu:hover .fu-inner{animation-duration:4.5s;} .ambient-fu.fu-1{right:max(10px, calc((100vw - 1240px)/2 - 60px));top:42vh;} .ambient-fu.fu-2{left:max(10px, calc((100vw - 1240px)/2 - 60px));top:56vh;} .ambient-fu.fu-2 .fu-inner{transform:scaleX(-1);animation-delay:-3.4s;} .ambient-fu svg{width:100%;height:100%;} @keyframes fuSway{0%,100%{transform:rotate(5deg) translateY(0);}30%{transform:rotate(-4deg) translateY(-5px);}65%{transform:rotate(3deg) translateY(2px);}} body.light-mode .ambient-fu{opacity:.75;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));} /* ---- 红灯笼 v8 (吸顶: 贴视口顶部悬挂, 高于导航不被遮挡) ---- */ .ambient-lantern{position:fixed;top:0;width:72px;height:120px;will-change:transform;z-index:9990;pointer-events:none; pointer-events:auto;cursor:pointer;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));} .ambient-lantern .lan-inner{width:100%;height:100%;transform-origin:top center;animation:lanternSwing 5.2s ease-in-out infinite;perspective:300px;transition:animation-duration .4s;} .ambient-lantern:hover .lan-inner{animation-duration:3.4s;} .ambient-lantern.lantern-1{left:max(10px, calc((100vw - 1240px)/2 - 100px));} .ambient-lantern.lantern-2{right:max(10px, calc((100vw - 1240px)/2 - 100px));} .ambient-lantern.lantern-2 .lan-inner{animation-delay:-2.6s;} @keyframes lanternSwing{0%,100%{transform:rotate(3deg);}50%{transform:rotate(-3deg);}} .ambient-lantern .lantern-pole{position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:22px;background:linear-gradient(180deg,#3a2a1a,#5a4028);} .ambient-lantern .lantern-cap{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:34px;height:10px;background:linear-gradient(180deg,#d4a84b,#8a5f1c);border-radius:3px 3px 0 0;} .ambient-lantern .lantern-body{position:absolute;top:30px;left:50%;transform:translateX(-50%);width:50px;height:60px; background: radial-gradient(circle at 38% 32%,rgba(255,150,110,.5),transparent 52%), linear-gradient(180deg,#e8544a,#a81f1f 78%); border-radius:50%/54% 54% 46% 46%; box-shadow:0 0 24px rgba(232,84,74,.5),inset 0 0 12px rgba(0,0,0,.28),0 3px 10px rgba(0,0,0,.4);} .ambient-lantern .lantern-body::before{content:'';position:absolute;top:8px;bottom:8px;left:50%;transform:translateX(-50%);width:2px;background:rgba(120,20,20,.5);} .ambient-lantern .lantern-xi{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:26px;font-weight:900;color:rgba(255,230,180,.85);font-family:serif;text-shadow:0 0 10px rgba(255,200,120,.8);pointer-events:none;} .ambient-lantern .lantern-base{position:absolute;top:90px;left:50%;transform:translateX(-50%);width:30px;height:8px;background:linear-gradient(180deg,#8a5f1c,#5e3e10);border-radius:0 0 3px 3px;} .ambient-lantern .lantern-tassel{position:absolute;top:98px;left:50%;transform:translateX(-50%);width:2px;height:22px;background:linear-gradient(180deg,#d4a84b,rgba(212,168,75,0));animation:tasselWave 2.6s ease-in-out infinite;} .ambient-lantern .lantern-tassel::after{content:'';position:absolute;bottom:-4px;left:-4px;width:10px;height:10px;background:#c41e1e;border-radius:50%;box-shadow:0 0 6px rgba(196,30,30,.6);} @keyframes tasselWave{0%,100%{transform:rotate(4deg);}50%{transform:rotate(-4deg);}} .ambient-lantern .lantern-light{position:absolute;top:26px;left:50%;transform:translateX(-50%);width:150px;height:140px; background:radial-gradient(circle,rgba(232,84,74,.20) 0%,transparent 66%);animation:glowBreathe 4.2s ease-in-out infinite;} body.light-mode .ambient-lantern .lantern-body{box-shadow:0 0 12px rgba(232,84,74,.28),inset 0 0 8px rgba(0,0,0,.2);} /* 灯笼: 竹篾竖纹骨架 (v5 增强) */ .ambient-lantern .lantern-body{ background: repeating-linear-gradient(90deg,rgba(120,20,20,.22) 0 2px,transparent 2px 8px), radial-gradient(circle at 38% 32%,rgba(255,150,110,.5),transparent 52%), linear-gradient(180deg,#e8544a,#a81f1f 78%);} .ambient-lantern:hover .lantern-light{transform:translateX(-50%) scale(1.25);} .ambient-lantern .lantern-light{transition:transform .5s ease;} /* ============================================================ v7: 灯笼/纸人 互动增强 ============================================================ */ .ambient-lantern,.ambient-paper{cursor:pointer;} /* 灯笼点击: 点亮脉冲 (光晕放大 + 灯身亮起 + 摆动) */ .ambient-lantern.lit .lantern-light{transform:translateX(-50%) scale(1.9);} .ambient-lantern.lit .lantern-body{ background: repeating-linear-gradient(90deg,rgba(120,20,20,.18) 0 2px,transparent 2px 8px), radial-gradient(circle at 38% 32%,rgba(255,190,140,.75),transparent 55%), linear-gradient(180deg,#ff7a5a,#d04030 78%); box-shadow:0 0 40px rgba(255,140,80,.6),inset 0 0 14px rgba(255,220,160,.5);} .ambient-lantern.lit .lantern-inner{animation:lanternLit 1.1s cubic-bezier(.34,1.56,.64,1);} @keyframes lanternLit{0%{transform:rotate(0);}30%{transform:rotate(-7deg);}60%{transform:rotate(5deg);}100%{transform:rotate(0);}} .ambient-lantern.lit .lantern-xi{color:rgba(255,240,200,.95);text-shadow:0 0 14px rgba(255,220,140,.9);} /* 纸人点击: 回首致意 (轻旋 + 浮动停顿) */ .ambient-paper.wave .paper-inner{animation:paperWave 1.4s cubic-bezier(.34,1.56,.64,1);} @keyframes paperWave{ 0%{transform:translateY(0) rotateZ(0);} 25%{transform:translateY(-20px) rotateZ(-8deg);} 55%{transform:translateY(-30px) rotateZ(6deg);} 80%{transform:translateY(-10px) rotateZ(-3deg);} 100%{transform:translateY(0) rotateZ(0);}} /* 点击涟漪 (纸人脚下) */ .ambient-paper.wave::after{content:'';position:absolute;left:50%;bottom:-8px;transform:translateX(-50%); width:0;height:0;border-radius:50%;border:2px solid rgba(212,168,75,.5);opacity:0; animation:paperRing 1.2s ease-out forwards;} @keyframes paperRing{to{width:90px;height:26px;opacity:0;}} /* ============================================================ v7: 位置变体 (按页面类型 data-zone 错落摆放) root(图谱/搜索/音乐/关于): 纸人高位、灯笼中位 guide(攻略页): 纸人低位避让工具栏、灯笼高位 home(启动器): 纸人两侧、灯笼贴角 ============================================================ */ .ambient-paper.paper-bride{left:max(10px, calc((100vw - 1240px)/2 - 160px));top:16vh;width:150px;height:250px;} .ambient-paper.paper-white{right:max(10px, calc((100vw - 1240px)/2 - 130px));top:24vh;width:110px;height:180px;} body[data-zone="guide"] .ambient-paper.paper-bride{top:30vh;left:max(10px, calc((100vw - 1240px)/2 - 170px));} body[data-zone="guide"] .ambient-paper.paper-white{top:42vh;right:max(10px, calc((100vw - 1240px)/2 - 140px));} body[data-zone="home"] .ambient-paper.paper-bride{top:14vh;left:max(10px, calc((100vw - 1240px)/2 - 165px));} body[data-zone="home"] .ambient-paper.paper-white{top:20vh;right:max(10px, calc((100vw - 1240px)/2 - 135px));} .ambient-lantern.lantern-1{left:max(10px, calc((100vw - 1240px)/2 - 100px));} .ambient-lantern.lantern-2{right:max(10px, calc((100vw - 1240px)/2 - 100px));} body[data-zone="guide"] .ambient-lantern.lantern-1{top:0;} body[data-zone="guide"] .ambient-lantern.lantern-2{top:0;} body[data-zone="root"] .ambient-lantern.lantern-1{top:0;} body[data-zone="root"] .ambient-lantern.lantern-2{top:0;} body[data-zone="home"] .ambient-lantern.lantern-1{left:max(10px, calc((100vw - 1240px)/2 - 40px));} body[data-zone="home"] .ambient-lantern.lantern-2{right:max(10px, calc((100vw - 1240px)/2 - 40px));} /* 每类页面常驻装饰最多四类：框景红线不计入叙事器物 */ body[data-zone="home"] .ambient-fu,body[data-zone="home"] .ambient-compass, body[data-zone="home"] .ambient-flag,body[data-zone="home"] .ambient-papermoney{display:none !important;} body[data-zone="guide"] .ambient-lantern,body[data-zone="guide"] .ambient-flag, body[data-zone="guide"] .ambient-papermoney{display:none !important;} body[data-zone="root"] .ambient-paper,body[data-zone="root"] .ambient-fu, body[data-zone="root"] .ambient-candle{display:none !important;} /* 连续动画只留器物主体；流苏、光晕、烛泪与烟改为静态材质 */ .ambient-lantern .lantern-tassel,.ambient-lantern .lantern-light, .ambient-candle .candle-glow,.ambient-candle .candle-smoke,.ambient-candle .candle-drip{animation:none !important;} /* ============================================================ 罗盘 ×1 (v5 新增: 铜罗盘, 指针 atan2 指向鼠标) 与招魂幡均随 body.no-ambient 隐藏 ============================================================ */ .ambient-compass{position:fixed;right:max(10px, calc((100vw - 1240px)/2 - 110px));bottom:24px; width:96px;height:96px;z-index:2;pointer-events:none;will-change:transform; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));opacity:.8;} .ambient-compass .cp-outer{position:absolute;inset:0;border-radius:50%; background: repeating-conic-gradient(from 0deg,rgba(212,168,75,.25) 0deg 11.25deg,transparent 11.25deg 22.5deg), radial-gradient(circle at 38% 32%,#c8b080,#8a7448 62%,#5e4c28); border:2px solid rgba(212,168,75,.6); box-shadow:inset 0 2px 4px rgba(255,255,255,.2),inset 0 -3px 6px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.45);} .ambient-compass .cp-outer::after{content:'';position:absolute;inset:4px;border-radius:50%; border:1px dashed rgba(120,90,40,.55);} .ambient-compass .cp-char{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:serif;font-size:.62rem;color:#4a3a18;letter-spacing:1px;opacity:.75;} .ambient-compass .cp-char b{position:absolute;font-size:.66rem;color:#8a1a1a;font-weight:900;} .ambient-compass .cp-char b.n{top:5px;} .ambient-compass .cp-char b.s{bottom:5px;} .ambient-compass .cp-char b.w{left:4px;} .ambient-compass .cp-char b.e{right:4px;} .ambient-compass .cp-inner{position:absolute;inset:20px;border-radius:50%; background:radial-gradient(circle at 40% 35%,#e8dcc0,#c8b088 70%,#a89060); box-shadow:inset 0 2px 3px rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.3);} .ambient-compass .cp-inner::before{content:'';position:absolute;inset:0;border-radius:50%; background: repeating-conic-gradient(from 0deg,rgba(150,110,50,.14) 0deg 45deg,transparent 45deg 90deg);} .ambient-compass .cp-needle{position:absolute;inset:0;z-index:3;will-change:transform;} .ambient-compass .cp-needle::before{content:'';position:absolute;top:50%;left:50%;width:3px;height:34px; transform:translate(-50%,-100%); background:linear-gradient(180deg,#b02525,#e85a4a 60%,#7e1212); border-radius:2px 2px 0 0; box-shadow:0 0 6px rgba(196,30,30,.45);} .ambient-compass .cp-needle::after{content:'';position:absolute;top:50%;left:50%;width:3px;height:34px; transform:translate(-50%,0); background:linear-gradient(180deg,#2a2a2a,#555 60%,#1a1a1a); border-radius:0 0 2px 2px;} .ambient-compass .cp-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#f0d488,#8a5f1c 70%); box-shadow:0 0 4px rgba(0,0,0,.6);z-index:4;} body.light-mode .ambient-compass{opacity:.55;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));} @media (max-width:1400px){.ambient-compass{display:none;}} /* ============================================================ 招魂幡 ×1 (v5 新增: 窄长白幡, CSS sway) ============================================================ */ .ambient-flag{position:fixed;left:max(10px, calc((100vw - 1240px)/2 - 90px));top:38vh; width:56px;height:150px;z-index:2;pointer-events:none;will-change:transform; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));opacity:.7; transform-origin:top center;animation:flagSway 8s ease-in-out infinite;} .ambient-flag .flag-pole{position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:150px; background:linear-gradient(180deg,#8a7a5a,#4a3a28);} .ambient-flag .flag-cloth{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:34px;height:96px; background: repeating-linear-gradient(180deg,rgba(180,160,130,.12) 0 6px,transparent 6px 12px), linear-gradient(180deg,#e8e0d0,#d8ccb4 80%,#c8b898); border:1px solid rgba(160,140,110,.5); clip-path:polygon(0 0,100% 0,100% 88%,88% 100%,80% 88%,72% 100%,64% 88%,56% 100%,48% 88%,40% 100%,32% 88%,24% 100%,16% 88%,8% 100%,0 88%); box-shadow:inset 0 1px 2px rgba(255,255,255,.5),0 2px 6px rgba(0,0,0,.25);} .ambient-flag .flag-cloth::after{content:'奠';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); font-size:.8rem;color:#5a4a30;font-family:serif;font-weight:700;} @keyframes flagSway{0%,100%{transform:rotate(2deg);}30%{transform:rotate(-2.5deg);}60%{transform:rotate(1.5deg);}} body.light-mode .ambient-flag{opacity:.4;} @media (max-width:1400px){.ambient-flag{display:none;}} /* ============================================================ 场景映射 (v5 器物志 · 氛围叙事) 启动器 hero 牌坊剪影 / 攻略铜牌序号 / 音乐页皮影 / 关于页牌位墙 ============================================================ */ /* ---- 启动器 hero: 奘铃村村口牌坊+枯树剪影 (opacity ≤ .08) ---- */ .hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:0;opacity:.07; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='xMidYMid slice'%3E%3Cpath fill='%23d4a84b' d='M480 80v-30h40v30h70v160h-180V80zm-14 0h40v-20h-40zm60 0h40v-20h-40zm-56 20v140h112V100z'/%3E%3Cpath fill='none' stroke='%23d4a84b' stroke-width='2' d='M620 300c0-80 24-140 60-180M740 300c-10-90 8-150 40-200M300 300c14-70 40-120 80-160M180 300c20-60 44-100 80-140'/%3E%3Ccircle cx='700' cy='60' r='26' fill='none' stroke='%23d4a84b' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-size:cover;background-position:center;} .hero-inner{position:relative;z-index:1;} /* ---- 攻略步骤序号 → 机关铜牌 (錾刻环纹) ---- */ .step-num{ position:relative; background: repeating-conic-gradient(from 0deg,rgba(212,168,75,.3) 0deg 30deg,transparent 30deg 60deg), radial-gradient(circle at 38% 30%,#d8c088,#9a7a48 60%,#6e5228) !important; color:#3a2808 !important; border:1px solid rgba(212,168,75,.6) !important; border-radius:50% !important; font-weight:900; box-shadow:inset 0 1px 2px rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.4),0 2px 5px rgba(0,0,0,.35); text-shadow:0 1px 0 rgba(255,255,255,.25);} .step-num::before{content:'';position:absolute;inset:3px;border-radius:50%; border:1px dashed rgba(120,80,30,.5);pointer-events:none;} body.light-mode .step-num{ background: repeating-conic-gradient(from 0deg,rgba(160,120,60,.25) 0deg 30deg,transparent 30deg 60deg), radial-gradient(circle at 38% 30%,#e8d8b0,#c4a878 60%,#a88858) !important;} /* ---- 音乐页曲目行 hover: 皮影人影浮出 ---- */ .song-card:hover::after{content:'';position:absolute;right:10px;top:50%;transform:translateY(-50%); width:44px;height:64px;opacity:.3;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 64'%3E%3Cpath fill='%23c9b896' d='M22 4c7 0 12 5 12 12v4c5 2 8 6 8 11 0 5-3 8-7 9 1 3 2 6 2 9 0 2-1 3-3 3h-3l-2 7h-14l-2-7h-3c-2 0-3-1-3-3 0-3 1-6 2-9-4-1-7-4-7-9 0-5 3-9 8-11v-4c0-7 5-12 12-12z'/%3E%3Ccircle cx='18' cy='22' r='2' fill='%236a5438'/%3E%3Ccircle cx='26' cy='22' r='2' fill='%236a5438'/%3E%3Cpath fill='%238a6a3a' d='M19 29c2-2 4-2 6 0l-3 3z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-size:contain; animation:shadowDance 2.4s ease-in-out infinite;} @keyframes shadowDance{0%,100%{transform:translateY(-50%) rotate(-2deg);}50%{transform:translateY(-56%) rotate(2deg);}} /* ---- 关于页版本日志 → 牌位墙 ---- */ .log-list li{position:relative; background: repeating-linear-gradient(92deg,rgba(0,0,0,.05) 0 1px,transparent 1px 4px), linear-gradient(180deg,#7a5a3a,#5e4228 70%,#4a3220) !important; border:1px solid rgba(160,120,70,.5) !important; border-radius:5px; box-shadow:inset 0 1px 0 rgba(255,235,200,.12),inset 0 -2px 5px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3);} .log-list li .ver{position:relative;color:#e8c86a !important;text-shadow:0 1px 1px rgba(0,0,0,.5);} .log-list li::before{content:'奠';position:absolute;top:-1px;left:50%;transform:translateX(-50%); font-size:.5rem;color:rgba(232,200,106,.6);} .log-list li:hover{box-shadow:inset 0 1px 0 rgba(255,235,200,.18),inset 0 -2px 5px rgba(0,0,0,.45),0 0 12px rgba(212,168,75,.2);} body.light-mode .log-list li{ background: repeating-linear-gradient(92deg,rgba(120,80,40,.06) 0 1px,transparent 1px 4px), linear-gradient(180deg,#d8bc94,#c4a47c 70%,#b09068) !important; border-color:rgba(140,100,60,.45) !important;} /* ============================================================ 红烛 v4: 烛台/金箍/烛泪/双层火焰/青烟, 点击吹灭/点燃 ============================================================ */ .ambient-candle{position:fixed;bottom:0;width:60px;height:170px;z-index:2;will-change:transform; filter:drop-shadow(0 6px 16px rgba(0,0,0,.5));} .ambient-candle.candle-left{left:max(10px, calc((100vw - 1240px)/2 - 82px));} .ambient-candle.candle-right{right:max(10px, calc((100vw - 1240px)/2 - 82px));} .ambient-candle .candle-glow,.ambient-candle .candle-smoke,.ambient-candle .candle-drip{pointer-events:none;} .ambient-candle .candle-stand{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:46px;height:14px; background:linear-gradient(180deg,#8a5f1c,#5e3e10 60%,#3e2808);border-radius:6px 6px 3px 3px; box-shadow:0 3px 8px rgba(0,0,0,.45);} .ambient-candle .candle-stand::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:34px;height:8px; background:linear-gradient(180deg,#d4a84b,#8a5f1c);border-radius:50%/60%;} .ambient-candle .candle-body{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:26px;height:118px; background: linear-gradient(90deg,rgba(0,0,0,.32) 0%,transparent 18%,rgba(255,255,255,.16) 42%,transparent 62%,rgba(0,0,0,.3) 100%), linear-gradient(180deg,#d45757 0%,#b02a2a 58%,#8a1a1a 82%,#6e1414 100%); border-radius:4px 4px 2px 2px; box-shadow:inset -3px 0 6px rgba(0,0,0,.35),inset 3px 0 5px rgba(255,220,180,.22),0 4px 14px rgba(0,0,0,.5);} .ambient-candle .candle-ring{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);width:28px;height:7px; background:linear-gradient(180deg,#e8c86a,#b8862d 55%,#8a5f1c);border-radius:3px;box-shadow:0 0 8px rgba(212,168,75,.5);} .ambient-candle .candle-wax{position:absolute;bottom:112px;left:50%;transform:translateX(-50%);width:32px;height:11px; background:linear-gradient(180deg,#f0e0c8,#c9a97e);border-radius:5px 5px 3px 3px;} .ambient-candle .candle-wick{position:absolute;bottom:118px;left:50%;transform:translateX(-50%);width:2px;height:10px;background:#2a1a0a;transition:opacity .5s;} .ambient-candle .candle-flame{position:absolute;bottom:126px;left:50%;transform:translateX(-50%);width:18px;height:30px; background: radial-gradient(circle at 50% 72%,rgba(255,245,210,.95) 0%,rgba(255,220,130,.9) 26%,rgba(255,150,50,.8) 52%,rgba(230,90,20,.55) 74%,rgba(160,40,10,0) 100%); border-radius:50% 50% 50% 50%/64% 64% 36% 36%;filter:blur(.5px); animation:flameFlick 1.4s ease-in-out infinite;transform-origin:50% 100%;transition:opacity .5s,transform .5s;} .ambient-candle .candle-flame::after{content:'';position:absolute;inset:18% 30% 30% 30%; background:radial-gradient(circle,rgba(255,255,240,.95),rgba(255,220,140,.6) 70%,transparent);border-radius:50%; animation:flameCore 1.4s ease-in-out infinite;} .ambient-candle .candle-glow{position:absolute;bottom:74px;left:50%;transform:translateX(-50%);width:220px;height:210px; background:radial-gradient(circle,rgba(255,160,60,.26) 0%,rgba(255,130,45,.10) 42%,transparent 68%); animation:glowBreathe 3.1s ease-in-out infinite;transition:opacity .6s;} .ambient-candle .candle-smoke{position:absolute;bottom:150px;left:50%;width:4px;height:34px;border-radius:50%; background:linear-gradient(180deg,rgba(180,170,160,.4),transparent); animation:smokeRise 4.5s ease-out infinite;opacity:0;transition:opacity .4s;} .ambient-candle .candle-smoke.s2{animation-delay:2.2s;} .ambient-candle .candle-drip{position:absolute;bottom:12px;width:4px;height:0;background:linear-gradient(180deg,#c43c3c,#8e1f1f);border-radius:0 0 2px 2px;opacity:.9;} .ambient-candle .candle-drip.d1{left:36%;animation:dripGrow 7s ease-in-out infinite;} .ambient-candle .candle-drip.d2{left:58%;animation:dripGrow 9.5s ease-in-out infinite 2s;} /* 蜡烛点击状态 (v8: 无声无文字, 点击切换吹灭/点燃) */ .ambient-candle{cursor:pointer;} .ambient-candle .candle-tip{display:none !important;} .ambient-candle.out .candle-flame{opacity:0;transform:translateX(-50%) scale(.4);} .ambient-candle.out .candle-flame::after{animation:none;opacity:0;} .ambient-candle.out .candle-glow{opacity:0;} .ambient-candle.out .candle-smoke{opacity:1;animation-duration:2.6s;} .ambient-candle.out .candle-wick{opacity:.4;} @keyframes flameFlick{0%,100%{transform:translateX(-50%) scale(1) rotate(-2.5deg);}28%{transform:translateX(-50%) scale(.9,.84) rotate(2.5deg);}52%{transform:translateX(-50%) scale(1.07,1.12) rotate(-1.5deg);}76%{transform:translateX(-50%) scale(.94,.9) rotate(1.2deg);}} @keyframes flameCore{0%,100%{transform:scale(1);opacity:.9;}50%{transform:scale(.8);opacity:1;}} @keyframes glowBreathe{0%,100%{opacity:.65;transform:translateX(-50%) scale(1);}50%{opacity:1;transform:translateX(-50%) scale(1.14);}} @keyframes smokeRise{0%{transform:translate(-50%,0) scaleX(1);opacity:0;}15%{opacity:.5;}100%{transform:translate(-50%,-52px) scaleX(2.4);opacity:0;}} @keyframes dripGrow{0%,55%{height:0;}65%{height:15px;}78%{height:15px;}88%{height:0;}} body.light-mode .ambient-candle .candle-flame{opacity:.8;} body.light-mode .ambient-candle .candle-glow{opacity:.4;} body.light-mode .ambient-candle{filter:drop-shadow(0 4px 10px rgba(0,0,0,.3));} /* ---- 纸钱飘落 ---- */ .ambient-papermoney{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:2;} .pm-piece{position:absolute;top:-40px;background:linear-gradient(180deg,#f2ecdc,#d8ccb0);border:1px solid #b8a880;border-radius:2px;opacity:0; animation-name:pmFall;animation-timing-function:linear;animation-iteration-count:infinite;} .pm-piece::before{content:'';position:absolute;left:50%;top:50%;width:40%;height:40%;transform:translate(-50%,-50%);background:rgba(212,168,75,.5);border-radius:1px;} @keyframes pmFall{0%{transform:translateY(-40px) rotateZ(0deg) rotateX(0deg);opacity:0;}8%{opacity:.75;}100%{transform:translateY(108vh) rotateZ(520deg) rotateX(400deg);opacity:.22;}} /* ============================================================ 进度条 / 滚动条 美化 ============================================================ */ /* ============================================================ 进度条 → 燃香计时 (v5 器物志) 启动器通关进度: 香灰已燃 + 火星进度头 + 两端香牌 攻略阅读进度: 保留流光, 两端小铜铃 ============================================================ */ /* ===== 阅读进度: 红绸金线 + 回纹暗纹 + 两端铜铃 (v7 定制) ===== */ .read-progress{ background: repeating-linear-gradient(45deg,rgba(212,168,75,.14) 0 4px,transparent 4px 8px), linear-gradient(90deg,#c41e1e,#d4a84b,#c41e1e) !important; background-size:auto,200% 100% !important; animation:progSheen 3.2s linear infinite !important; box-shadow:0 0 10px rgba(212,168,75,.55),0 1px 2px rgba(0,0,0,.3) !important; height:4px !important; border-radius:2px;} /* 阅读进度两端小铜铃 (带铃舌) */ .read-progress::before,.read-progress::after{content:'';position:fixed;top:-3px;width:11px;height:11px;border-radius:50%; background: radial-gradient(circle at 40% 32%,#f0d488,#b8862d 52%,#7a4e1c 90%); box-shadow:0 0 6px rgba(212,168,75,.5),inset 0 -1px 1px rgba(0,0,0,.4);} .read-progress::before{left:0;} .read-progress::after{right:0;} .read-progress::before::after,.read-progress::after::after{display:none;} /* ===== 通关进度: 燃香计时 (香灰+火星+香牌+铜钱底纹) ===== */ .progress-bar-fill{position:relative; background: radial-gradient(circle at 100% 50%,rgba(255,120,40,.55) 0,transparent 8px), repeating-linear-gradient(90deg,rgba(212,168,75,.07) 0 12px,transparent 12px 14px,transparent 14px 26px,rgba(212,168,75,.05) 26px 28px), linear-gradient(90deg,#6e6250,#a89c88 40%,#c9c0b0 75%,#ddd4c4) !important; background-size:auto,auto,200% 100% !important; animation:progSheen 4.5s linear infinite !important; box-shadow:0 0 12px rgba(255,140,60,.35),inset 0 1px 0 rgba(255,255,255,.18) !important; transition:width 1s ease;} /* 进度头火星呼吸 */ .progress-bar-fill::after{content:'';position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%; background:radial-gradient(circle,rgba(255,180,80,.95),rgba(255,120,40,.5) 60%,transparent); animation:emberPulse 1.6s ease-in-out infinite;} @keyframes emberPulse{0%,100%{opacity:.75;transform:translateY(-50%) scale(1);}50%{opacity:1;transform:translateY(-50%) scale(1.35);}} /* 未播部分挂金色香牌 */ .progress-wrap{position:relative;} .progress-wrap::after{content:'〽';position:absolute;right:-14px;top:1px;font-size:.8rem;color:#d4a84b;text-shadow:0 0 8px rgba(212,168,75,.6);opacity:.9;} @keyframes progSheen{0%{background-position:0% 0;}100%{background-position:200% 0;}} /* ===== 音乐进度: 横置线香 + 木尺刻度 (v7 定制) ===== */ .mp-progress input[type=range]{-webkit-appearance:none;appearance:none;height:10px;border-radius:3px;outline:none; background: repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px,rgba(0,0,0,.08) 0 30px,transparent 30px 60px), repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 4px), linear-gradient(90deg,#4a3a28,#7a6248 60%,#8a7458); box-shadow:inset 0 1px 3px rgba(0,0,0,.6),inset 0 -1px 1px rgba(255,255,255,.06),0 1px 0 rgba(255,255,255,.04); border:1px solid rgba(0,0,0,.35);} .mp-progress input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffe9a8,#e88a30 55%,#c05a18); border:1px solid #8a3a10; box-shadow:0 0 10px rgba(255,150,60,.6),inset 0 -1px 2px rgba(0,0,0,.4); cursor:pointer;transition:transform .2s,box-shadow .2s;} .mp-progress input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25);box-shadow:0 0 16px rgba(255,160,70,.85);} .mp-progress input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a8,#e88a30 55%,#c05a18);border:1px solid #8a3a10;box-shadow:0 0 10px rgba(255,150,60,.6);cursor:pointer;} body.light-mode .mp-progress input[type=range]{background: repeating-linear-gradient(90deg,rgba(120,90,50,.05) 0 2px,transparent 2px 4px), linear-gradient(90deg,#b8a488,#d0bc9c 60%,#d8c4a4); box-shadow:inset 0 1px 3px rgba(120,90,50,.35);} body.light-mode .mp-progress input[type=range]::-webkit-slider-thumb{background:radial-gradient(circle at 35% 30%,#ffe9c0,#c89050 55%,#a06a30);box-shadow:0 0 8px rgba(200,130,60,.5);} /* ============================================================ 滚动条 → 朱漆栏杆 + 铜轴 (v5 器物志) 轨道: 深朱漆木纹; 滑块: 铜轴卷轴(两端金轴帽+朱漆红绳缠纹) ============================================================ */ ::-webkit-scrollbar{width:11px;height:11px;} ::-webkit-scrollbar-track{ background: repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 5px), linear-gradient(180deg,#2a0d0d,#180606 60%,#100404); box-shadow:inset 0 0 6px rgba(0,0,0,.6),inset 2px 0 3px rgba(0,0,0,.4); } ::-webkit-scrollbar-thumb{ background: repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px), linear-gradient(90deg,#7e1212,#b02a2a 45%,#8a1a1a 70%,#5e0c0c); border:1px solid rgba(212,168,75,.45); border-radius:5px; box-shadow: inset 1px 0 1px rgba(255,220,180,.25), inset -1px 0 2px rgba(0,0,0,.5), 0 0 6px rgba(212,168,75,.2); } /* 两端金色轴帽 */ ::-webkit-scrollbar-thumb:hover{ border-color:rgba(232,200,106,.8); box-shadow: inset 1px 0 1px rgba(255,220,180,.35), inset -1px 0 2px rgba(0,0,0,.5), 0 0 10px rgba(212,168,75,.45); } ::-webkit-scrollbar-corner{background:#150a0a;} /* 浅色: 朱漆降饱和为赭石, 金轴降为暗金 */ body.light-mode ::-webkit-scrollbar-track{ background: repeating-linear-gradient(90deg,rgba(90,60,40,.05) 0 2px,transparent 2px 5px), linear-gradient(180deg,#e8dcc8,#d8c8ac 60%,#c8b498); box-shadow:inset 0 0 6px rgba(90,60,40,.25),inset 2px 0 3px rgba(90,60,40,.15); } body.light-mode ::-webkit-scrollbar-thumb{ background: repeating-linear-gradient(90deg,rgba(120,80,50,.06) 0 1px,transparent 1px 3px), linear-gradient(90deg,#a8654a,#c48060 45%,#a86a4a 70%,#8a5038); border-color:rgba(154,116,38,.5); box-shadow:inset 1px 0 1px rgba(255,230,200,.4),inset -1px 0 2px rgba(90,50,30,.35); } /* ============================================================ 双主题色彩工程 (v6): 浅色 = 黄纸朱砂民俗印刷风 所有装饰在 light-mode 下换配色逻辑, 而非简单降透明度 ============================================================ */ /* C1-1 顶部红绸 → 淡金笺条, 囍字改朱砂小印 */ body.light-mode .ambient-silk{ background:linear-gradient(90deg,rgba(201,162,95,.45),rgba(201,162,95,.6) 25%,rgba(201,162,95,.35) 50%,rgba(201,162,95,.6) 75%,rgba(201,162,95,.45)); box-shadow:0 1px 6px rgba(201,162,95,.3);} body.light-mode .ambient-silk .silk-xi{color:#b02525;opacity:.7;font-size:11px;top:7px;} /* C1-2 两侧红边 → 朱砂细线 */ body.light-mode .ambient-edge{ width:2px; background:linear-gradient(180deg,rgba(176,37,37,.3),rgba(176,37,37,.15) 38%,rgba(176,37,37,.25) 72%,rgba(176,37,37,.35));} body.light-mode .ambient-edge.edge-left{border-right:1px solid rgba(176,37,37,.2);} body.light-mode .ambient-edge.edge-right{border-left:1px solid rgba(176,37,37,.2);} /* C1-3 四角角花 → 单色朱砂剪纸 */ body.light-mode .ambient-corner{opacity:.35;} body.light-mode .ambient-corner svg path{stroke:#b02525 !important;} /* C1-4 纸钱 → 浅黄纸加深描边 */ body.light-mode .pm-piece{ background:linear-gradient(180deg,#e8d9a8,#d4bd84); border:1px solid #b89860; box-shadow:0 1px 3px rgba(140,110,50,.25);} body.light-mode .pm-piece::before{background:rgba(176,37,37,.35);} /* C1-5 红烛 → 朱砂降饱和, 光晕减弱 */ body.light-mode .ambient-candle .candle-body{ background: linear-gradient(90deg,rgba(0,0,0,.25) 0%,transparent 18%,rgba(255,255,255,.18) 42%,transparent 62%,rgba(0,0,0,.22) 100%), linear-gradient(180deg,#c65548,#a84338 58%,#8a342c 82%,#6e2822 100%);} body.light-mode .ambient-candle .candle-glow{opacity:.28;} body.light-mode .ambient-candle .candle-flame{opacity:.75;} body.light-mode .ambient-candle .candle-wax{background:linear-gradient(180deg,#f0e4cc,#d4bc94);} body.light-mode .ambient-candle .candle-ring{background:linear-gradient(180deg,#d4b078,#a88850 55%,#8a6a3a);} body.light-mode .ambient-candle .candle-stand{background:linear-gradient(180deg,#b09068,#8a6a48 60%,#6e5234);} /* C1-6 红丝线 → 朱砂色值 */ body.light-mode .ambient-thread{ opacity:.6; background:linear-gradient(180deg,rgba(176,37,37,0),rgba(176,37,37,.4) 28%,rgba(176,37,37,.26) 66%,rgba(176,37,37,0));} /* C1-7 剧场入口锁闭态 → 米白纸底+虚线朱砂框 (见 zjy_theater.css) */ /* ============================================================ C2: 纸人浅色重绘 (黄纸朱砂风) ============================================================ */ /* 白纸人: 白底上补深描边 + 暖投影, 轮廓清晰 */ body.light-mode .ambient-paper.paper-white svg{ filter:drop-shadow(0 4px 10px rgba(120,80,40,.28));} body.light-mode .ambient-paper.paper-white svg path{ stroke:#a08a68 !important;} /* 纸新娘: 褪色旧红 (降饱和+提亮), 宣纸怀旧感 */ body.light-mode .ambient-paper.paper-bride svg{ filter:saturate(.72) brightness(1.05) drop-shadow(0 4px 10px rgba(120,60,40,.22));} body.light-mode .ambient-paper.paper-bride svg path{ stroke:#b89878 !important;} /* 罗盘/招魂幡: 浅色下降 opacity */ body.light-mode .ambient-compass{opacity:.55;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));} body.light-mode .ambient-flag{opacity:.45;filter:drop-shadow(0 3px 6px rgba(0,0,0,.18));} /* 灯笼: 浅色降饱和 */ body.light-mode .ambient-lantern .lantern-body{ background: repeating-linear-gradient(90deg,rgba(120,20,20,.14) 0 2px,transparent 2px 8px), radial-gradient(circle at 38% 32%,rgba(240,180,150,.4),transparent 52%), linear-gradient(180deg,#d4705a,#b05040 78%);} body.light-mode .ambient-lantern .lantern-xi{color:rgba(176,37,37,.75);text-shadow:0 0 8px rgba(176,37,37,.35);} /* ============================================================ C3: 主题切换过渡 (不动 transform, 保护视差/倾斜) ============================================================ */ body{transition:background-color .4s ease,color .4s ease;} .ambient-layer *,.ambient-vignette,.ambient-edge,.ambient-silk,.ambient-corner, .ambient-thread,.ambient-papermoney,.pm-piece,.ambient-compass,.ambient-flag{ transition:opacity .4s ease,filter .4s ease,background-color .4s ease,border-color .4s ease,box-shadow .4s ease;} @media (prefers-reduced-motion:reduce){ body,.ambient-layer *,.ambient-vignette,.ambient-edge,.ambient-silk,.ambient-corner, .ambient-thread,.ambient-papermoney,.pm-piece,.ambient-compass,.ambient-flag{transition:none !important;} .ambient-vignette,.ambient-thread,.ambient-paper .paper-inner,.ambient-fu .fu-inner, .ambient-lantern .lan-inner,.ambient-lantern .lantern-tassel,.ambient-lantern .lantern-light, .ambient-candle *,.pm-piece,.ambient-flag,.music-fab.playing .fab-icon, .music-panel.playing::before,.song-card:hover::after,.ux-ripple::after, .read-progress,.done-progress,.mp-progress input{animation:none !important;} } /* ============================================================ 第四节: 精致度增强 ============================================================ */ /* 卡片窗花角: 浅色改朱砂单色 */ body.light-mode .game-card::after,body.light-mode .news-card::after,body.light-mode .cult-card::after, body.light-mode .step-card::after,body.light-mode .easter-card::after,body.light-mode .song-card::after, body.light-mode .music-card::after{ opacity:.4; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='none' stroke='%23b02525' stroke-width='1' d='M1 25V10a9 9 0 0 1 9-9h15'/%3E%3Cpath fill='none' stroke='%23b02525' stroke-width='.8' d='M5 25V13a8 8 0 0 1 8-8h12'/%3E%3Ccircle cx='13' cy='13' r='2' fill='%23b02525' opacity='.7'/%3E%3C/svg%3E");} /* 滚动条浅色: 朱漆→浅木 + 降饱和朱砂滑块 (覆盖上文 v5 段) */ body.light-mode ::-webkit-scrollbar-track{ background: repeating-linear-gradient(90deg,rgba(120,80,40,.04) 0 2px,transparent 2px 5px), linear-gradient(180deg,#e2d0a8,#d8c39a 60%,#ccb488);} body.light-mode ::-webkit-scrollbar-thumb{ background: repeating-linear-gradient(90deg,rgba(120,60,40,.05) 0 1px,transparent 1px 3px), linear-gradient(90deg,#b06050,#c87a68 45%,#b06050 70%,#9a4a3a); border:1px solid rgba(176,37,37,.4); box-shadow:inset 1px 0 1px rgba(255,230,210,.5),inset -1px 0 2px rgba(120,60,40,.25);} body.light-mode ::-webkit-scrollbar-thumb:hover{ border-color:rgba(176,37,37,.6); box-shadow:0 0 8px rgba(176,37,37,.3);} body.light-mode ::-webkit-scrollbar-corner{background:#d8c39a;} /* ============================================================ 第五节: 文字展示矩形框差异化 (v7) insight-box=牌位匾额 / cult-box=黄符折页 / step-actions=案卷签条 ============================================================ */ /* ---- 核心启示 = 牌位匾额: 描金框 + 四角回纹 + 上下金线 ---- */ .insight-box{ position:relative !important; background: repeating-linear-gradient(0deg,rgba(212,168,75,.05) 0 1px,transparent 1px 4px), linear-gradient(135deg,rgba(196,30,30,.1),rgba(212,168,75,.05)) !important; border:1px solid rgba(212,168,75,.45) !important; border-left:4px solid var(--color-gold) !important; box-shadow: inset 0 0 0 1px rgba(212,168,75,.08), inset 0 1px 0 rgba(255,255,255,.05), 0 2px 10px rgba(0,0,0,.18) !important;} .insight-box::before{content:'';position:absolute;top:-3px;left:12px;right:12px;height:1px; background:linear-gradient(90deg,transparent,rgba(212,168,75,.6),transparent);} .insight-box::after{content:'';position:absolute;bottom:-3px;left:12px;right:12px;height:1px; background:linear-gradient(90deg,transparent,rgba(212,168,75,.6),transparent);} /* 四角回纹 (两角伪元素 + 两角背景) */ .insight-box .insight-ic{position:relative;z-index:1;} /* ---- 文化卡折页 = 黄符: 朱砂边 + 撕角 ---- */ .cult-box{ position:relative !important; border:1px solid rgba(176,37,37,.4) !important; border-left:3px solid rgba(176,37,37,.6) !important; background: repeating-linear-gradient(0deg,rgba(176,37,37,.03) 0 1px,transparent 1px 5px), rgba(212,168,75,.05) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 6px rgba(0,0,0,.12) !important;} .cult-box::after{content:'';position:absolute;top:0;right:0;width:14px;height:14px;pointer-events:none; background:linear-gradient(225deg,var(--color-canvas,#0d0505) 0 49%,rgba(176,37,37,.35) 50% 100%);} body.light-mode .cult-box::after{background:linear-gradient(225deg,#f7f1e6 0 49%,rgba(176,37,37,.3) 50% 100%);} /* ---- 步骤动作面板 = 案卷签条: 朱砂批示线 + 细点栏线 ---- */ .step-actions{ position:relative !important; background: repeating-linear-gradient(0deg,rgba(212,168,75,.04) 0 1px,transparent 1px 3px), var(--color-canvas) !important; border-left:4px solid var(--color-gold) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;} .step-actions::after{content:'';position:absolute;left:10px;right:10px;bottom:4px;height:1px; background:repeating-linear-gradient(90deg,rgba(212,168,75,.4) 0 5px,transparent 5px 9px);} /* 浅色适配 */ body.light-mode .insight-box{ background: repeating-linear-gradient(0deg,rgba(154,116,38,.05) 0 1px,transparent 1px 4px), linear-gradient(135deg,rgba(176,37,37,.07),rgba(154,116,38,.04)) !important; border-color:rgba(154,116,38,.4) !important;} body.light-mode .cult-box{background: repeating-linear-gradient(0deg,rgba(176,37,37,.03) 0 1px,transparent 1px 5px), rgba(154,116,38,.05) !important;} body.light-mode .step-actions{background: repeating-linear-gradient(0deg,rgba(154,116,38,.04) 0 1px,transparent 1px 3px), #faf3e5 !important;} /* ============================================================ 响应式断点: 装饰永不遮挡内容 ≤1400: 大件(纸人/红烛/灯笼/黄符)全部隐藏, 只留框架装饰与纸钱 ≤1100: 同 1400 (大件已隐藏) ≤760: 红烛 0.75 倍贴角显示, 隐藏红丝/角花 ============================================================ */ @media (max-width:1400px){ .ambient-paper,.ambient-candle,.ambient-lantern,.ambient-fu{display:none;} } @media (max-width:760px){ .ambient-candle{display:block;transform:scale(.75);transform-origin:bottom center;} .ambient-candle.candle-left{left:8px;} .ambient-candle.candle-right{right:8px;} .ambient-thread,.ambient-corner{display:none;} } /* ============================================================ 「字里奘铃」文字排版体系 (v7) 字体三件套 / 标题匾额 / 正文信笺 / 步骤卦牌 / 朱砂批注 / 列表载体 / 铜钱徽章 / 空状态铜镜 ============================================================ */ /* ---- 1. 字体性格: 楷体标题 / 宋体正文 / 数字保持 sans ---- */ body{ --font-kai:"Kaiti SC","STKaiti","KaiTi","\u6977\u4f53",serif; --font-song:"Songti SC","STSong","SimSun","\u5b8b\u4f53",serif;} /* 标题族: 大标题/章节名/卡片题目 → 楷体 */ .section-title,.chapter-title,.chapter-number,.game-card-title,.char-name,.ach-title, .music-card-title,.song-title,.news-title,.timeline-item-title,.nav-brand-text, .step-title,.tl-era,.hero-title,h1,h2,h3,.log-list .ver{ font-family:var(--font-kai) !important; letter-spacing:.08em;} /* 正文族: 宋体 + 行高舒展 */ .step-desc,.tl-content p,.cult-desc,.news-desc,.char-desc,.ri-text,.song-detail, .easter-card-body p,.game-card-desc,.music-card-detail,.section-subtitle,.timeline-item p{ font-family:var(--font-song) !important; line-height:1.9 !important;} /* 数字/拉丁保持 sans (不强制) */ /* ---- 2. 章节大标题 → 戏台横匾 ---- */ .section-title,.chapter-title{ position:relative; padding:8px 22px !important; background: radial-gradient(circle at 12% 30%,rgba(255,255,255,.06),transparent 40%), linear-gradient(180deg,#1c0a08,#120606 70%,#0d0404); border-top:2px solid rgba(212,168,75,.55); border-bottom:2px solid rgba(212,168,75,.55); border-left:1px solid rgba(212,168,75,.2); border-right:1px solid rgba(212,168,75,.2); border-radius:4px; box-shadow: inset 0 1px 0 rgba(255,230,180,.1), inset 0 -1px 0 rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.35), 0 0 18px rgba(212,168,75,.08); text-shadow:0 1px 0 rgba(0,0,0,.6),0 0 12px rgba(212,168,75,.25);} /* 左右匾钉 */ .section-title::before,.chapter-title::before{content:'';position:absolute;top:50%;left:6px;transform:translateY(-50%); width:8px;height:8px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#f0d488,#8a5f1c 65%); box-shadow:0 1px 2px rgba(0,0,0,.6),inset 0 -1px 1px rgba(0,0,0,.4);} .section-title::after,.chapter-title::after{content:'';position:absolute;top:50%;right:6px;transform:translateY(-50%); width:8px;height:8px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#f0d488,#8a5f1c 65%); box-shadow:0 1px 2px rgba(0,0,0,.6),inset 0 -1px 1px rgba(0,0,0,.4);} /* 标题前缀朱印 "启" */ .section-title .section-title,.chapter-title{} /* 启动器/图谱标题含 svg 图标, 保持 flex; 印章用首子元素方案 */ .section-title>svg,.chapter-title>svg{flex-shrink:0;} body.light-mode .section-title,body.light-mode .chapter-title{ background: radial-gradient(circle at 12% 30%,rgba(255,255,255,.4),transparent 45%), linear-gradient(180deg,#f7ecd8,#efe0c0 70%,#e8d6b0); border-top:2px solid rgba(154,116,38,.5); border-bottom:2px solid rgba(154,116,38,.5); border-left:1px solid rgba(154,116,38,.2); border-right:1px solid rgba(154,116,38,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 10px rgba(120,80,40,.18); text-shadow:0 1px 0 rgba(255,255,255,.5);} /* ---- 3. 正文段落 → 信笺载体 (朱丝栏稿纸) ---- */ .step-desc,.tl-content p,.cult-desc,.char-desc,.ri-text,.easter-card-body p,.song-detail{ position:relative; background-image:repeating-linear-gradient(90deg,transparent 0 27px,rgba(176,37,37,.05) 27px 28px); border-left:2px solid rgba(176,37,37,.18); padding-left:12px !important;} /* 台词/引文 → 绢帛引文 (剧情对白/成就语) */ .step-desc[style*="italic"],blockquote,.ri-text em{ font-family:var(--font-kai); color:var(--color-gold-light,#e8c86a);} /* ---- 4. 攻略步骤 → 机关解谜签 ---- */ /* 步骤序号: 八卦数牌 (铜绿底+錾金环+楷体) */ .step-num{ background: repeating-conic-gradient(from 0deg,rgba(212,168,75,.22) 0deg 30deg,transparent 30deg 60deg), radial-gradient(circle at 38% 30%,#d8c088,#9a7a48 60%,#6e5228) !important; color:#2a1c08 !important; font-family:var(--font-kai) !important; font-weight:900; box-shadow:inset 0 1px 2px rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.4), 0 0 0 2px rgba(212,168,75,.45),0 2px 6px rgba(0,0,0,.4);} /* 步骤标题: 左侧小符纸角标 */ .step-title{position:relative;padding-left:16px !important;} .step-title::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%); width:10px;height:14px; background:linear-gradient(160deg,#e8c86a,#c8a04a); clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%); opacity:.8;} /* 步骤提示 → 更夫口吻: 🏮 前缀 + 楷体浅金 */ .step-hint{font-family:var(--font-kai);color:var(--color-gold-light,#e8c86a) !important;} .step-hint::before{content:'\1F3EE ';font-size:.9em;} /* 章节切换按钮 → 签筒竹签 (hover 升起) */ .cnb-btn{position:relative;} .cnb-btn:hover{transform:translateY(-3px) !important;} /* ---- 5. 强调 → 朱砂批注 ---- */ /* 关键词: 朱砂色 + 毛笔划痕下划线 */ .step-desc b,.step-desc strong,.tl-content p strong,.cult-desc b,.easter-card-body b, .char-desc b,.ri-text b{ color:var(--color-red,#c41e1e) !important; font-weight:700; text-decoration:underline; text-decoration-color:rgba(196,30,30,.45); text-decoration-thickness:2px; text-underline-offset:3px;} /* 高亮物品 (hl-item): 朱砂圈注 */ .hl-item{position:relative;color:var(--color-red,#c41e1e) !important; background:rgba(196,30,30,.08); padding:0 3px;border-radius:2px;} /* 成就/通关 → 盖印效果 */ .done-btn.on,.ach-item.done,.card-done-flag{ font-family:var(--font-kai) !important; border:2px solid rgba(176,37,37,.6) !important; border-radius:2px !important; transform:rotate(-1.5deg);} /* ---- 6. 列表载体 ---- */ /* 人物列表 → 牌位墙 (名字描金名框) */ .char-name{position:relative;display:inline-block; border:1px solid rgba(212,168,75,.35);border-radius:3px; padding:2px 10px; background:linear-gradient(180deg,rgba(212,168,75,.08),transparent);} /* 线索/物品 → 木签挂牌 (左侧小木牌+麻绳) */ .step-actions .sa-row,ul li{position:relative;} /* 版本日志 → 节点红烛 (暗色主题点亮) */ .log-list li::after{content:'';position:absolute;left:-18px;top:50%;transform:translateY(-50%); width:8px;height:16px;border-radius:3px 3px 1px 1px; background:linear-gradient(180deg,#d45757,#8a1a1a); box-shadow:0 0 6px rgba(255,140,60,.4);} body.light-mode .log-list li::after{background:linear-gradient(180deg,#d4b078,#a88850);box-shadow:none;} /* ---- 7. 数据徽章 → 铜钱与算珠 ---- */ /* 数字徽章: 外圆内方 */ .hero-stat-num,.game-card-num,.steps-badge,.stat-num{ font-family:var(--font-kai) !important; letter-spacing:.05em;} /* 进度百分比环: 外圈卦象点 (八个方位) */ .progress-wrap{position:relative;} /* 空状态 → 铜镜无照 */ .empty{font-family:var(--font-kai);letter-spacing:.15em;color:var(--color-muted,#8b7355);} .empty::before{content:'\29BF';display:block;font-size:2.2rem;color:rgba(212,168,75,.4); margin-bottom:12px;text-shadow:0 0 18px rgba(212,168,75,.25);} /* ---- 浅色: 朱丝栏减淡, 匾额转黄纸, 笔痕转砖红 ---- */ body.light-mode .step-desc,body.light-mode .tl-content p,body.light-mode .cult-desc, body.light-mode .char-desc,body.light-mode .ri-text,body.light-mode .easter-card-body p{ background-image:repeating-linear-gradient(90deg,transparent 0 27px,rgba(176,37,37,.07) 27px 28px); border-left:2px solid rgba(176,37,37,.12);} body.light-mode .step-desc b,body.light-mode .step-desc strong, body.light-mode .tl-content p strong,body.light-mode .cult-desc b{ color:#b02525 !important;} body.light-mode .step-title::before{background:linear-gradient(160deg,#e0c488,#c8a860);} body.light-mode .step-num{box-shadow:inset 0 1px 2px rgba(255,255,255,.5),inset 0 -2px 4px rgba(0,0,0,.25), 0 0 0 2px rgba(154,116,38,.4);} /* ---- 氛围开关: 文字载体属排版保留, 仅隐藏氛围动画类 ---- */ body.no-ambient .log-list li::after{display:none;} /* ---- prefers-reduced-motion: 关闭新增动画 ---- */ @media (prefers-reduced-motion:reduce){ .section-title::after,.chapter-title::after{animation:none !important;} } /* ============================================================ v7 剩余器物: 秤(权衡) / 葫芦 / 绣花鞋 / 空状态铜镜插图 ============================================================ */ /* ---- 秤: 搜索/筛选区顶部小秤砣 (权衡选择) ---- */ .filters::before,.search-filters::before{content:'';display:inline-block;width:14px;height:14px; margin-right:6px;vertical-align:-2px; background: radial-gradient(circle at 35% 30%,#e8d0a0,#9a7a48 60%,#6e5228); border-radius:50%; box-shadow:inset 0 1px 2px rgba(255,255,255,.4),inset 0 -2px 3px rgba(0,0,0,.35); position:relative;} .filters::before::after{display:none;} /* ---- 葫芦: 音乐页曲目分隔符 ---- */ .audio-row{border-left:2px solid rgba(212,168,75,.15);padding-left:10px;position:relative;} .audio-row::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%) rotate(45deg); width:8px;height:11px;border-radius:50% 50% 45% 45%; background: radial-gradient(circle at 35% 30%,#c8a860,#8a6a3a 65%); box-shadow:inset 0 1px 1px rgba(255,255,255,.3);} /* ---- 绣花鞋: 攻略页 hero 区角标 (鞋印纹) ---- */ .game-hero .stats{position:relative;} .game-hero .stats::after{content:'';position:absolute;right:14px;bottom:-6px;width:26px;height:14px;opacity:.25; background:radial-gradient(ellipse at 50% 100%,#b02525 0 30%,transparent 31%) left/40% 100% no-repeat, radial-gradient(ellipse at 80% 100%,#b02525 0 32%,transparent 33%) right/40% 100% no-repeat; filter:blur(.5px);} /* ---- 空状态: 铜镜无照 (SVG 插图) ---- */ .empty{padding:56px 0 !important;} .empty::before{content:'';width:56px;height:56px;margin:0 auto 14px;display:block; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Ccircle cx='28' cy='28' r='25' fill='none' stroke='%23d4a84b' stroke-width='2.4' opacity='.55'/%3E%3Ccircle cx='28' cy='28' r='18' fill='none' stroke='%23c41e1e' stroke-width='1.2' opacity='.35'/%3E%3Cpath d='M28 4v8M28 44v8M4 28h8M44 28h8' stroke='%23d4a84b' stroke-width='1.4' opacity='.4'/%3E%3C/svg%3E"); background-size:contain;background-repeat:no-repeat;background-position:center; filter:drop-shadow(0 4px 10px rgba(212,168,75,.25));} .empty::after{content:'\25CF';display:block;font-size:.6rem;color:rgba(212,168,75,.35);margin-top:10px;letter-spacing:.4em;} .music-panel .empty{padding:18px 0 !important;font-size:.74rem;letter-spacing:.08em;} .music-panel .empty::before{width:30px;height:30px;margin-bottom:6px;} .music-panel .empty::after{display:none;} /* ============================================================ v9 收束: 步骤卡保留克制木牌质感；文字、匾额、卦牌与朱砂体系 继续沿用上方「字里奘铃」，避免重新退化为裸矩形文本。 ============================================================ */ .step-card{ background: radial-gradient(circle at 12% 8%,rgba(255,255,255,.05),transparent 40%), repeating-linear-gradient(92deg,rgba(0,0,0,.06) 0 1px,transparent 1px 4px), linear-gradient(160deg,var(--color-surface,#1a0a0a),var(--color-surface-alt,#241010) 55%,var(--color-surface,#1a0a0a)) !important; border:1px solid rgba(180,130,60,.28) !important; color:var(--color-ink) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -2px 6px rgba(0,0,0,.25),0 3px 14px rgba(0,0,0,.22) !important;} .step-card::after{display:none;} body.light-mode .step-card{ background: radial-gradient(circle at 12% 8%,rgba(255,255,255,.35),transparent 40%), repeating-linear-gradient(92deg,rgba(120,80,40,.05) 0 1px,transparent 1px 4px), linear-gradient(160deg,#fffdf7,#faf3e5 55%,#f5ead8) !important; color:#3d2b1a !important;} /* 剧情脉络引文 → 旧绢题签；纹理透明度保持在 .08 以下 */ .quote{ position:relative;font-family:var(--font-kai) !important;line-height:1.9; background: repeating-linear-gradient(0deg,transparent 0 5px,rgba(212,168,75,.035) 5px 6px), linear-gradient(90deg,rgba(196,30,30,.045),transparent 18%,transparent 82%,rgba(196,30,30,.045)); border-left:2px solid rgba(196,30,30,.28);border-right:2px solid rgba(196,30,30,.28); box-shadow:inset 0 1px rgba(255,255,255,.05),inset 0 -1px rgba(0,0,0,.22);} body.light-mode .quote{ background: repeating-linear-gradient(0deg,transparent 0 5px,rgba(154,116,38,.04) 5px 6px), linear-gradient(90deg,rgba(176,37,37,.035),transparent 18%,transparent 82%,rgba(176,37,37,.035)); border-color:rgba(176,37,37,.22);} /* ============================================================ v10 玄漆朱金 · 全站色阶收束与器物精修 目标：玄漆作底、旧金提骨、朱砂只作印记；避免大面积纯红。 ============================================================ */ :root{ --color-bg:#080303;--color-canvas:#080303;--bg:#080303; --color-surface:#120807;--surface:#120807; --color-surface-alt:#1b0d0b;--color-card:#180b0a;--card:#180b0a; --color-card-hover:#21100e;--card-hover:#21100e; --color-ink:#e1d2c0;--ink:#e1d2c0; --color-muted:#aa9278;--muted:#aa9278; --color-ink-dim:#806a54;--color-dim:#806a54;--dim:#806a54; --color-red:#b52b27;--red:#b52b27;--color-red-dim:#7f1b19;--red-dim:#7f1b19; --color-gold:#d4a84b;--gold:#d4a84b;--color-gold-dim:#927039;--gold-dim:#927039; --color-gold-light:#e3c36d;--color-border:#30201a;--border:#30201a; --color-border-light:#493027;--border-light:#493027;--color-nav-hover:#281411; --green:#8b7a4c;--blue:#8a7060;--purple:#765550;--orange:#9a6739; --font-kai:"STKaiti","KaiTi","FangSong","Noto Serif SC",serif; --font-song:"STSong","SimSun","Songti SC","Noto Serif SC",serif; --font-display:var(--font-kai);--font-body:var(--font-song); } body{ background-color:var(--color-canvas) !important; background-image: radial-gradient(ellipse at 50% -18%,rgba(181,43,39,.075),transparent 48%), repeating-linear-gradient(96deg,rgba(212,168,75,.012) 0 1px,transparent 1px 7px) !important; color:var(--color-ink) !important;font-family:var(--font-song);} body.light-mode{ --color-bg:#eee3cf;--color-canvas:#eee3cf;--bg:#eee3cf; --color-surface:#f6eddd;--surface:#f6eddd; --color-surface-alt:#eadbc3;--color-card:#f2e6d2;--card:#f2e6d2; --color-card-hover:#eadbc3;--card-hover:#eadbc3; --color-ink:#3b291d;--ink:#3b291d;--color-muted:#705c47;--muted:#705c47; --color-ink-dim:#8a745c;--color-dim:#8a745c;--dim:#8a745c; --color-red:#a52b27;--red:#a52b27;--color-red-dim:#7e211f; --color-gold:#8e6829;--gold:#8e6829;--color-gold-light:#a57d36; --color-border:#cdbb9e;--border:#cdbb9e;--color-border-light:#bda888;--border-light:#bda888; --color-nav-hover:#e4d4ba; background-image: radial-gradient(ellipse at 50% -18%,rgba(165,43,39,.045),transparent 48%), repeating-linear-gradient(96deg,rgba(90,60,30,.025) 0 1px,transparent 1px 7px) !important;} /* 开篇不再用整屏高饱和红盖头；只留一笔掠过顶部的朱金绸边。 */ .ux-veil{ inset:0 0 auto !important;height:5px !important;min-height:0 !important; background:linear-gradient(90deg,transparent,rgba(181,43,39,.9) 18%,rgba(212,168,75,.8) 50%,rgba(181,43,39,.9) 82%,transparent) !important; box-shadow:0 2px 12px rgba(181,43,39,.14);animation:veilTrace .52s ease-out .04s forwards !important;} .ux-veil::after{display:none !important;} @keyframes veilTrace{0%{opacity:0;transform:scaleX(.15)}55%{opacity:.8;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}} /* 灯笼锚在真实导航栏下沿，永远低于导航层；宽屏才出现。 */ .ambient-lantern{ top:calc(var(--zjy-header-bottom,60px) + 2px) !important; width:82px;height:162px;z-index:80 !important; filter:drop-shadow(0 8px 12px rgba(0,0,0,.48));} body[data-zone="root"] .ambient-lantern, body[data-zone="home"] .ambient-lantern{top:calc(var(--zjy-header-bottom,60px) + 2px) !important;} .ambient-lantern .lantern-pole{top:-8px;width:3px;height:29px;border-radius:2px; background:linear-gradient(90deg,#3a2414,#8a5f1c 48%,#2a180d);box-shadow:1px 0 rgba(212,168,75,.18);} .ambient-lantern .lantern-pole::before{content:'';position:absolute;left:50%;top:-4px;width:34px;height:8px;transform:translateX(-50%); border-top:2px solid #8a5f1c;border-radius:50%;box-shadow:inset 0 1px rgba(212,168,75,.25);} .ambient-lantern .lantern-cap{top:18px;width:46px;height:11px;border:1px solid rgba(55,28,10,.8); background:linear-gradient(180deg,#e3c36d 0,#a87828 42%,#5d3a12 100%);box-shadow:inset 0 1px rgba(255,235,180,.5),0 2px 3px rgba(0,0,0,.45);} .ambient-lantern .lantern-cap::before{content:'';position:absolute;left:50%;top:-5px;width:17px;height:7px;transform:translateX(-50%); border-radius:5px 5px 1px 1px;background:linear-gradient(180deg,#b98b37,#654216);border:1px solid rgba(50,25,8,.65);} .ambient-lantern .lantern-cap::after{content:'';position:absolute;left:-7px;right:-7px;bottom:-3px;height:3px; background:linear-gradient(90deg,transparent,#d4a84b 12%,#6d4615 18% 82%,#d4a84b 88%,transparent);} .ambient-lantern .lantern-body{top:29px;width:58px;height:72px;border-radius:48%/18% 18% 36% 36%;border:1px solid rgba(229,178,91,.38); background: radial-gradient(circle at 37% 28%,rgba(255,210,155,.28),transparent 34%), repeating-linear-gradient(90deg,rgba(82,13,12,.36) 0 2px,transparent 2px 9px), repeating-linear-gradient(0deg,transparent 0 10px,rgba(212,168,75,.075) 10px 11px), linear-gradient(90deg,#681514,#b52b27 20%,#c84a3d 48%,#9a211f 78%,#571111) !important; box-shadow:inset 7px 0 10px rgba(0,0,0,.24),inset -7px 0 10px rgba(0,0,0,.28),inset 0 2px rgba(255,210,155,.16),0 0 18px rgba(181,43,39,.24);} .ambient-lantern .lantern-body::before{top:4px;bottom:4px;width:100%;height:auto;left:0;transform:none;background: linear-gradient(90deg,transparent 16%,rgba(212,168,75,.24) 17% 18%,transparent 19% 48%,rgba(212,168,75,.25) 49% 51%,transparent 52% 81%,rgba(212,168,75,.24) 82% 83%,transparent 84%);} .ambient-lantern .lantern-body::after{content:'';position:absolute;inset:11px 8px;opacity:.32; background: radial-gradient(circle at 20% 50%,transparent 0 4px,rgba(212,168,75,.42) 4px 5px,transparent 6px), radial-gradient(circle at 80% 50%,transparent 0 4px,rgba(212,168,75,.42) 4px 5px,transparent 6px); border-top:1px solid rgba(212,168,75,.28);border-bottom:1px solid rgba(212,168,75,.28);} .ambient-lantern .lantern-xi{font-family:var(--font-kai);font-size:25px;color:#ead08a;text-shadow:0 1px #5d1512,0 0 8px rgba(234,208,138,.35);} .ambient-lantern .lantern-base{top:101px;width:42px;height:10px;border:1px solid rgba(48,24,8,.7); background:linear-gradient(180deg,#b98b37,#7b5019 58%,#3f270d);box-shadow:inset 0 1px rgba(255,225,150,.3),0 2px 3px rgba(0,0,0,.4);} .ambient-lantern .lantern-base::before{content:'';position:absolute;left:50%;top:7px;width:14px;height:14px;transform:translateX(-50%) rotate(45deg); background:linear-gradient(135deg,#b52b27,#701715);border:1px solid #b98b37;box-shadow:0 2px 4px rgba(0,0,0,.4);} .ambient-lantern .lantern-tassel{top:115px;width:18px;height:39px; background:repeating-linear-gradient(90deg,#7f1b19 0 2px,#c13b34 2px 3px,transparent 3px 5px) !important; border-radius:0 0 8px 8px;opacity:.95;transform:translateX(-50%);} .ambient-lantern .lantern-tassel::before{content:'';position:absolute;left:50%;top:-5px;width:20px;height:9px;transform:translateX(-50%); border-radius:50%;background:linear-gradient(180deg,#d4a84b,#795019);border:1px solid rgba(50,25,8,.7);} .ambient-lantern .lantern-tassel::after{bottom:-5px;left:50%;width:9px;height:9px;transform:translateX(-50%) rotate(45deg); border-radius:1px;background:#9b2421;box-shadow:0 0 0 1px #8b6729,0 2px 5px rgba(0,0,0,.45);} .ambient-lantern .lantern-light{top:24px;width:130px;height:126px;opacity:.55; background:radial-gradient(circle,rgba(181,43,39,.17),transparent 67%);} body.light-mode .ambient-lantern{filter:drop-shadow(0 6px 9px rgba(70,40,20,.22));} body.light-mode .ambient-lantern .lantern-body{background: radial-gradient(circle at 37% 28%,rgba(255,235,195,.32),transparent 34%), repeating-linear-gradient(90deg,rgba(100,25,20,.2) 0 2px,transparent 2px 9px), repeating-linear-gradient(0deg,transparent 0 10px,rgba(142,104,41,.07) 10px 11px), linear-gradient(90deg,#8d322d,#b9554a 25%,#ca7663 50%,#a6433b 78%,#782722) !important;} /* 导航像玄漆横梁，正文色阶不再与栏体抢亮度。 */ .top-nav,.navbar,.top-bar{ background: repeating-linear-gradient(90deg,rgba(212,168,75,.025) 0 1px,transparent 1px 8px), linear-gradient(180deg,rgba(20,8,7,.98),rgba(10,4,4,.98)) !important; border-bottom-color:rgba(212,168,75,.26) !important; box-shadow:inset 0 -1px rgba(181,43,39,.22),0 5px 18px rgba(0,0,0,.26) !important;} body.light-mode .top-nav,body.light-mode .navbar,body.light-mode .top-bar{ background: repeating-linear-gradient(90deg,rgba(90,60,30,.025) 0 1px,transparent 1px 8px), linear-gradient(180deg,#f6eddd,#e9dbc4) !important; border-bottom-color:rgba(142,104,41,.32) !important;box-shadow:0 4px 14px rgba(80,50,25,.1) !important;} /* 标题以旧金为主、朱砂作落款，避免橙红大字与暗红背景互相吞没。 */ h1,h2,h3,.hero h1,.game-hero h2,.page-title,.section-title{font-family:var(--font-kai) !important;} .hero h1,.game-hero h2,.page-title{color:var(--color-gold) !important;text-shadow:0 2px 10px rgba(0,0,0,.4),0 0 18px rgba(212,168,75,.08) !important;} .hero h1,.game-hero h2,.page-title{ background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important; -webkit-text-fill-color:currentColor !important;} body.light-mode .hero h1,body.light-mode .game-hero h2,body.light-mode .page-title{text-shadow:0 1px rgba(255,255,255,.6) !important;} p,.step-desc,.char-desc,.news-desc,.song-detail,.result-item,.quote{font-family:var(--font-song);} /* 游戏门楣：描金、云雷纹、铜钉，保留每部作品自身内容。 */ .game-hero,.hero-inner,.hero-content{ border-color:rgba(212,168,75,.34) !important; box-shadow:inset 0 0 0 1px rgba(181,43,39,.12),inset 0 1px rgba(255,255,255,.035),0 8px 28px rgba(0,0,0,.24);} .game-hero{position:relative;overflow:hidden;background-image: linear-gradient(135deg,rgba(212,168,75,.035) 12.5%,transparent 12.5% 50%,rgba(212,168,75,.035) 50% 62.5%,transparent 62.5%), radial-gradient(ellipse at 50% 0,rgba(181,43,39,.09),transparent 62%) !important;background-size:16px 16px,100% 100% !important;} .game-hero::after{content:'◆';position:absolute;left:50%;bottom:5px;transform:translateX(-50%);font-size:8px;color:rgba(212,168,75,.5); text-shadow:-18px 0 rgba(181,43,39,.35),18px 0 rgba(181,43,39,.35);pointer-events:none;} body.light-mode .game-hero{background-image: linear-gradient(135deg,rgba(142,104,41,.035) 12.5%,transparent 12.5% 50%,rgba(142,104,41,.035) 50% 62.5%,transparent 62.5%), radial-gradient(ellipse at 50% 0,rgba(165,43,39,.045),transparent 62%) !important;} /* 章节签、按钮与印章：加竹节、穿绳、压边和触感。 */ .chapter-nav-btn,.cnb-btn,.filter-btn,.tag-btn,.back-to-universe{ position:relative;border-color:rgba(212,168,75,.28) !important;border-radius:3px !important; background: linear-gradient(90deg,rgba(212,168,75,.055),transparent 16%,transparent 84%,rgba(212,168,75,.055)), linear-gradient(180deg,var(--color-surface),var(--color-surface-alt)) !important; box-shadow:inset 0 1px rgba(255,255,255,.045),inset 0 -2px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.2);} .chapter-nav-btn::before,.cnb-btn::before{content:'';position:absolute;left:5px;right:5px;top:3px;height:1px; background:repeating-linear-gradient(90deg,rgba(212,168,75,.32) 0 5px,transparent 5px 9px);opacity:.7;} .chapter-nav-btn.active,.cnb-btn.active{color:#eddaa4 !important;background: repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px), linear-gradient(180deg,#8f211e,#641514) !important;border-color:rgba(212,168,75,.55) !important; box-shadow:inset 0 0 0 1px rgba(212,168,75,.16),0 4px 10px rgba(0,0,0,.28);} .done-btn,.fav-btn,.rt-btn,.backtop,.th-btn{ border-radius:3px !important;border-color:rgba(212,168,75,.38) !important; box-shadow:inset 0 0 0 1px rgba(181,43,39,.12),inset 0 1px rgba(255,255,255,.06),0 3px 8px rgba(0,0,0,.24) !important;} .done-btn.on{outline:1px solid rgba(212,168,75,.26);outline-offset:-4px;} /* 卡片统一增加錾金内框与极淡回纹；不同载体原有木、纸、竹、绢材质继续保留。 */ .game-card,.char-card,.music-card,.news-card,.easter-card,.result-item,.tl-item,.cult-card,.ref-card,.song-card,.world-card,.step-card,.link-item,.card,.story-card{ border-color:rgba(212,168,75,.3) !important; box-shadow:inset 0 0 0 1px rgba(212,168,75,.055),inset 0 1px rgba(255,255,255,.045),inset 0 -3px 7px rgba(0,0,0,.18),0 5px 16px rgba(0,0,0,.24) !important;} .game-card::after,.news-card::after,.step-card::after,.easter-card::after,.song-card::after,.music-card::after{ width:34px;height:34px;opacity:.42;filter:drop-shadow(0 1px rgba(0,0,0,.25));} .step-card{border-left:3px solid rgba(181,43,39,.58) !important;} .step-card::after{display:block !important;background-image: linear-gradient(135deg,transparent 48%,rgba(212,168,75,.35) 49% 51%,transparent 52%), radial-gradient(circle at 80% 20%,rgba(181,43,39,.34) 0 2px,transparent 3px) !important;} .step-num{border:1px solid rgba(212,168,75,.58) !important;box-shadow:inset 0 0 0 2px rgba(0,0,0,.22),0 0 0 1px rgba(181,43,39,.28),0 3px 8px rgba(0,0,0,.3) !important;} /* 纸人与器物增加纸纤维、衣缘压花；只作用于两侧氛围区。 */ .ambient-paper .paper-inner{filter:drop-shadow(0 10px 11px rgba(0,0,0,.36));} .ambient-paper .paper-inner::before{content:'';position:absolute;inset:5% 8%;z-index:2;pointer-events:none;opacity:.055;mix-blend-mode:screen; background:repeating-linear-gradient(112deg,#fff 0 1px,transparent 1px 6px);mask-image:linear-gradient(#000,transparent 92%);} .ambient-paper .paper-inner::after{content:'';position:absolute;left:22%;right:22%;bottom:5%;height:8px;pointer-events:none;opacity:.45; background:repeating-linear-gradient(90deg,#d4a84b 0 2px,transparent 2px 6px);clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);} body.light-mode .ambient-paper .paper-inner{filter:drop-shadow(0 7px 8px rgba(70,45,25,.2));} body[data-zone="home"] .ambient-paper.paper-bride{top:25vh !important;} body[data-zone="home"] .ambient-paper.paper-white{top:29vh !important;} /* 浅色载体统一压低纯白和高饱和，形成黄纸朱砂印刷感。 */ body.light-mode .game-card,body.light-mode .char-card,body.light-mode .result-item, body.light-mode .world-card,body.light-mode .story-card,body.light-mode .ref-card,body.light-mode .link-item{ background: radial-gradient(circle at 12% 8%,rgba(255,255,255,.28),transparent 38%), repeating-linear-gradient(92deg,rgba(90,60,30,.035) 0 1px,transparent 1px 5px), linear-gradient(160deg,#f4ead8,#eaddc7 58%,#dfceb2) !important; color:var(--color-ink) !important;box-shadow:inset 0 1px rgba(255,255,255,.5),inset 0 -2px 6px rgba(80,50,25,.1),0 4px 13px rgba(70,45,25,.12) !important;} /* 告示贴使用深褐墨，不继承暗色主题的浅字，保证黄纸上的正文对比。 */ .news-card .news-title,.news-card h3{color:#4b2d1d !important;text-shadow:none !important;} .news-card .news-desc,.news-card p{color:#68503a !important;} .news-card .news-card-top,.news-card .news-meta{color:#765a3d !important;} @media (max-width:1400px){.ambient-lantern{display:none !important;}} @media (prefers-reduced-motion:reduce){.ux-veil{display:none !important;}.ambient-lantern .lan-inner{animation:none !important;}} /* ============================================================ v11 因果长卷 · 剧情脉络页 左轴给出可读时间，右侧事件卡同时呈现阶段与节点作用。 ============================================================ */ .narrative-acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:8px;counter-reset:act;} .narrative-act{position:relative;min-height:170px;padding:22px 18px 18px 54px;overflow:hidden; background: linear-gradient(90deg,rgba(181,43,39,.08),transparent 24%), repeating-linear-gradient(0deg,rgba(212,168,75,.035) 0 1px,transparent 1px 5px), linear-gradient(155deg,var(--color-surface),var(--color-surface-alt)); border:1px solid rgba(212,168,75,.3);border-radius:3px; box-shadow:inset 0 0 0 1px rgba(212,168,75,.045),inset 0 -3px 8px rgba(0,0,0,.2),0 5px 16px rgba(0,0,0,.2);} .narrative-act::before{content:'';position:absolute;left:38px;top:14px;bottom:14px;width:1px; background:linear-gradient(transparent,rgba(181,43,39,.55) 12% 88%,transparent);} .narrative-act::after{content:'◆';position:absolute;right:9px;bottom:6px;color:rgba(212,168,75,.34);font-size:8px; text-shadow:-10px 0 rgba(181,43,39,.24);} .narrative-act .act-no{position:absolute;left:11px;top:18px;font-family:var(--font-kai);font-size:1rem;color:var(--color-gold); writing-mode:vertical-rl;letter-spacing:.12em;} .narrative-act h3{font-size:1rem;color:var(--color-gold);margin:0 0 10px;letter-spacing:.08em;} .narrative-act p{font-size:.82rem;color:var(--color-muted);line-height:1.8;margin:0;} .tl-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:4px 0 12px;} .tl-overview-card{position:relative;padding:14px 15px;min-height:116px;border:1px solid rgba(212,168,75,.25);border-top:2px solid rgba(181,43,39,.6); background: radial-gradient(circle at 92% 10%,rgba(212,168,75,.07),transparent 30%), repeating-linear-gradient(92deg,rgba(255,255,255,.018) 0 1px,transparent 1px 6px), linear-gradient(165deg,var(--color-surface),var(--color-surface-alt)); box-shadow:inset 0 1px rgba(255,255,255,.04),0 3px 10px rgba(0,0,0,.18);} .tl-overview-card::after{content:'';position:absolute;right:7px;top:7px;width:11px;height:11px;border-top:1px solid rgba(212,168,75,.38);border-right:1px solid rgba(212,168,75,.38);} .tl-overview-card b{display:block;font-family:var(--font-kai);font-size:.76rem;color:var(--color-gold);letter-spacing:.12em;margin-bottom:7px;} .tl-overview-card span{display:block;font-size:.76rem;color:var(--color-muted);line-height:1.7;} .tl-time-note{margin:8px 0 20px;padding:8px 13px 8px 38px !important;position:relative;border-left:2px solid rgba(181,43,39,.5); background:linear-gradient(90deg,rgba(181,43,39,.07),transparent 70%);color:var(--color-ink-dim) !important;font-size:.72rem !important;line-height:1.6;} .tl-time-note::before{content:'刻';position:absolute;left:10px;top:7px;width:18px;height:18px;line-height:18px;text-align:center; font-family:var(--font-kai);color:#ead9c0;background:#8b211f;border:1px solid rgba(212,168,75,.42);font-size:.65rem;} .tl-container-v2{position:relative;padding-left:0 !important;margin-top:8px;} .tl-container-v2::before{left:146px !important;top:19px !important;bottom:24px !important;width:3px !important; background: repeating-linear-gradient(180deg,rgba(212,168,75,.88) 0 7px,rgba(181,43,39,.78) 7px 16px) !important; box-shadow:0 0 0 1px rgba(0,0,0,.38),0 0 10px rgba(181,43,39,.18);} .tl-row{display:grid;grid-template-columns:126px minmax(0,1fr);gap:40px;position:relative;align-items:start;margin-bottom:14px;} .tl-time{position:relative;padding-top:13px;text-align:right;font-family:var(--font-kai);} .tl-time b{display:inline-flex;align-items:center;justify-content:center;width:32px;height:25px;margin-bottom:6px; color:#ead9bd;font-size:.72rem;letter-spacing:.05em;background:linear-gradient(180deg,#91231f,#621513); border:1px solid rgba(212,168,75,.52);box-shadow:inset 0 0 0 2px rgba(0,0,0,.2),0 3px 7px rgba(0,0,0,.28);} .tl-time span{display:block;color:var(--color-gold);font-size:.72rem;line-height:1.45;letter-spacing:.04em;} .tl-row .tl-item{margin:0 !important;padding:17px 19px 14px !important;border-radius:3px !important;min-height:112px; background: radial-gradient(circle at 96% 10%,rgba(212,168,75,.075),transparent 28%), repeating-linear-gradient(0deg,rgba(212,168,75,.025) 0 1px,transparent 1px 5px), linear-gradient(158deg,var(--color-surface),var(--color-surface-alt)) !important; border:1px solid rgba(212,168,75,.3) !important;border-left:3px solid rgba(181,43,39,.68) !important; box-shadow:inset 0 0 0 1px rgba(212,168,75,.04),inset 0 -3px 8px rgba(0,0,0,.18),0 5px 15px rgba(0,0,0,.2) !important;} .tl-row .tl-item::after{content:'';display:block !important;position:absolute;right:5px;bottom:5px;width:18px;height:18px;opacity:.4; background:linear-gradient(135deg,transparent 47%,rgba(212,168,75,.5) 48% 52%,transparent 53%),radial-gradient(circle at 75% 75%,rgba(181,43,39,.52) 0 2px,transparent 3px);} .tl-row .tl-dot{left:-28px !important;top:19px !important;width:17px !important;height:17px !important;background:#b52b27 !important; border:3px solid var(--color-canvas) !important;box-shadow:0 0 0 2px rgba(212,168,75,.62),0 0 10px rgba(181,43,39,.28);} .tl-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;padding-bottom:7px;border-bottom:1px dashed rgba(212,168,75,.18);} .tl-row .tl-era{margin:0;font-family:var(--font-kai);font-size:.82rem;color:var(--color-gold);letter-spacing:.08em;} .tl-tags{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;} .tl-tags span{padding:2px 8px;border:1px solid rgba(181,43,39,.36);border-radius:12px;background:rgba(181,43,39,.08); color:var(--color-muted);font-size:.62rem;letter-spacing:.06em;} .tl-row .tl-text{font-size:.86rem;color:var(--color-ink);line-height:1.82;} .tl-node-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;padding-top:8px;border-top:1px solid rgba(212,168,75,.1); color:var(--color-ink-dim);font-size:.63rem;letter-spacing:.06em;} .series-ledger-head{display:flex;align-items:end;justify-content:space-between;margin:28px 0 10px;padding:0 2px 8px;border-bottom:1px solid rgba(212,168,75,.25);} .series-ledger-head span{font-family:var(--font-kai);color:var(--color-gold);font-size:1rem;letter-spacing:.12em;} .series-ledger-head small{color:var(--color-ink-dim);font-size:.64rem;letter-spacing:.1em;} .series-ledger{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;} .series-ledger-card{position:relative;min-height:135px;padding:16px 15px 14px;border:1px solid rgba(212,168,75,.27); background: linear-gradient(90deg,rgba(181,43,39,.06),transparent 22%), repeating-linear-gradient(90deg,rgba(212,168,75,.025) 0 1px,transparent 1px 5px), linear-gradient(170deg,var(--color-surface),var(--color-surface-alt)); box-shadow:inset 0 1px rgba(255,255,255,.035),0 3px 11px rgba(0,0,0,.18);} .series-ledger-card::before{content:'';position:absolute;left:7px;top:7px;bottom:7px;width:2px;background:linear-gradient(var(--color-red),var(--color-gold));opacity:.52;} .series-ledger-card b{display:block;margin-left:7px;margin-bottom:8px;font-family:var(--font-kai);font-size:.77rem;color:var(--color-gold);letter-spacing:.1em;} .series-ledger-card p{margin:0 0 0 7px;color:var(--color-muted);font-size:.74rem;line-height:1.72;} html:has(#story-timeline:target),html:has(#narrative-structure:target){scroll-behavior:auto !important;scroll-padding-top:76px;} body.light-mode .narrative-act,body.light-mode .tl-overview-card,body.light-mode .tl-row .tl-item,body.light-mode .series-ledger-card{ background: radial-gradient(circle at 94% 9%,rgba(142,104,41,.06),transparent 28%), repeating-linear-gradient(0deg,rgba(90,60,30,.028) 0 1px,transparent 1px 5px), linear-gradient(160deg,#f5ead7,#eadbc3) !important; border-color:rgba(142,104,41,.32) !important;box-shadow:inset 0 1px rgba(255,255,255,.52),0 4px 12px rgba(70,45,25,.1) !important;} body.light-mode .tl-row .tl-text{color:var(--color-ink);} body.light-mode .tl-row .tl-dot{border-color:var(--color-canvas) !important;} body.light-mode .tl-time b{color:#f5ead7;background:linear-gradient(180deg,#a52b27,#7e211f);} @media(max-width:980px){.narrative-acts,.tl-overview,.series-ledger{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:700px){ .narrative-acts,.tl-overview,.series-ledger{grid-template-columns:1fr;} .narrative-act{min-height:0;} .tl-container-v2::before{left:10px !important;top:15px !important;} .tl-row{display:block;padding-left:32px;margin-bottom:18px;} .tl-time{text-align:left;padding:0 0 8px;display:flex;align-items:center;gap:9px;} .tl-time b{margin:0;flex:0 0 auto;}.tl-time span{display:inline;} .tl-row .tl-dot{left:-31px !important;top:17px !important;} .tl-card-head{align-items:flex-start;}.tl-tags{justify-content:flex-start;} } /* ============================================================ 对比度修复补丁: 浅色模式下文字与背景配色导致文字看不清 (红/金底按钮白字, 唱本卡浅色纸面, 音乐面板弱文字加深等) ============================================================ */ /* 1. 红底按钮: 浅色模式下 --color-red 变为深红, 文字必须改米白 (仅限背景为红/金的元素) */ body.light-mode a.back, body.light-mode .back, body.light-mode .cta-btn, body.light-mode [style*="background:var(--color-red)"], body.light-mode [style*="background: var(--color-red)"], body.light-mode [style*="background:var(--red)"], body.light-mode [style*="background: var(--red)"], body.light-mode [style*="background:var(--color-gold-dim)"], body.light-mode [style*="background: var(--color-gold-dim)"], body.light-mode [style*="background:var(--gold-dim)"], body.light-mode [style*="background: var(--gold-dim)"]{color:#fff8ec !important;} body.light-mode a.back:hover, body.light-mode .back:hover{color:#fff8ec !important;opacity:.92;} body.light-mode .cta-btn:hover{color:#fff8ec !important;} /* 3. 唱本卡(.song-card)浅色模式改为浅色纸面, 内部文字用深色 */ body.light-mode .song-card{ background:radial-gradient(circle at 12% 8%,rgba(255,255,255,.35),transparent 40%), repeating-linear-gradient(92deg,rgba(120,80,40,.04) 0 1px,transparent 1px 4px), linear-gradient(160deg,#fffdf7,#faf3e5 55%,#f5ead8) !important; color:#4a3820 !important;border-color:rgba(154,116,38,.35) !important; } body.light-mode .song-card .song-card-game{color:#6b5940 !important;} body.light-mode .song-card .no-song{color:#6b5940 !important;} body.light-mode .song-card .song-card-title{color:#7d5f20 !important;} body.light-mode .song-card .star-rating{color:#9a7426 !important;} body.light-mode .song-card .team-role{color:#a52b27 !important;} body.light-mode .song-card .song-tags span{color:#6b5940 !important;border-color:rgba(154,116,38,.35) !important;} body.light-mode .song-card .song-desc{color:#5a4630 !important;} body.light-mode .song-card audio,body.light-mode .song-card .audio-row{filter:none;} /* 深色模式: 唱本卡弱文字提亮 */ .song-card .song-card-game{color:#9a8a7a !important;} .song-card .no-song{color:#aa9278 !important;} /* 4. 关于页版本徽章: 浅色模式 #e8c86a 太浅, 换深金 */ body.light-mode .log-list li .ver{color:#6b4f15 !important;text-shadow:none;} /* 4b. 关于页公告/链接卡在浅色模式下文字用深色(默认浅木底) */ body.light-mode .log-list li{color:#4a3820 !important;} body.light-mode .log-list li .date{color:#6b5940 !important;} body.light-mode .link-item{color:#4a3420 !important;} body.light-mode .link-item .nm{color:#3d2b1a !important;} body.light-mode .link-item .dm{color:#6b5940 !important;} /* 4c. 链接卡图标(古钱样式, 深色铜钱底)两种模式下用浅色图标 */ .link-item .ic{color:#e1c77d !important;} body.light-mode .link-item .ic{color:#e8cba0 !important;} /* 5. 音乐面板浅色模式弱文字加深 (mp-sub/mp-status/mp-time/mp-volbtn/mp-close) */ body.light-mode .music-panel .mp-sub, body.light-mode .music-panel .mp-status, body.light-mode .music-panel .mp-time, body.light-mode .music-panel .mp-fab-sub{color:#6b5940 !important;} body.light-mode .mp-volbtn,body.light-mode .music-panel .mp-volbtn{color:#9a7426 !important;} body.light-mode .music-panel .mp-close{color:#6b5940 !important;} body.light-mode .music-panel .mp-close:hover{color:#a52b27 !important;} /* 深色模式: 音乐面板弱文字提亮 */ .music-panel .mp-sub,.music-panel .mp-status,.music-panel .mp-time{color:#8a7a6a !important;} .music-panel .mp-close{color:#8a7a6a !important;} .music-panel .mp-close:hover{color:#e8c86a !important;} /* 6. 启动器新闻卡: 纸面告示(浅木色)上文字用深色, 避免默认蓝色/浅色不可读 */ a.news-card .news-title{color:#4a3420 !important;} a.news-card .news-src{color:#5a4630 !important;} body.light-mode a.news-card .news-title{color:#4a3420 !important;} body.light-mode a.news-card .news-src{color:#5a4630 !important;} /* 7. 面包屑分隔符/返回箭头提亮 */ .ux-crumb .crumb-sep{color:#8a7a6a !important;} .ux-crumb a{color:var(--color-muted) !important;} body.light-mode .ux-crumb .crumb-sep{color:#8f7d63 !important;} /* 8. 剧情脉络页导航品牌红色"宇宙"提亮(深色模式) */ .nav-brand span{color:#d44040 !important;} body.light-mode .nav-brand span{color:#b02525 !important;} /* 9. 剧场/铜钱按钮上的锁图标文字加深(浅色模式) */ body.light-mode .rt-btn,body.light-mode .backtop,body.light-mode .fav-btn{color:#4a3a28 !important;} /* 10. 章节标题/页脚等弱文字在浅色模式保持可读 */ body.light-mode .hero-stat-label{color:#8f7d63 !important;} body.light-mode .progress-label{color:#8f7d63 !important;} body.light-mode .game-card-year{color:#8f7d63 !important;} body.light-mode .news-card-top{color:#8f7d63 !important;} /* ============================================================ v12 · 铜镜检索台 / 卷宗陈列 / 根级按钮器物化 ============================================================ */ body[data-page="search"],body[data-page="about"]{ --page-paper:linear-gradient(145deg,rgba(43,23,16,.96),rgba(19,8,7,.98) 55%,rgba(10,4,4,.98)); --page-gilt:rgba(212,168,75,.42); --page-rule:rgba(212,168,75,.18); } body[data-page="search"] .top-nav .nav-inner, body[data-page="about"] .top-nav .nav-inner{max-width:1180px;gap:18px;} body[data-page="search"] .back, body[data-page="about"] .back{ position:relative;border:1px solid rgba(212,168,75,.55) !important;border-radius:3px !important; color:#f1dfbf !important;background: linear-gradient(90deg,transparent 8px,rgba(212,168,75,.22) 9px 10px,transparent 11px), repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px), linear-gradient(180deg,#8f211f,#5f1212) !important; box-shadow:inset 0 1px rgba(255,231,175,.22),inset 0 -3px rgba(50,0,0,.35),0 5px 14px rgba(0,0,0,.32) !important; font-family:var(--font-kai) !important;letter-spacing:.12em;transition:transform .28s cubic-bezier(.34,1.56,.64,1),filter .2s !important; } body[data-page="search"] .back::after, body[data-page="about"] .back::after{content:'◆';font-size:.45rem;color:var(--color-gold);margin-left:.55em;vertical-align:middle;} body[data-page="search"] .back:hover, body[data-page="about"] .back:hover{transform:translateY(-2px) rotate(-.5deg);filter:brightness(1.13);} /* 全局搜索：镜台标题与铜镜检索框 */ body[data-page="search"] .hero{position:relative;max-width:1120px;margin:0 auto;padding:52px 24px 22px;isolation:isolate;} body[data-page="search"] .hero::before{content:'';position:absolute;z-index:-1;inset:18px 8% -6px;border-radius:44% 44% 16px 16px; background:radial-gradient(ellipse at 50% 22%,rgba(212,168,75,.09),transparent 54%),linear-gradient(90deg,transparent,rgba(181,43,39,.055),transparent); border-top:1px solid rgba(212,168,75,.18);} body[data-page="search"] .hero h1{font-family:var(--font-kai);font-size:clamp(2rem,4vw,2.8rem);letter-spacing:.18em;text-shadow:0 2px 0 #270a08,0 0 22px rgba(212,168,75,.15);} body[data-page="search"] .hero h1::after{content:'照 见 万 象';display:block;margin:.65rem auto 0;width:max-content;padding:.18rem 1.5rem;border-top:1px solid var(--page-rule);border-bottom:1px solid var(--page-rule);font-size:.68rem;letter-spacing:.72em;color:var(--color-muted);text-shadow:none;} body[data-page="search"] .search-history{position:relative;z-index:2;margin-top:18px !important;justify-content:center;} body[data-page="search"] .sh-item{border-radius:50% !important;min-width:34px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;padding:6px 12px !important; background:radial-gradient(circle,#5b3b1c 0 42%,#2b170d 44% 58%,#8a6729 60% 64%,#261109 66%) !important;border:1px solid rgba(212,168,75,.58) !important;color:#e8d6b2 !important;box-shadow:inset 0 1px rgba(255,225,150,.25),0 3px 8px rgba(0,0,0,.35);} body[data-page="search"] .search-box{max-width:790px;margin-top:26px;padding:12px 30px;} body[data-page="search"] .search-box::before{content:'';position:absolute;inset:0 14px;border:1px solid rgba(212,168,75,.62);border-radius:50% / 38%;pointer-events:none; background:radial-gradient(ellipse at 50% 18%,rgba(255,236,195,.09),transparent 25%),repeating-conic-gradient(from 45deg,rgba(212,168,75,.1) 0 3deg,transparent 3deg 18deg),linear-gradient(180deg,#382313,#120806 70%); box-shadow:inset 0 0 0 4px #160a06,inset 0 0 0 6px rgba(212,168,75,.28),inset 0 8px 14px rgba(255,222,150,.08),0 12px 24px rgba(0,0,0,.42);} body[data-page="search"] .search-box::after{content:'乾 坎 艮 震 巽 离 坤 兑';position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);z-index:1;white-space:nowrap;color:rgba(212,168,75,.58);font:600 .56rem/1 var(--font-song);letter-spacing:.28em;pointer-events:none;} body[data-page="search"] .search-box input{position:relative;z-index:1;height:58px;padding:14px 62px 14px 28px;border-radius:50% / 42% !important;border:1px solid rgba(212,168,75,.38) !important; background:radial-gradient(ellipse at 42% 24%,rgba(255,245,220,.075),transparent 28%),linear-gradient(180deg,rgba(8,5,4,.9),rgba(23,11,9,.96)) !important; color:var(--color-ink) !important;caret-color:var(--color-red);font-family:var(--font-song);letter-spacing:.06em;box-shadow:inset 0 5px 18px rgba(0,0,0,.62),inset 0 -1px rgba(212,168,75,.12) !important;} body[data-page="search"] .search-box input:focus{border-color:rgba(232,200,106,.85) !important;box-shadow:inset 0 5px 18px rgba(0,0,0,.62),0 0 0 3px rgba(212,168,75,.1),0 0 28px rgba(181,43,39,.15) !important;} body[data-page="search"] .search-box .icon{right:55px;z-index:2;width:35px;height:35px;display:grid;place-items:center;border-radius:50%;font-size:1rem; color:#e1c77d;background:radial-gradient(circle,#6e4b20 0 38%,#26140b 41% 58%,#9b742b 60% 64%,#271108 67%);box-shadow:0 2px 7px rgba(0,0,0,.5);filter:grayscale(1) sepia(.72) saturate(.75);} body[data-page="search"] .filters{max-width:1120px;margin:28px auto 0;gap:10px;} body[data-page="search"] .fbtn{position:relative;min-height:42px;padding:7px 17px 7px 25px;border-radius:3px !important;border:1px solid rgba(212,168,75,.3) !important; background:repeating-linear-gradient(92deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px),linear-gradient(180deg,#332116,#1b0d08) !important; color:#bca98c !important;font-family:var(--font-kai);letter-spacing:.06em;box-shadow:inset 0 1px rgba(255,230,180,.08),0 4px 9px rgba(0,0,0,.28);} body[data-page="search"] .fbtn::before{content:'◇';position:absolute;left:9px;color:rgba(212,168,75,.52);} body[data-page="search"] .fbtn:hover{transform:translateY(-2px);border-color:rgba(212,168,75,.72) !important;color:#ead9b6 !important;} body[data-page="search"] .fbtn.on{background:linear-gradient(135deg,#8a211e,#561110) !important;color:#f2dfbc !important;border-color:#c39842 !important;box-shadow:inset 0 0 0 2px rgba(70,5,5,.7),inset 0 0 0 3px rgba(212,168,75,.32),0 5px 12px rgba(0,0,0,.35);} body[data-page="search"] .fbtn.on::before{content:'◆';color:#e8c86a;} body[data-page="search"] .results{max-width:940px;margin-top:30px;min-height:390px;padding-bottom:82px;} body[data-page="search"] .result-info{display:flex;align-items:center;gap:12px;color:var(--color-muted);font-family:var(--font-kai);letter-spacing:.08em;} body[data-page="search"] .result-info:not(:empty)::before{content:'检索簿';color:var(--color-gold);padding:3px 10px;border:1px solid rgba(212,168,75,.35);background:rgba(181,43,39,.1);} body[data-page="search"] .result-info:not(:empty)::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,var(--page-rule),transparent);} body[data-page="search"] .result-item{position:relative;overflow:hidden;border-radius:2px !important;padding:18px 48px 18px 24px;margin-bottom:14px;border:1px solid rgba(212,168,75,.27) !important; background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),var(--page-paper) !important; box-shadow:inset 4px 0 #7d1b19,inset 5px 0 rgba(212,168,75,.38),inset 0 1px rgba(255,230,180,.07),0 8px 18px rgba(0,0,0,.25);} body[data-page="search"] .result-item::after{content:'›';position:absolute;right:18px;top:50%;transform:translateY(-50%);font:2rem/1 var(--font-kai);color:rgba(212,168,75,.36);} body[data-page="search"] .result-item:hover{transform:translateX(6px);border-color:rgba(212,168,75,.72) !important;box-shadow:inset 4px 0 #a52622,inset 5px 0 rgba(212,168,75,.6),0 10px 24px rgba(0,0,0,.38);} body[data-page="search"] .ri-game,body[data-page="search"] .ri-ch,body[data-page="search"] .ri-secrets span{border-radius:2px !important;} body[data-page="search"] .ri-game{background:rgba(212,168,75,.08);font-family:var(--font-kai);letter-spacing:.08em;} body[data-page="search"] .ri-step{color:#df514a;font-weight:700;} body[data-page="search"] .ri-text{font-family:var(--font-song);font-size:.9rem;line-height:1.85;color:#b9a68f;} body[data-page="search"] .ri-text mark{border-bottom:2px solid rgba(181,43,39,.75);border-radius:0;background:rgba(212,168,75,.16);color:#f0d78f;} body[data-page="search"] .empty{position:relative;margin:12px auto;max-width:620px;padding:104px 24px 46px !important;border-top:1px solid var(--page-rule);border-bottom:1px solid var(--page-rule);font-family:var(--font-kai);letter-spacing:.16em;} body[data-page="search"] .empty::before{top:30px !important;width:58px !important;height:58px !important;border:5px double rgba(212,168,75,.62) !important;border-radius:50% !important;background:radial-gradient(circle,rgba(181,43,39,.14),transparent 54%) !important;box-shadow:0 0 0 5px rgba(69,42,19,.52),0 0 24px rgba(212,168,75,.08);} /* 关于：匾额开篇、渠道木牌、卷宗与烛节点更新日志 */ body[data-page="about"] main{max-width:1020px;padding-top:44px;} body[data-page="about"] main>.hero{position:relative;margin:0 auto 54px;padding:33px 8% 38px;border:1px solid rgba(212,168,75,.42);border-radius:3px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 5px),linear-gradient(180deg,#3b1711,#180807 72%,#0d0404); box-shadow:inset 0 0 0 4px #120605,inset 0 0 0 5px rgba(212,168,75,.25),inset 0 8px 16px rgba(255,220,150,.055),0 16px 32px rgba(0,0,0,.38);} body[data-page="about"] main>.hero::before,body[data-page="about"] main>.hero::after{content:'◆';position:absolute;top:50%;transform:translateY(-50%);color:rgba(212,168,75,.52);font-size:1.1rem;} body[data-page="about"] main>.hero::before{left:4%;} body[data-page="about"] main>.hero::after{right:4%;} body[data-page="about"] main>.hero h1{font-family:var(--font-kai);font-size:clamp(2rem,4vw,2.9rem);letter-spacing:.22em;color:#e1bb62;text-shadow:0 3px #260807,0 0 20px rgba(212,168,75,.16);} body[data-page="about"] main>.hero p{font-family:var(--font-song);letter-spacing:.08em;color:#aa947a;} body[data-page="about"] .section{position:relative;margin-bottom:46px;} body[data-page="about"] .section h2{position:relative;min-height:46px;margin-bottom:18px;padding:8px 16px 10px 52px;border:0;border-bottom:1px solid rgba(212,168,75,.35);font-family:var(--font-kai);letter-spacing:.12em;} body[data-page="about"] .section h2::before{content:'卷';position:absolute;left:4px;top:2px;width:34px;height:40px;display:grid;place-items:center;color:#efd9a6;font-size:.76rem;background:linear-gradient(135deg,#9d2a25,#5e1110);border:1px solid rgba(212,168,75,.55);box-shadow:inset 0 0 0 2px rgba(55,4,4,.7),0 4px 8px rgba(0,0,0,.28);} body[data-page="about"] .link-grid{gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));} body[data-page="about"] .link-item{position:relative;min-height:76px;padding:14px 42px 14px 18px;border-radius:3px !important;border:1px solid rgba(212,168,75,.28) !important; background:repeating-linear-gradient(92deg,rgba(255,255,255,.024) 0 1px,transparent 1px 6px),linear-gradient(155deg,#352117,#1b0d09 64%,#100705) !important; box-shadow:inset 0 1px rgba(255,230,180,.08),inset 0 -4px rgba(0,0,0,.2),0 7px 15px rgba(0,0,0,.22);} body[data-page="about"] .link-item::after{content:'↗';position:absolute;right:15px;top:50%;transform:translateY(-50%);width:22px;height:22px;display:grid;place-items:center;border:1px solid rgba(212,168,75,.35);color:rgba(212,168,75,.68);font-size:.68rem;} body[data-page="about"] .link-item .ic{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#56371d 0 44%,#1e0f09 47% 60%,#8c6828 63% 66%,#26120a 69%);filter:grayscale(1) sepia(.72) saturate(.72);} body[data-page="about"] .link-item .nm{display:block;font-family:var(--font-kai);font-size:.95rem;letter-spacing:.08em;color:#e3d1b5;} body[data-page="about"] .link-item .dm{margin-top:3px;color:#9d8c77;} body[data-page="about"] .link-item:hover{transform:translateY(-4px) rotate(-.25deg);border-color:rgba(212,168,75,.7) !important;box-shadow:inset 0 1px rgba(255,230,180,.12),0 12px 22px rgba(0,0,0,.34);} body[data-page="about"] .card{position:relative;border-radius:2px !important;padding:24px 30px;border:1px solid rgba(212,168,75,.28) !important; background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),linear-gradient(145deg,#321d13,#170b08 70%,#0d0504) !important; box-shadow:inset 5px 0 #771916,inset 6px 0 rgba(212,168,75,.35),inset 0 1px rgba(255,230,180,.07),0 9px 20px rgba(0,0,0,.24);} body[data-page="about"] .card::after{content:'纸嫁衣宇宙藏';position:absolute;right:14px;bottom:12px;padding:3px 5px;border:1px solid rgba(181,43,39,.5);color:rgba(218,76,68,.52);font:600 .58rem/1.05 var(--font-kai);writing-mode:vertical-rl;letter-spacing:.08em;transform:rotate(-2deg);} body[data-page="about"] .card p{font-family:var(--font-song);font-size:.92rem;line-height:1.95;color:#baa891;} body[data-page="about"] .thanks{gap:10px;padding-right:36px;} body[data-page="about"] .thanks span{position:relative;border-radius:2px;padding:7px 13px 7px 22px;border:1px solid rgba(212,168,75,.25);background:rgba(212,168,75,.055);font-family:var(--font-kai);} body[data-page="about"] .thanks span::before{content:'•';position:absolute;left:9px;color:#ba332d;} body[data-page="about"] .log-list{position:relative;padding:8px 0 8px 38px;} body[data-page="about"] .log-list::before{content:'';position:absolute;left:16px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,#84201c 4%,#a2792d 50%,#84201c 96%,transparent);box-shadow:0 0 8px rgba(181,43,39,.22);} body[data-page="about"] .log-list li{position:relative;display:grid;grid-template-columns:72px 92px 1fr;gap:12px;padding:16px 18px;margin-bottom:10px;border:1px solid rgba(212,168,75,.2);border-radius:2px; background:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 4px),linear-gradient(100deg,rgba(62,30,20,.8),rgba(20,9,7,.92));color:#ae9c84;line-height:1.78;} body[data-page="about"] .log-list li::before{content:'';position:absolute;left:-29px;top:21px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 45% 35%,#ffc76e 0 8%,#d63b2f 16% 42%,#65100e 55% 70%,#c49238 73%);box-shadow:0 0 10px rgba(214,59,47,.45);} body[data-page="about"] .log-list .ver{min-width:0;padding:3px 8px;height:max-content;text-align:center;border:1px solid rgba(212,168,75,.35);background:rgba(212,168,75,.07);color:#e0bd6b;font-size:.76rem;letter-spacing:.08em;} body[data-page="about"] .log-list .date{min-width:0;color:#887763;font-variant-numeric:tabular-nums;} /* 浅色：黄纸朱砂单色印刷 */ body.light-mode[data-page="search"],body.light-mode[data-page="about"]{--page-paper:linear-gradient(145deg,#fffaf0,#eee0c9 72%,#e7d5b9);--page-gilt:rgba(154,116,38,.42);--page-rule:rgba(154,116,38,.23);} body.light-mode[data-page="search"] .hero::before{background:radial-gradient(ellipse at 50% 22%,rgba(154,116,38,.09),transparent 54%),linear-gradient(90deg,transparent,rgba(176,37,37,.045),transparent);} body.light-mode[data-page="search"] .hero h1{color:#76551c;text-shadow:0 1px rgba(255,255,255,.7);} body.light-mode[data-page="search"] .hero p,body.light-mode[data-page="search"] .result-info,body.light-mode[data-page="search"] .empty{color:#67533b;} body.light-mode[data-page="search"] .search-box::before{background:radial-gradient(ellipse at 50% 18%,rgba(255,255,255,.6),transparent 25%),repeating-conic-gradient(from 45deg,rgba(154,116,38,.08) 0 3deg,transparent 3deg 18deg),linear-gradient(180deg,#d7bf92,#b5955c);box-shadow:inset 0 0 0 4px #efe3cf,inset 0 0 0 6px rgba(154,116,38,.3),0 10px 18px rgba(74,48,25,.16);} body.light-mode[data-page="search"] .search-box input{background:radial-gradient(ellipse at 42% 24%,rgba(255,255,255,.65),transparent 28%),linear-gradient(180deg,#fffdf7,#f0e3cf) !important;color:#3d2b1a !important;box-shadow:inset 0 3px 10px rgba(92,63,33,.14) !important;} body.light-mode[data-page="search"] .fbtn{background:repeating-linear-gradient(92deg,rgba(92,63,33,.035) 0 1px,transparent 1px 5px),linear-gradient(180deg,#fff8ea,#ead9bc) !important;color:#67533b !important;box-shadow:inset 0 1px white,0 4px 8px rgba(74,48,25,.12);} body.light-mode[data-page="search"] .fbtn.on{background:linear-gradient(135deg,#b52b27,#8b1d1a) !important;color:#fff4df !important;} body.light-mode[data-page="search"] .result-item{box-shadow:inset 4px 0 #b52b27,inset 5px 0 rgba(154,116,38,.4),0 7px 14px rgba(74,48,25,.12);} body.light-mode[data-page="search"] .ri-text{color:#57452f;} body.light-mode[data-page="search"] .ri-text mark{color:#70201d;background:rgba(176,37,37,.09);} body.light-mode[data-page="about"] main>.hero{background:repeating-linear-gradient(90deg,rgba(92,63,33,.035) 0 1px,transparent 1px 5px),linear-gradient(180deg,#f2dfbe,#e5cda6);box-shadow:inset 0 0 0 4px #f7efdf,inset 0 0 0 5px rgba(154,116,38,.3),0 12px 22px rgba(74,48,25,.15);} body.light-mode[data-page="about"] main>.hero h1{color:#76551c;text-shadow:0 1px white;} body.light-mode[data-page="about"] main>.hero p{color:#67533b;} body.light-mode[data-page="about"] .link-item{background:repeating-linear-gradient(92deg,rgba(92,63,33,.035) 0 1px,transparent 1px 6px),linear-gradient(155deg,#fff9ed,#ead8b9) !important;box-shadow:inset 0 1px white,0 6px 12px rgba(74,48,25,.1);} body.light-mode[data-page="about"] .link-item .nm{color:#3d2b1a !important;} body.light-mode[data-page="about"] .link-item .dm{color:#6b5940 !important;} body.light-mode[data-page="about"] .card{background:repeating-linear-gradient(0deg,rgba(92,63,33,.025) 0 1px,transparent 1px 4px),linear-gradient(145deg,#fffaf0,#ead8ba) !important;box-shadow:inset 5px 0 #b52b27,inset 6px 0 rgba(154,116,38,.32),0 7px 14px rgba(74,48,25,.1);} body.light-mode[data-page="about"] .card p{color:#51402c;} body.light-mode[data-page="about"] .thanks span{background:rgba(154,116,38,.06);color:#59462e;} body.light-mode[data-page="about"] .log-list li{background:repeating-linear-gradient(0deg,rgba(92,63,33,.02) 0 1px,transparent 1px 4px),linear-gradient(100deg,#fffaf0,#eee0c8);color:#4a3828 !important;box-shadow:0 5px 10px rgba(74,48,25,.07);} body.light-mode[data-page="about"] .log-list .date{color:#705f49 !important;} @media(max-width:760px){ body[data-page="search"] .hero{padding-top:34px;}body[data-page="search"] .hero h1::after{letter-spacing:.35em;} body[data-page="search"] .search-box{padding-inline:15px;}body[data-page="search"] .search-box::before{inset:0;}body[data-page="search"] .search-box .icon{right:31px;} body[data-page="search"] .filters{padding-inline:10px;gap:7px;}body[data-page="search"] .fbtn{padding:6px 10px 6px 22px;} body[data-page="about"] main{padding-inline:16px;}body[data-page="about"] main>.hero{margin-bottom:40px;padding-inline:12%;} body[data-page="about"] .log-list{padding-left:25px;}body[data-page="about"] .log-list::before{left:8px;}body[data-page="about"] .log-list li{grid-template-columns:62px 1fr;padding:14px;} body[data-page="about"] .log-list li::before{left:-23px;}body[data-page="about"] .log-list .date{display:none;} } @media(prefers-reduced-motion:reduce){ body[data-page="search"] .back,body[data-page="about"] .back,body[data-page="search"] .fbtn,body[data-page="search"] .result-item,body[data-page="about"] .link-item{transition:none !important;} } /* ============================================================ 主题组件 · 纸嫁衣民族元素 (鸳鸯·纸新娘·轮盘·红绳·皮影) 增强性样式 —— 不改布局、不引入伪元素冲突，随各页 CSS 变量自动适配明暗。 ============================================================ */ /* —— 文字可读性：放大偏小的元信息（正文类已由 --fs-scale 体系接管，不在此列） —— */ .song-sub,.song-meta{font-size:.78rem} .news-src{font-size:.7rem} .mp-sub,.mp-status,.mp-time{font-size:.72rem} /* —— 红绳 · 阅读进度条：朱漆底 + 金线红绳流光 —— */ .read-progress{ background: repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px), linear-gradient(90deg,#c83434,#ffd98a 55%,#c83434); background-size:220% 100%; animation:zjyThread 7s linear infinite; } @keyframes zjyThread{0%{background-position:0 0}100%{background-position:-220% 0}} .progress-bar-fill{ background: repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px), linear-gradient(90deg,#d45757,#e8c86a); } body.light-mode .read-progress{ background: repeating-linear-gradient(90deg,rgba(120,60,30,.07) 0 1px,transparent 1px 3px), linear-gradient(90deg,#a8552f,#e0b060 55%,#a8552f); } /* —— 皮影灯 · 卡片悬停的红烛光晕 —— */ .game-card:hover,.char-card:hover,.news-card:hover,.music-card:hover,.easter-card:hover, .result-item:hover,.ref-card:hover,.tl-item:hover,.cult-card:hover,.link-item:hover, .song-card:hover,.menu-card:hover,.ach-card:hover{ box-shadow: 0 0 0 1px rgba(212,168,75,.28), 0 10px 28px rgba(196,30,30,.16), 0 2px 10px rgba(0,0,0,.35); } /* —— 朱砂印章 · 按钮悬停 / 按压 —— */ .cta-btn,.oracle-btn,.rt-btn,.fbtn{ transition:box-shadow .25s ease,transform .2s ease; } .cta-btn:hover,.oracle-btn:hover,.rt-btn:hover,.fbtn:hover{ box-shadow:0 0 16px rgba(196,30,30,.4),inset 0 0 12px rgba(212,168,75,.18); } .cta-btn:active,.oracle-btn:active,.rt-btn:active{ transform:translateY(1px); box-shadow:inset 0 2px 8px rgba(0,0,0,.45); } /* —— 红绳金丝 · 输入框聚焦 —— */ input[type=text]:focus,input[type=search]:focus,textarea:focus,select:focus{ outline:none; box-shadow:0 0 0 1px rgba(212,168,75,.5),0 0 12px rgba(196,30,30,.25); } /* —— 纸新娘 · 选中文字为朱砂红 —— */ ::selection{background:rgba(196,30,30,.55);color:#fff1e0;text-shadow:0 0 4px rgba(0,0,0,.2);} body.light-mode ::selection{background:rgba(176,37,37,.35);color:#3d2b1a;} /* (区块标题沿用上方 v10「戏台横匾」设计，不再覆盖) */ /* ============================================================ v13 · 喜事丧办 —— 对比度收束 / 浅色质感 / 小字地板 / 婚书面板 ============================================================ */ /* ---- 1. 竹简文化卡: 文字压不住竹底, 强制提亮(暗) / 加深(浅) ---- */ .cult-card .cult-head b{color:#ffe3a8 !important;text-shadow:0 1px 2px rgba(60,30,0,.55);} .cult-card .cult-desc{color:#f4e7c6 !important;text-shadow:0 1px 1px rgba(60,30,0,.4);} .cult-card .cult-desc b,.cult-card .cult-desc strong{color:#ffd88a !important;text-decoration-color:rgba(255,220,150,.45) !important;} .cult-card .cult-tag{color:#ffe9b8 !important;border-color:rgba(255,220,150,.55) !important;background:rgba(90,20,15,.42);} .cult-card .cult-src,.cult-card .cult-ref{color:#e8d3a0 !important;} body.light-mode .cult-card .cult-head b{color:#46300a !important;text-shadow:none;} body.light-mode .cult-card .cult-desc{color:#33240c !important;text-shadow:none;} body.light-mode .cult-card .cult-desc b,body.light-mode .cult-card .cult-desc strong{color:#8a1a1a !important;} body.light-mode .cult-card .cult-tag{color:#7a4a10 !important;border-color:rgba(122,74,16,.5) !important;background:rgba(255,240,200,.55);} body.light-mode .cult-card .cult-src,body.light-mode .cult-card .cult-ref{color:#5a4418 !important;} /* ---- 2. 小字地板: 内容/元信息不低于 ~.72rem ---- */ .tl-tags span{font-size:.72rem !important;} .tl-node-meta{font-size:.72rem !important;} .series-ledger-head small{font-size:.72rem !important;} .series-ledger-card p{font-size:.78rem !important;} .game-card-year{font-size:.74rem !important;} .news-card-top{font-size:.74rem !important;} .char-card-game,.char-role{font-size:.74rem !important;} .hero-stat-label{font-size:.8rem !important;} .game-card-num{font-size:.78rem !important;} .sh-item{font-size:.76rem !important;} .result-info{font-size:.8rem !important;} body[data-page="search"] .hero h1::after{font-size:.74rem;} .mp-track{font-size:.82rem !important;} .tl-time span{font-size:.76rem !important;} /* ---- 3. 浅色模式质感: 宣纸底纹加深 + 卡缘分界更清晰 (治"光秃秃") ---- */ body.light-mode{ background-image: radial-gradient(ellipse at 50% -18%,rgba(165,43,39,.06),transparent 48%), radial-gradient(ellipse at 50% 115%,rgba(142,104,41,.08),transparent 55%), repeating-linear-gradient(96deg,rgba(90,60,30,.035) 0 1px,transparent 1px 6px), repeating-linear-gradient(4deg,rgba(90,60,30,.022) 0 1px,transparent 1px 5px) !important;} body.light-mode .section{position:relative;} body.light-mode .game-card,body.light-mode .char-card,body.light-mode .news-card, body.light-mode .music-card,body.light-mode .song-card,body.light-mode .easter-card, body.light-mode .result-item,body.light-mode .tl-item,body.light-mode .cult-card, body.light-mode .ref-card,body.light-mode .link-item,body.light-mode .step-card{ border-color:rgba(142,104,41,.42) !important;} body.light-mode .timeline::before{background:rgba(142,104,41,.3);} body.light-mode .hero-badge{color:#a52b27;border-color:rgba(165,43,39,.45);background:rgba(165,43,39,.05);} /* ---- 4. 婚书 · 启动器信息面板 (图谱/音乐区裸盒 → 红双喜帖) ---- */ .panel-card{position:relative;overflow:hidden;text-align:center; border:1px solid rgba(212,168,75,.42) !important;border-radius:6px !important; background: radial-gradient(circle at 50% -12%,rgba(181,43,39,.12),transparent 55%), repeating-linear-gradient(96deg,rgba(212,168,75,.02) 0 1px,transparent 1px 7px), linear-gradient(165deg,#200f0c,#160807 60%,#0f0505) !important; box-shadow:inset 0 0 0 1px rgba(212,168,75,.09),inset 0 2px rgba(255,230,180,.05),0 12px 30px rgba(0,0,0,.32);} .panel-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;pointer-events:none; background:linear-gradient(90deg,transparent,#b52b27 20%,#d4a84b 50%,#b52b27 80%,transparent);} .panel-card::after{content:'\56CD';position:absolute;right:16px;bottom:4px;font-family:var(--font-kai);font-size:2.6rem;color:rgba(181,43,39,.15);pointer-events:none;line-height:1;} body.light-mode .panel-card{ background: radial-gradient(circle at 50% -12%,rgba(165,43,39,.07),transparent 55%), repeating-linear-gradient(96deg,rgba(90,60,30,.032) 0 1px,transparent 1px 7px), linear-gradient(165deg,#fbf2de,#f2e3c6 60%,#ead7b4) !important; border-color:rgba(154,116,38,.52) !important; box-shadow:inset 0 0 0 1px rgba(154,116,38,.12),inset 0 2px rgba(255,255,255,.6),0 10px 24px rgba(74,48,25,.15);} body.light-mode .panel-card::after{color:rgba(165,43,39,.13);} /* ---- 5. 婚嫁六证 · 装饰带 (秤杆/弓箭/剪刀/如意/算盘/金鞭) ---- */ .liuzheng{display:flex;align-items:center;justify-content:center;gap:0;margin:34px auto 0;max-width:760px;flex-wrap:wrap;} .liuzheng .lz-item{font-family:var(--font-kai);font-size:.78rem;letter-spacing:.18em;color:var(--color-muted); padding:3px 12px;border:1px solid rgba(212,168,75,.3);border-radius:2px;background:rgba(181,43,39,.06);position:relative;} .liuzheng .lz-item::before{content:'';position:absolute;left:50%;top:-5px;width:1px;height:5px;background:rgba(212,168,75,.5);} .liuzheng .lz-sep{width:26px;height:1px;background:linear-gradient(90deg,rgba(181,43,39,.0),rgba(181,43,39,.55),rgba(181,43,39,0));} .liuzheng .lz-cap{font-family:var(--font-kai);font-size:.68rem;letter-spacing:.3em;color:var(--color-dim);margin-right:14px;} body.light-mode .liuzheng .lz-item{color:#6b5136;border-color:rgba(154,116,38,.4);background:rgba(165,43,39,.05);} @media(max-width:760px){.liuzheng{gap:4px;}.liuzheng .lz-sep{width:12px;}.liuzheng .lz-cap{width:100%;text-align:center;margin:0 0 8px;}} /* ============================================================ v14 · 器物满堂 (五十纸嫁衣元素入器,全组件双主题) 新增映射: 红轿子→game-card 纸房子→world-card 喜帖→menu-card 纸钱→news-card 棺钉→easter/modal-card 佛卡→ref-card 老照片→tl-overview-card 玉簪→char-card轴头 玉手镯→ach-ring 经文手串→ch-num 香火→tl-dot焰晕 香炉→section-line 木梳→filters梳齿 香牌→section-num 算珠→hero-stat-num 元宝金→game-card-num 笔锋→quote 砚台→step-actions 拨浪鼓→done-btn 无面铜人→fav-btn 令牌→th-btn 朱砂香囊→oracle-btn 布袋木偶→theme-card 杖头木偶→team-card 骨头饰品→ach-card 玉珠→music-chip 纸盆→search-history 百物谱→body::after (36器物轮廓水印条,no-ambient 可隐) ============================================================ */ /* ---- A. 器物色签 (双主题令牌) ---- */ :root{ --q-gt:#c41e1e; /* 盖头红 */ --q-hy:#b52b27; /* 嫁衣红 */ --q-by:#efe4d2; /* 白衣白 */ --q-jz:#e3c36d; /* 轿顶金/元宝 */ --q-zhi:#e8d488; /* 纸黄 */ --q-zs:#b02525; /* 朱砂 */ --q-xiang:#9a8a72;/* 香灰 */ --q-yu:#7fb89f; /* 玉青 */ --q-gu:#cbb8a0; /* 骨白 */ --q-tong:#c8a878; /* 青铜 */ --q-mo:#171008; /* 墨 */ } body.light-mode{ --q-gt:#a52b27; --q-hy:#9a2826; --q-by:#fffdf8; --q-jz:#9a7426; --q-zhi:#b99e52; --q-zs:#b02525; --q-xiang:#8d7c63; --q-yu:#5f947d; --q-gu:#a08d74; --q-tong:#9c7c4e; --q-mo:#33241a; } /* ---- B. 卡片 ---- */ /* B1 红轿子: 轿顶檐+金珠+双轿杆 注意: 页面已用 ::before 做悬停/通关进度条(opacity:0→hover:1,done=绿), 此处只换"布料与高度",保留其 opacity/transition 语义 → 悬停掀轿帘见轿顶。 */ .game-card::before{height:7px; background: radial-gradient(circle at 50% 0,rgba(227,195,109,.95) 0 3.5px,transparent 4.5px), linear-gradient(90deg,#7e1212,#b52b27 30%,#d4a84b 50%,#b52b27 70%,#7e1212);} .game-card{box-shadow:inset 3px 0 0 rgba(212,168,75,.14),inset -3px 0 0 rgba(212,168,75,.14),inset 0 0 0 1px rgba(212,168,75,.055),inset 0 1px rgba(255,255,255,.045),inset 0 -3px 7px rgba(0,0,0,.18),0 5px 16px rgba(0,0,0,.24) !important;} body.light-mode .game-card{box-shadow:inset 3px 0 0 rgba(142,104,41,.15),inset -3px 0 0 rgba(142,104,41,.15),inset 0 1px rgba(255,255,255,.5),inset 0 -2px 6px rgba(80,50,25,.1),0 4px 13px rgba(70,45,25,.12) !important;} /* B2 纸房子: 瓦楞金顶 + 纸窗(十字棂) */ .world-card::before{height:6px;opacity:.9; background: repeating-linear-gradient(90deg,rgba(120,80,30,.55) 0 7px,rgba(212,168,75,.9) 7px 8px,rgba(120,80,30,.55) 8px 15px), linear-gradient(90deg,#8a5f1c,#d4a84b 50%,#8a5f1c);} .world-card::after{content:'';position:absolute;right:12px;bottom:10px;width:20px;height:20px;opacity:.45;pointer-events:none; border:1px solid rgba(212,168,75,.55); background: linear-gradient(rgba(212,168,75,.4),rgba(212,168,75,.4)) 50% 0/1px 100% no-repeat, linear-gradient(rgba(212,168,75,.4),rgba(212,168,75,.4)) 0 50%/100% 1px no-repeat; box-shadow:0 0 8px rgba(181,43,39,.15);} body.light-mode .world-card::before{opacity:.75;} body.light-mode .world-card::after{border-color:rgba(154,116,38,.5);} body.light-mode .world-card::after{background:linear-gradient(rgba(154,116,38,.35),rgba(154,116,38,.35)) 50% 0/1px 100% no-repeat,linear-gradient(rgba(154,116,38,.35),rgba(154,116,38,.35)) 0 50%/100% 1px no-repeat;} /* B3 喜帖: 金双线帖首 + 囍字水印 (menu-card 伪元素空闲) */ .menu-card{position:relative;overflow:hidden;} .menu-card::before{content:'';position:absolute;top:5px;left:8px;right:8px;height:4px;opacity:.55;pointer-events:none; border-top:1px solid rgba(212,168,75,.5);border-bottom:1px solid rgba(212,168,75,.3);} .menu-card::after{content:'\56CD';position:absolute;right:8px;bottom:-10px;font-family:var(--font-kai);font-size:2.6rem;line-height:1;color:rgba(181,43,39,.13);pointer-events:none;} body.light-mode .menu-card::after{color:rgba(165,43,39,.1);} /* B4 告示贴+纸钱: 底角两枚纸钱(圆面方孔) */ .news-card{background: radial-gradient(circle at 12% 8%,rgba(255,255,255,.12),transparent 45%), radial-gradient(circle at 14% 86%,rgba(242,236,220,.55) 0 6px,transparent 7px), radial-gradient(circle at 14% 86%,rgba(200,180,140,.5) 0 2.5px,transparent 3px), radial-gradient(circle at 22% 88%,rgba(242,236,220,.45) 0 5px,transparent 6px), radial-gradient(circle at 22% 88%,rgba(200,180,140,.4) 0 2px,transparent 2.6px), repeating-linear-gradient(0deg,rgba(120,80,30,.04) 0 1px,transparent 1px 5px), linear-gradient(165deg,#d8c49a,#c4ac80 60%,#b89870) !important;} body.light-mode .news-card{background: radial-gradient(circle at 12% 8%,rgba(255,255,255,.6),transparent 45%), radial-gradient(circle at 14% 86%,rgba(255,250,235,.7) 0 6px,transparent 7px), radial-gradient(circle at 14% 86%,rgba(180,150,90,.5) 0 2.5px,transparent 3px), radial-gradient(circle at 22% 88%,rgba(255,250,235,.6) 0 5px,transparent 6px), radial-gradient(circle at 22% 88%,rgba(180,150,90,.4) 0 2px,transparent 2.6px), repeating-linear-gradient(0deg,rgba(90,60,30,.03) 0 1px,transparent 1px 5px), linear-gradient(165deg,#f6ecd4,#ecdfc0 60%,#e2d2ae) !important;} /* B5 木匣+棺钉: 四角方头钉 + 棺盖拼缝 */ .easter-card{background: radial-gradient(circle at 8px 8px,rgba(212,168,75,.8) 0 3px,transparent 4px), radial-gradient(circle at calc(100% - 8px) 8px,rgba(212,168,75,.8) 0 3px,transparent 4px), radial-gradient(circle at 8px calc(100% - 8px),rgba(212,168,75,.8) 0 3px,transparent 4px), radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),rgba(212,168,75,.8) 0 3px,transparent 4px), repeating-linear-gradient(90deg,rgba(0,0,0,.09) 0 3px,transparent 3px 7px), repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 2px,transparent 2px 6px), linear-gradient(165deg,#6e4c30,#5a3c24 60%,#482e1c) !important;} body.light-mode .easter-card{background: radial-gradient(circle at 8px 8px,rgba(154,116,38,.7) 0 3px,transparent 4px), radial-gradient(circle at calc(100% - 8px) 8px,rgba(154,116,38,.7) 0 3px,transparent 4px), radial-gradient(circle at 8px calc(100% - 8px),rgba(154,116,38,.7) 0 3px,transparent 4px), radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),rgba(154,116,38,.7) 0 3px,transparent 4px), repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 3px,transparent 3px 7px), repeating-linear-gradient(0deg,rgba(0,0,0,.03) 0 2px,transparent 2px 6px), linear-gradient(165deg,#d9c09a,#cbb18a 60%,#bda47f) !important;} /* B6 佛卡: 右上角佛龛朱印 (ref-card::after 空闲) */ .ref-card::after{content:'佛';position:absolute;right:8px;bottom:6px;width:15px;height:15px;display:grid;place-items:center; font-family:var(--font-kai);font-size:.5rem;color:rgba(212,168,75,.65); border:1px solid rgba(212,168,75,.32);border-radius:2px;background:rgba(181,43,39,.1);pointer-events:none;} body.light-mode .ref-card::after{color:rgba(154,116,38,.6);border-color:rgba(154,116,38,.3);background:rgba(165,43,39,.06);} /* B7 老照片: 相纸白边+暗角 (tl-overview-card::before 空闲) */ .tl-overview-card::before{content:'';position:absolute;inset:5px;border:1px solid rgba(255,255,255,.06);border-radius:2px;pointer-events:none; box-shadow:inset 0 0 18px rgba(0,0,0,.28);} body.light-mode .tl-overview-card::before{border-color:rgba(255,255,255,.5);box-shadow:inset 0 0 14px rgba(120,80,40,.16);} /* B8 绢帛玉簪: 卷轴轴头换成玉簪 (char-card::before/::after) */ .char-card::before,.char-card::after{ background:linear-gradient(90deg,#2f4f42,#6fae93 20%,#b8e0d0 46%,#5f947d 64%,#2f4f42 86%,#24382f) !important;} body.light-mode .char-card::before,body.light-mode .char-card::after{ background:linear-gradient(90deg,#86a896,#a8c8b8 22%,#cce4d8 48%,#8fb8a8 66%,#86a896 88%,#75988a) !important;} /* B9 玉手镯: 徽章圆环换玉镯 + 顶珠 */ .ach-ring{position:relative;} .ach-ring::after{content:'';position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;z-index:2;pointer-events:none; background:radial-gradient(circle at 35% 30%,#e8fff6,#6fae93 55%,#2f4f42);box-shadow:0 0 6px rgba(127,184,159,.6);} .ach-ring .ring-bg{stroke:rgba(127,184,159,.35) !important;} .ach-ring .ring-fill{stroke:#7fb89f !important;stroke-linecap:round !important;} body.light-mode .ach-ring .ring-fill{stroke:#5f947d !important;} /* B10 经文手串: 章节签换玉珠(pill念珠) */ .ch-num{position:relative;border-radius:10px !important; background:radial-gradient(circle at 32% 28%,#a8dcc8,#5f947d 55%,#3a6a56) !important; border:1px solid rgba(127,184,159,.55) !important;color:#f4fcf8 !important; box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.12),inset 0 -2px 4px rgba(20,50,40,.5),0 2px 6px rgba(0,0,0,.28) !important; font-family:var(--font-kai) !important;} body.light-mode .ch-num{background:radial-gradient(circle at 32% 28%,#c8e4d8,#8fb8a8 55%,#6f9e8e) !important; border-color:rgba(95,148,125,.5) !important;color:#f4fcf8 !important;} /* B11 布袋木偶水印 (theme-card::after 空闲) */ .theme-card{position:relative;overflow:hidden;} .theme-card::after{content:'';position:absolute;right:10px;bottom:8px;width:24px;height:30px;opacity:.16;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24' fill='none' stroke='%23d4a84b' stroke-width='.9' stroke-linecap='round'%3E%3Ccircle cx='10' cy='6' r='2.4'/%3E%3Cpath d='M3.6 18.6c.7-3.6 2.6-5.6 6.4-5.6s5.7 2 6.4 5.6'/%3E%3Cpath d='M8.4 13.4l-2 5'/%3E%3Cpath d='M11.6 13.4l2 5'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;} body.light-mode .theme-card::after{opacity:.1;} /* B12 杖头木偶水印 (team-card::after 空闲) */ .team-card{position:relative;overflow:hidden;} .team-card::after{content:'';position:absolute;right:10px;bottom:8px;width:22px;height:30px;opacity:.16;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30' fill='none' stroke='%23d4a84b' stroke-width='.9' stroke-linecap='round'%3E%3Ccircle cx='9' cy='5' r='2'/%3E%3Cpath d='M9 7c0 1.4.6 2 1.6 2.6.8.7 1.4 1.5 1.7 2.9'/%3E%3Cpath d='M13.6 15l2.8 3.4'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;} body.light-mode .team-card::after{opacity:.1;} /* B13 骨头饰品水印 (ach-card::after 空闲) */ .ach-card{position:relative;overflow:hidden;} .ach-card::after{content:'';position:absolute;right:8px;top:8px;width:26px;height:14px;opacity:.18;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='none' stroke='%23d4a84b' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M6.4 7c-1.8-2.2-.8-4.4 1.1-4.4.7 0 1.3.4 1.8.9 1-1.1 2.8-1.1 3.7 0 .6-.5 1.1-.9 1.8-.9 1.9 0 2.9 2.2 1.1 4.4'/%3E%3Ccircle cx='6' cy='7' r='1.2'/%3E%3Ccircle cx='17' cy='7' r='1.2'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;} body.light-mode .ach-card::after{opacity:.12;} /* B14 弹层棺钉: 四角方钉 + 投影 (modal-card) */ .modal-card{box-shadow:inset 4px 4px 0 1px rgba(212,168,75,.14),inset -4px 4px 0 1px rgba(212,168,75,.14),inset 4px -4px 0 1px rgba(212,168,75,.14),inset -4px -4px 0 1px rgba(212,168,75,.14),0 14px 36px rgba(0,0,0,.38) !important;} body.light-mode .modal-card{box-shadow:inset 4px 4px 0 1px rgba(154,116,38,.16),inset -4px 4px 0 1px rgba(154,116,38,.16),inset 4px -4px 0 1px rgba(154,116,38,.16),inset -4px -4px 0 1px rgba(154,116,38,.16),0 14px 32px rgba(74,48,25,.2) !important;} /* ---- C. 按钮 ---- */ /* C1 拨浪鼓 (done-btn off; on=盖印复原) */ .done-btn{position:relative;border-radius:50% 50% 46% 46% !important; background: radial-gradient(circle at 50% 38%,rgba(255,255,255,.2) 0 14%,transparent 15%), repeating-conic-gradient(from 0deg,rgba(95,60,30,.2) 0deg 5deg,transparent 5deg 10deg), radial-gradient(circle at 50% 45%,#d8c4a0,#b89870 52%,#8a6a48) !important; border:1px solid rgba(120,80,40,.65) !important;color:#4a3420 !important;text-shadow:none !important; box-shadow:inset 0 2px 4px rgba(255,255,255,.4),inset 0 -3px 6px rgba(60,35,15,.55),0 2px 6px rgba(0,0,0,.4),-14px 4px 0 -8px #9a6a3a,14px 4px 0 -8px #9a6a3a !important;} .done-btn::before,.done-btn::after{display:none !important;} .done-btn:hover{box-shadow:inset 0 2px 4px rgba(255,255,255,.4),inset 0 -3px 6px rgba(60,35,15,.55),0 0 12px rgba(212,168,75,.3),-14px 4px 0 -8px #b88858,14px 4px 0 -8px #b88858 !important;} .done-btn.on{background:linear-gradient(180deg,#c43c3c,#9a1f1f 55%,#7e1212) !important;color:#f8e8c8 !important; border-radius:7px !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 4px rgba(0,0,0,.35),0 0 0 3px rgba(196,30,30,.22),0 3px 8px rgba(0,0,0,.4) !important;} body.light-mode .done-btn{background: radial-gradient(circle at 50% 38%,rgba(255,255,255,.35) 0 14%,transparent 15%), repeating-conic-gradient(from 0deg,rgba(120,80,50,.14) 0deg 5deg,transparent 5deg 10deg), radial-gradient(circle at 50% 45%,#ecdcc0,#d4b890 52%,#b09068) !important; border-color:rgba(140,100,60,.5) !important;color:#4a3420 !important;} /* C2 无面铜人 (fav-btn 方孔→铜面) */ .fav-btn{position:relative;border-radius:50% !important; background: radial-gradient(circle at 50% 30%,rgba(240,220,180,.28),transparent 46%), linear-gradient(180deg,#c8a878,#8a6a48 58%,#5e4228) !important; border:1px solid rgba(120,90,50,.7) !important;color:#f0e0c0 !important; box-shadow:inset 0 2px 3px rgba(255,235,200,.32),inset 0 -4px 8px rgba(40,20,5,.6),0 2px 6px rgba(0,0,0,.35) !important;} .fav-btn::before{display:none !important;} .fav-btn:hover{border-color:rgba(196,30,30,.55) !important;box-shadow:inset 0 2px 3px rgba(255,235,200,.32),inset 0 -4px 8px rgba(40,20,5,.6),0 0 10px rgba(181,43,39,.3) !important;} body.light-mode .fav-btn{background:radial-gradient(circle at 50% 30%,rgba(255,245,225,.5),transparent 46%),linear-gradient(180deg,#d8b888,#b09068 58%,#8a6a48) !important; border-color:rgba(140,100,60,.55) !important;color:#3d2b1a !important;} /* C3 令牌 (th-btn: 玉牌云头+金绦; on=朱砂令) */ .th-btn{position:relative;display:inline-flex;align-items:center;gap:5px; background:linear-gradient(180deg,#33574a,#27402f) !important;color:#f2faf6 !important; border:1px solid rgba(212,168,75,.55) !important;border-radius:7px 7px 3px 3px !important; box-shadow:inset 0 0 0 2px rgba(212,168,75,.13),inset 0 1px 0 rgba(255,255,255,.14),0 3px 7px rgba(0,0,0,.3) !important;} .th-btn::after{content:'';position:absolute;left:7px;right:7px;bottom:3px;height:1px;opacity:.55;pointer-events:none; background:repeating-linear-gradient(90deg,rgba(212,168,75,.55) 0 4px,transparent 4px 9px);} .th-btn:hover{transform:translateY(-1px);} .th-btn.on{background:linear-gradient(180deg,#8f211e,#641514) !important;} body.light-mode .th-btn{background:linear-gradient(180deg,#7a9c8c,#5f8474) !important;color:#f4fcf8 !important;} body.light-mode .th-btn.on{background:linear-gradient(180deg,#b52b27,#8b1d1a) !important;color:#fff4df !important;} /* C4 朱砂香囊 (oracle-btn: 囊形+抽绳+朱砂点) */ .oracle-btn{position:relative;border-radius:50% 50% 12px 12px !important; background: radial-gradient(circle at 50% 26%,rgba(255,220,180,.16),transparent 44%), radial-gradient(circle at 30% 60%,rgba(212,168,75,.28) 0 2px,transparent 3px), radial-gradient(circle at 68% 54%,rgba(212,168,75,.22) 0 2px,transparent 3px), linear-gradient(180deg,#9a2a24,#6e1c18 58%,#581410) !important; border:1px solid rgba(212,168,75,.5) !important;color:#f8e8c8 !important;text-shadow:none !important; box-shadow:inset 0 2px 4px rgba(255,255,255,.14),inset 0 -5px 9px rgba(0,0,0,.42),0 3px 8px rgba(0,0,0,.35) !important;} .oracle-btn::before{content:'';position:absolute;top:-3px;left:20%;right:20%;height:2px;border-radius:2px;opacity:.9;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(232,200,106,.9) 18% 82%,transparent);} .oracle-btn::after{content:'';position:absolute;top:1px;left:32%;right:32%;height:4px;pointer-events:none; background:repeating-linear-gradient(90deg,rgba(232,200,106,.55) 0 1px,transparent 1px 4px);} body.light-mode .oracle-btn{background:radial-gradient(circle at 50% 26%,rgba(255,230,200,.25),transparent 44%),radial-gradient(circle at 30% 60%,rgba(154,116,38,.3) 0 2px,transparent 3px),radial-gradient(circle at 68% 54%,rgba(154,116,38,.24) 0 2px,transparent 3px),linear-gradient(180deg,#a85a50,#8a463e 58%,#743830) !important; color:#fdf0e0 !important;} /* ---- D. 交互组件 ---- */ /* D1 木梳: 过滤器行下梳齿 (filters::after 空闲) */ .filters{position:relative;} .filters::after{content:'';position:absolute;left:12px;right:12px;bottom:-6px;height:7px;pointer-events:none;opacity:.45; background:repeating-linear-gradient(90deg,transparent 0 4px,rgba(212,168,75,.6) 4px 5px,transparent 5px 10px); -webkit-mask:linear-gradient(180deg,#000 0 4px,transparent 6px); mask:linear-gradient(180deg,#000 0 4px,transparent 6px);} body.light-mode .filters::after{opacity:.3;} /* D2 香炉: 章节分隔线中央香炉水印 (section-line::before 空闲) */ .section-line{position:relative;} .section-line::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:24px;opacity:.5;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24' fill='none' stroke='%23d4a84b' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M8 9.6h14'/%3E%3Cpath d='M8 9.6c0 2.4 1.7 4.2 3.6 4.2s3.6-1.8 3.6-4.2'/%3E%3Cpath d='M10 13.8l-1 3'/%3E%3Cpath d='M20 13.8l1 3'/%3E%3Cpath d='M10.4 9.6V7.4'/%3E%3Cpath d='M19.6 9.6V7.4'/%3E%3Cpath d='M8.6 7.4h12.8l1 2.2H7.6z'/%3E%3Cpath d='M11.6 6c-.4-1 .2-1.8 1.2-1.8'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;} body.light-mode .section-line::before{opacity:.35;} /* D3 香牌: 章节序号牌 */ .section-num{display:inline-flex;align-items:center;justify-content:center;min-width:1.7em;padding:1px 9px !important; border:1px solid rgba(212,168,75,.42) !important;border-radius:3px !important; background:linear-gradient(180deg,rgba(212,168,75,.16),rgba(212,168,75,.04)) !important; color:var(--color-gold) !important;font-family:var(--font-kai) !important;letter-spacing:.1em !important;} /* D4 算珠: 门户大数字珠 */ .hero-stat-num{display:inline-block;min-width:2em;text-align:center;padding:2px 11px !important; border-radius:50% 50% 46% 46% !important; background:radial-gradient(ellipse at 50% 30%,rgba(212,168,75,.2),transparent 72%) !important; color:var(--color-gold) !important;border:1px solid rgba(212,168,75,.45) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 5px rgba(0,0,0,.3) !important;} body.light-mode .hero-stat-num{border-color:rgba(154,116,38,.4) !important; background:radial-gradient(ellipse at 50% 30%,rgba(154,116,38,.13),transparent 72%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 3px rgba(80,50,25,.12) !important;} /* D5 元宝金: 卡片角标 */ .game-card-num{display:inline-flex;align-items:center;padding:1px 8px !important; border:1px solid rgba(212,168,75,.4) !important;border-radius:2px !important; background:rgba(212,168,75,.08) !important;letter-spacing:.12em !important;} body.light-mode .game-card-num{border-color:rgba(154,116,38,.38) !important;background:rgba(154,116,38,.08) !important;} /* D6 香火点: 时间轴节点焰晕 (tl-dot::after 空闲) */ .tl-row .tl-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(255,170,80,.5),transparent 70%);} body.light-mode .tl-row .tl-dot::after{opacity:.45;} /* D7 玉珠: 音乐标签玉缘 */ .music-chip{border-color:rgba(127,184,159,.42) !important;} body.light-mode .music-chip{border-color:rgba(95,148,125,.4) !important;} /* D8 纸盆: 搜索历史盆沿 */ .search-history{position:relative;} .search-history::before{content:'';position:absolute;top:-2px;left:14%;right:14%;height:3px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(181,43,39,.4) 25% 75%,transparent); border-radius:50% 50% 0 0/100% 100% 0 0;} body.light-mode .search-history::before{background:linear-gradient(90deg,transparent,rgba(176,37,37,.32) 25% 75%,transparent);} /* ---- E. 文本段 ---- */ /* E1 笔锋: 引文右下毛笔水印 (quote::after 空闲) */ .quote{position:relative;} .quote::after{content:'';position:absolute;right:10px;bottom:6px;width:26px;height:16px;opacity:.18;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16' fill='none' stroke='%23b02525' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M14 3v7.4'/%3E%3Cpath d='M14 10.4c1.8 1.6 1 4.4-.4 5.6-1.6-1.2-2.2-4-.2-5.6'/%3E%3Cpath d='M12.4 3.6l-1.8-.8'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;} body.light-mode .quote::after{opacity:.14;} /* E2 砚台: 步骤操作区角上砚台水印 */ .step-actions{background: repeating-linear-gradient(0deg,rgba(212,168,75,.04) 0 1px,transparent 1px 3px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24' fill='none' stroke='%23b02525' stroke-width='1' stroke-opacity='.55' stroke-linecap='round'%3E%3Crect x='4' y='8' width='22' height='12' rx='3'/%3E%3Cpath d='M8.5 14a6.5 6.5 0 0 1 13 0'/%3E%3Ccircle cx='21' cy='11.4' r='1'/%3E%3C/svg%3E") no-repeat 97% 10%/30px 24px, var(--color-canvas) !important;} body.light-mode .step-actions{background: repeating-linear-gradient(0deg,rgba(154,116,38,.04) 0 1px,transparent 1px 3px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24' fill='none' stroke='%2378443f' stroke-width='1' stroke-opacity='.5' stroke-linecap='round'%3E%3Crect x='4' y='8' width='22' height='12' rx='3'/%3E%3Cpath d='M8.5 14a6.5 6.5 0 0 1 13 0'/%3E%3Ccircle cx='21' cy='11.4' r='1'/%3E%3C/svg%3E") no-repeat 97% 10%/30px 24px, #faf3e5 !important;} /* ---- F. 百物谱: 页面底缘三十六器物水印条 (body::after) ---- */ body::after{content:'';position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:2;pointer-events:none; width:min(920px,calc(100vw - 48px));height:24px;opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 920 24' fill='none' stroke='%23d4a84b' stroke-width='.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(4,2)'%3E%3Cpath d='M3 6.2h14a7 4.2 0 0 1-14 0z'/%3E%3Cpath d='M4 6.6h12'/%3E%3C/g%3E%3Cg transform='translate(28,2)'%3E%3Cpath d='M8 3v11.4'/%3E%3Cpath d='M12 3v11.4'/%3E%3Cpath d='M7.4 3.2h1.2'/%3E%3Cpath d='M11.4 3.2h1.2'/%3E%3C/g%3E%3Cg transform='translate(52,2)'%3E%3Ccircle cx='10' cy='5.8' r='3.4'/%3E%3Cpath d='M10 9.2v5.6'/%3E%3Cpath d='M8.6 14.8h2.8'/%3E%3C/g%3E%3Cg transform='translate(76,2)'%3E%3Cpath d='M5 5.6h10a2.4 2.4 0 0 1 2.4 2.4v.8H2.6V8A2.4 2.4 0 0 1 5 5.6z'/%3E%3Cpath d='M6 8.8v5'/%3E%3Cpath d='M9 8.8v5'/%3E%3Cpath d='M12 8.8v5'/%3E%3Cpath d='M15 8.8v5'/%3E%3C/g%3E%3Cg transform='translate(100,2)'%3E%3Ccircle cx='10' cy='9' r='4.2'/%3E%3Ccircle cx='10' cy='9' r='2.4'/%3E%3C/g%3E%3Cg transform='translate(124,2)'%3E%3Cpath d='M4.6 13.4L12.6 5.4l2 2-8 8z'/%3E%3Ccircle cx='15.6' cy='4.4' r='1.1'/%3E%3C/g%3E%3Cg transform='translate(148,2)'%3E%3Ccircle cx='10' cy='7.6' r='3.4'/%3E%3Cpath d='M10 11v5.2'/%3E%3Ccircle cx='5.8' cy='9.2' r='1'/%3E%3Ccircle cx='14.2' cy='9.2' r='1'/%3E%3Cpath d='M10 16.2l1.8 1.8'/%3E%3C/g%3E%3Cg transform='translate(172,2)'%3E%3Cpath d='M6 3.8v11.4'/%3E%3Cpath d='M6 3.8c0-1.7 2.2-1.7 2.2 0'/%3E%3Cpath d='M6 15.2c0 1.9 2.2 1.9 2.2 0'/%3E%3Cpath d='M4.4 7h3.2'/%3E%3C/g%3E%3Cg transform='translate(196,2)'%3E%3Crect x='7' y='2.6' width='6' height='9.4' rx='1.6'/%3E%3Cpath d='M10 2.6c-1.2 1.2.8 1.7 0 3.1'/%3E%3Crect x='7' y='12' width='6' height='4.6' rx='1'/%3E%3C/g%3E%3Cg transform='translate(220,2)'%3E%3Crect x='5' y='5.4' width='10' height='7.4' rx='1'/%3E%3Cpath d='M8 5.4V3.8'/%3E%3Cpath d='M12 5.4V3.8'/%3E%3Cpath d='M8.4 9.6l3.2-2.6v5.2l-3.2-2.6z'/%3E%3C/g%3E%3Cg transform='translate(244,2)'%3E%3Crect x='4' y='3.6' width='12' height='13' rx='1'/%3E%3Cpath d='M4 13.4l3.2-3.2 2.6 2.4 2.6-2.2 3.6 3.6'/%3E%3C/g%3E%3Cg transform='translate(268,2)'%3E%3Cpath d='M10.4 3v9.6'/%3E%3Cpath d='M10.4 12.6c1.8 1.6 1 4.4-.4 5.4-1.6-1.2-2.2-3.9-.2-5.4'/%3E%3Cpath d='M8.8 3.8l-1.6-1'/%3E%3C/g%3E%3Cg transform='translate(292,2)'%3E%3Crect x='4' y='7.4' width='12' height='7.4' rx='2'/%3E%3Cpath d='M7.2 11.6a2.8 2.8 0 0 1 5.6 0'/%3E%3Ccircle cx='13.6' cy='9.4' r='.6'/%3E%3C/g%3E%3Cg transform='translate(316,2)'%3E%3Cpath d='M4.4 6.8h11.2l1.6 9.6H2.8z'/%3E%3Cpath d='M10 6.8v9.6'/%3E%3Cpath d='M4.4 12.8h11.2'/%3E%3C/g%3E%3Cg transform='translate(340,2)'%3E%3Cpath d='M10 2.8v14.4'/%3E%3Cpath d='M6.8 3.2l6.4-1.6'/%3E%3Cpath d='M7.4 5.4l6-1.2'/%3E%3Cpath d='M10 17.2c0 1.4-1.6 1.4-1.6 0'/%3E%3C/g%3E%3Cg transform='translate(364,2)'%3E%3Crect x='7.2' y='3' width='5.6' height='14' rx='2.4'/%3E%3Cpath d='M8.8 6.6h2.4'/%3E%3Cpath d='M8.8 9h2.4'/%3E%3C/g%3E%3Cg transform='translate(388,2)'%3E%3Cpath d='M4 13.8c0-2.2 1.4-3.4 3-3.4s3 1.2 3 3.4z'/%3E%3Cpath d='M12 13.8c0-2.2 1.4-3.4 3-3.4s3 1.2 3 3.4z'/%3E%3C/g%3E%3Cg transform='translate(412,2)'%3E%3Cpath d='M7 9.2c0-3.4 1.8-5.6 3-5.6s3 2.2 3 5.6'/%3E%3Cpath d='M5 12h10'/%3E%3Cpath d='M6 12l.6 3.2a3.4 3.4 0 0 0 6.8 0L14 12'/%3E%3Ccircle cx='10' cy='15.6' r='.8'/%3E%3C/g%3E%3Cg transform='translate(436,2)'%3E%3Crect x='5.4' y='3.6' width='9.2' height='13' rx='1'/%3E%3Ccircle cx='10' cy='7.2' r='1.1'/%3E%3Cpath d='M7.6 11.8c0-1.4 1-2 2.4-2s2.4.6 2.4 2'/%3E%3Cpath d='M7.6 13.6c1.6.8 3.2.8 4.8 0'/%3E%3C/g%3E%3Cg transform='translate(460,2)'%3E%3Cpath d='M5.8 6.4c3.6-2.4 8.6-2.4 12.4.2'/%3E%3Ccircle cx='5.2' cy='8.4' r='1.2'/%3E%3Ccircle cx='10.4' cy='5.6' r='1.2'/%3E%3Ccircle cx='15.6' cy='7.2' r='1.2'/%3E%3Cpath d='M17.2 10c-.2 1.4-1.4 2.4-2.6 2.4'/%3E%3C/g%3E%3Cg transform='translate(484,2)'%3E%3Ccircle cx='10' cy='5.2' r='2.4'/%3E%3Cpath d='M5 17.2c.6-3 2.2-4.6 5-4.6s4.4 1.6 5 4.6z'/%3E%3C/g%3E%3Cg transform='translate(508,2)'%3E%3Ccircle cx='9' cy='4.6' r='1.3'/%3E%3Cpath d='M5.4 16.4c.4-3.2 1.8-5.2 4-6.2 2.8-1.2 5 .4 4 3-1 2.4-3 3.2-5 3.2'/%3E%3C/g%3E%3Cg transform='translate(532,2)'%3E%3Ccircle cx='10' cy='8.8' r='4.2'/%3E%3Cpath d='M4.6 10.8c-1.6 2-.2 4.6.6 6'/%3E%3Cpath d='M15.4 10.8c1.6 2 .2 4.6-.6 6'/%3E%3Ccircle cx='8.2' cy='8' r='.7'/%3E%3Ccircle cx='11.8' cy='8' r='.7'/%3E%3Cpath d='M8.2 11.6c1 .9 2.6.9 3.6 0'/%3E%3C/g%3E%3Cg transform='translate(556,2)'%3E%3Ccircle cx='10' cy='5' r='2.2'/%3E%3Cpath d='M4.4 17c.6-3.4 2.4-5.2 5.6-5.2s5 1.8 5.6 5.2'/%3E%3Cpath d='M8.6 12.6l-1.8 4.4'/%3E%3Cpath d='M11.4 12.6l1.8 4.4'/%3E%3C/g%3E%3Cg transform='translate(580,2)'%3E%3Ccircle cx='10' cy='4.6' r='1.9'/%3E%3Cpath d='M10 6.6c0 1.2.6 1.8 1.4 2.4.8.6 1.4 1.4 1.6 2.6'/%3E%3Cpath d='M14 14.4l2.4 2.6'/%3E%3C/g%3E%3Cg transform='translate(604,2)'%3E%3Cpath d='M5.4 12.4c-1.8-2.4-.8-4.8 1.2-4.8.8 0 1.4.4 2 1 1-1.3 3-1.3 4 0 .6-.6 1.2-1 2-1 2 0 3 2.4 1.2 4.8'/%3E%3Ccircle cx='5.2' cy='12.4' r='1.3'/%3E%3Ccircle cx='14.8' cy='12.4' r='1.3'/%3E%3C/g%3E%3Cg transform='translate(628,2)'%3E%3Cpath d='M4.4 9.6L10 5l5.6 4.6'/%3E%3Cpath d='M6 9.6V16h8V9.6'/%3E%3Cpath d='M9 16v-3h2v3'/%3E%3C/g%3E%3Cg transform='translate(652,2)'%3E%3Cpath d='M3.4 7h13.2l-1.6 7.4H5z'/%3E%3Cpath d='M5 8h10'/%3E%3Cpath d='M7.6 5.4l-.6-1.4'/%3E%3Cpath d='M12.4 5.4l.6-1.4'/%3E%3C/g%3E%3Cg transform='translate(676,2)'%3E%3Crect x='6.4' y='3.4' width='7.2' height='13.4' rx='1.2'/%3E%3Cpath d='M8.4 4.8h3.2'/%3E%3Cpath d='M9.2 15.4h1.6'/%3E%3Cpath d='M13.6 6.4l1.8-1'/%3E%3Cpath d='M14.6 8.4l1.4-.6'/%3E%3C/g%3E%3Cg transform='translate(700,2)'%3E%3Cpath d='M4 9.2c2-2.2 4-2.4 6-.6 2-1.8 4-1.6 6 .6-1.4 1-2.4 2.4-3.2 4.6H7.2C6.4 11.6 5.4 10.2 4 9.2z'/%3E%3Cpath d='M7.4 13.2h5.2'/%3E%3C/g%3E%3Cg transform='translate(724,2)'%3E%3Cpath d='M6.6 8.6h6.8'/%3E%3Cpath d='M6.6 8.6c0 2 1.4 3.6 3.4 3.6s3.4-1.6 3.4-3.6'/%3E%3Cpath d='M8 12.2l-.8 2.6'/%3E%3Cpath d='M12 12.2l.8 2.6'/%3E%3Cpath d='M8.4 8.6V7.2'/%3E%3Cpath d='M11.6 8.6V7.2'/%3E%3Cpath d='M7.4 7.2h5.2l.8 1.4H6.6z'/%3E%3Cpath d='M9.4 6.4c-.3-.8.1-1.6 1-1.6'/%3E%3C/g%3E%3Cg transform='translate(748,2)'%3E%3Cpath d='M6.8 3.6h6.4'/%3E%3Cpath d='M6.8 3.6c0 4-.8 5.8-.8 8.8a4 4 0 0 0 8 0c0-3-.8-4.8-.8-8.8'/%3E%3Ccircle cx='8.4' cy='10.6' r='.7' fill='%23b52b27' stroke='none'/%3E%3Ccircle cx='11.6' cy='10.6' r='.7' fill='%23b52b27' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(772,2)'%3E%3Crect x='5.2' y='3.8' width='9.6' height='12.6' rx='1'/%3E%3Cpath d='M7.2 6.6h5.6'/%3E%3Cpath d='M7.2 9h5.6'/%3E%3Cpath d='M8.4 11.4h3.2'/%3E%3C/g%3E%3Cg transform='translate(796,2)'%3E%3Ccircle cx='10' cy='9' r='4.4'/%3E%3Cpath d='M8 9h4'/%3E%3Cpath d='M10 7v4'/%3E%3C/g%3E%3Cg transform='translate(820,2)'%3E%3Crect x='8.2' y='4.6' width='3.6' height='11.6' rx='.8'/%3E%3Cpath d='M8.8 4.6L10 3l1.2 1.6'/%3E%3Crect x='9.2' y='8.4' width='1.6' height='2.6' rx='.4'/%3E%3C/g%3E%3Cg transform='translate(844,2)'%3E%3Cpath d='M7.4 2.8h5.2l-.8 2.4.8 2.4-.8 2.4.8 2.4-.8 2.4.8 2.4h-5.2z'/%3E%3Cpath d='M8.4 5.2l3-1'/%3E%3Cpath d='M8.4 7.6l3 1'/%3E%3Cpath d='M8.4 10l3-1'/%3E%3C/g%3E%3Cg transform='translate(868,2)'%3E%3Crect x='4.4' y='4.8' width='11.2' height='10.6' rx='1'/%3E%3Cpath d='M4.4 10.2h11.2'/%3E%3Ccircle cx='6.6' cy='7.2' r='.8'/%3E%3Ccircle cx='10' cy='7.2' r='.8'/%3E%3Ccircle cx='13.4' cy='7.2' r='.8'/%3E%3Ccircle cx='6.6' cy='12.6' r='.8'/%3E%3Ccircle cx='10' cy='12.6' r='.8'/%3E%3Ccircle cx='13.4' cy='12.6' r='.8'/%3E%3C/g%3E%3Cg transform='translate(892,2)'%3E%3Cpath d='M10 2.6v14.4'/%3E%3Cpath d='M8.4 17h3.2'/%3E%3Ccircle cx='10' cy='2.6' r='.9' fill='%23b52b27' stroke='none'/%3E%3C/g%3E%3C/svg%3E"); background-size:contain;background-repeat:no-repeat;background-position:center bottom;} body.no-ambient::after{display:none;} body.light-mode::after{opacity:.09;filter:saturate(.85);} @media(max-width:1000px){body::after{display:none;}} /* ============================================================ v15 · 器物满堂·补遗 (全组件收尾: 骨架/章头/截图/图格/弹层/表格) 新增: 侧栏红绸 顶栏金线 页脚红金线 章头红绫双线 步骤铜钱 截图画框 经卷书脊 骨签洞察 木案底航 朱批高亮 玉珠传记 铜面关闭钮 金顶关系链 铜座播放器 金环图例 玉缘关系chip 朱砂表头 香灰空态 金环封面 ============================================================ */ /* ---- A. 骨架 ---- */ /* 侧栏: 红绸竖纹 + 金缘 */ .sidebar{background:linear-gradient(180deg,#140606,#1a0a0a 45%,#0d0505),repeating-linear-gradient(90deg,rgba(196,30,30,.05) 0 2px,transparent 2px 7px); border-right-color:rgba(212,168,75,.16);} body.light-mode .sidebar{background:linear-gradient(180deg,#f7ecd8,#f2e3c6 45%,#ead7b4),repeating-linear-gradient(90deg,rgba(165,43,39,.04) 0 2px,transparent 2px 7px); border-right-color:#d2c0a0;} .sidebar-divider{background:linear-gradient(90deg,transparent,rgba(212,168,75,.45),transparent);} .sidebar-btn{position:relative;} .sidebar-btn::before{content:'';position:absolute;left:-1px;top:8px;bottom:8px;width:2px;border-radius:2px; background:linear-gradient(180deg,#c41e1e,#d4a84b);opacity:0;transition:opacity .2s;pointer-events:none;} .sidebar-btn:hover::before,.sidebar-btn.active::before{opacity:1;} /* 顶栏: 底缘金线 + 题名朱光 */ .top-bar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(212,168,75,.5),transparent);} .top-bar-title h1{text-shadow:0 0 14px rgba(196,30,30,.35);} body.light-mode .top-bar-title h1{text-shadow:0 0 12px rgba(165,43,39,.25);} /* 页脚: 红金上缘线 */ .footer{position:relative;padding-top:34px;} .footer::before{content:'';position:absolute;top:16px;left:50%;transform:translateX(-50%); width:min(420px,70%);height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(196,30,30,.55),rgba(212,168,75,.7),rgba(196,30,30,.55),transparent);} /* ---- B. 章节层 ---- */ /* 章头: 左红绫 + 红金双线 */ .chapter-header{position:relative;padding-left:14px; border-bottom:1px solid rgba(212,168,75,.3);box-shadow:0 3px 0 -1px rgba(196,30,30,.35);} .chapter-header::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;pointer-events:none; background:linear-gradient(180deg,#c41e1e,#d4a84b);} body.light-mode .chapter-header{border-bottom-color:rgba(154,116,38,.35);box-shadow:0 3px 0 -1px rgba(165,43,39,.3);} /* 底部章节导航: 木案面 */ .chapter-nav-bottom{box-shadow:inset 0 1px 0 rgba(255,235,200,.05),0 6px 16px rgba(0,0,0,.22);} /* ---- C. 内容组件 ---- */ /* 步骤号: 铜钱錾金环 */ .step-num{box-shadow:inset 0 0 0 2px rgba(212,168,75,.3),inset 0 0 0 3px rgba(0,0,0,.3),0 0 8px rgba(196,30,30,.35);} body.light-mode .step-num{box-shadow:inset 0 0 0 2px rgba(154,116,38,.35),inset 0 0 0 3px rgba(120,60,20,.25),0 0 8px rgba(165,43,39,.3);} /* 截图: 画卷装裱双框线 */ .shot-item img{box-shadow:0 0 0 1px rgba(212,168,75,.35),0 0 0 4px #241010,0 0 0 5px rgba(212,168,75,.2),0 8px 22px rgba(0,0,0,.45);} .shot-item img:hover{box-shadow:0 0 0 1px rgba(227,195,109,.7),0 0 0 4px #241010,0 0 0 5px rgba(227,195,109,.4),0 10px 26px rgba(0,0,0,.5);} body.light-mode .shot-item img{box-shadow:0 0 0 1px rgba(142,104,41,.3),0 0 0 4px #f2e3c6,0 0 0 5px rgba(142,104,41,.18),0 8px 20px rgba(74,48,25,.3);} /* 快速参考: 经卷书脊 */ .quick-ref{box-shadow:inset 4px 0 0 rgba(212,168,75,.2),inset 0 1px rgba(255,235,200,.03),0 8px 20px rgba(0,0,0,.18);} .quick-ref-head h3{padding-left:10px;border-left:2px solid rgba(212,168,75,.5);} body.light-mode .quick-ref{box-shadow:inset 4px 0 0 rgba(154,116,38,.18),inset 0 1px rgba(255,255,255,.5),0 6px 16px rgba(74,48,25,.12);} body.light-mode .quick-ref-head h3{border-left-color:rgba(154,116,38,.45);} /* 洞察: 骨签朱头 */ .insight-point{border-left:3px solid rgba(196,30,30,.45);} .insight-point:hover{border-color:rgba(212,168,75,.5);} /* 搜索高亮: 朱批下划线 */ .search-hit{box-shadow:inset 0 -2px 0 rgba(196,30,30,.45);} /* 播放器: 铜座 */ .music-card audio{width:100%;border-radius:8px;box-shadow:0 0 0 1px rgba(212,168,75,.28),0 4px 12px rgba(0,0,0,.3);} /* 提示签: 金灰竹缘 */ .rt-tip,.zoom-hint2{border-color:rgba(212,168,75,.22) !important;} /* 空态: 香灰虚线框 */ .empty-note{border:1px dashed rgba(212,168,75,.22);border-radius:10px;margin:14px;} body.light-mode .empty-note{border-color:rgba(154,116,38,.2);} /* ---- D. 图谱页 ---- */ /* 人物传记条目: 玉珠 + 金线 */ .bio-item::before{content:'';position:absolute;left:-5px;top:16px;width:7px;height:7px;border-radius:50%;pointer-events:none; background:radial-gradient(circle at 35% 30%,#c8e0d4,#5f947d 70%);} body.light-mode .bio-item::before{background:radial-gradient(circle at 35% 30%,#dff0e8,#8fb8a8 70%);} /* 关系chip: 玉缘 */ .rel-chip{border-color:rgba(127,184,159,.4) !important;} body.light-mode .rel-chip{border-color:rgba(95,148,125,.4) !important;} /* 关系链卡: 金顶线 */ .chain-card{box-shadow:inset 0 2px 0 rgba(212,168,75,.28),0 6px 16px rgba(0,0,0,.2);} /* 图例: 金环 */ .legend-dot{box-shadow:0 0 0 2px rgba(212,168,75,.22);} /* 弹层关闭: 铜面圆钮 */ .modal-close{background:linear-gradient(180deg,#c8a878,#8a6a48 60%,#5e4228) !important;color:#f0e0c0 !important; border:1px solid rgba(120,90,50,.7) !important;} body.light-mode .modal-close{background:linear-gradient(180deg,#d8b888,#b09068 60%,#8a6a48) !important;color:#3d2b1a !important; border-color:rgba(140,100,60,.55) !important;} /* 弹层说明: 笺纸金脊 */ .modal-desc{box-shadow:inset 3px 0 0 rgba(212,168,75,.15);} /* ---- E. 关于页 ---- */ .evo-item{box-shadow:inset 0 2px 0 rgba(212,168,75,.25);} .table-wrap th{background:rgba(196,30,30,.13) !important;color:#e8c86a !important;} .table-wrap td{border-top:1px solid rgba(212,168,75,.14) !important;} /* ---- F. 启动器 ---- */ /* 封面: 金线内框 */ .game-cover{box-shadow:inset 0 0 0 1px rgba(212,168,75,.15);} body.light-mode .game-cover{box-shadow:inset 0 0 0 1px rgba(154,116,38,.18);} /* ============================================================ v16 · 顶栏签钮 (六页导航统一: 全局搜索=铜镜 / 关于=朱砂印) 覆盖内联 gold-dim 背景与页面红底药丸,双主题。 ============================================================ */ a.nav-search{position:relative;border:1px solid rgba(212,168,75,.45) !important; border-radius:6px !important;letter-spacing:.06em !important;font-family:var(--font-kai) !important; box-shadow:inset 0 0 0 1px rgba(212,168,75,.08),inset 0 1px rgba(255,255,255,.07),0 2px 6px rgba(0,0,0,.28) !important;} /* 全局搜索 → 铜镜面 + 三颗镜钉 */ a.nav-search[href$="全局搜索.html"]{background: radial-gradient(circle at 30% 30%,rgba(255,255,255,.09),transparent 52%), radial-gradient(circle at 68% 62%,rgba(212,168,75,.22) 0 1.5px,transparent 2.5px), radial-gradient(circle at 34% 66%,rgba(212,168,75,.16) 0 1.5px,transparent 2.5px), linear-gradient(180deg,#c8a878,#8a6a48 58%,#5e4228) !important; color:#f4e8cc !important;border-color:rgba(120,90,50,.75) !important;} a.nav-search[href$="全局搜索.html"]:hover{background: radial-gradient(circle at 30% 30%,rgba(255,255,255,.14),transparent 52%), radial-gradient(circle at 68% 62%,rgba(212,168,75,.3) 0 1.5px,transparent 2.5px), radial-gradient(circle at 34% 66%,rgba(212,168,75,.22) 0 1.5px,transparent 2.5px), linear-gradient(180deg,#d8b888,#9a7a58 58%,#6e5238) !important; box-shadow:inset 0 0 0 1px rgba(212,168,75,.14),0 0 10px rgba(212,168,75,.25) !important;} /* 关于 → 朱砂印 */ a.nav-search[href$="关于.html"]{background: radial-gradient(circle at 50% 24%,rgba(255,200,180,.14),transparent 50%), linear-gradient(180deg,#9a2620,#6e1813 58%,#581008) !important; color:#f8e8c8 !important;border-color:rgba(212,168,75,.55) !important;} a.nav-search[href$="关于.html"]:hover{background: radial-gradient(circle at 50% 24%,rgba(255,210,190,.2),transparent 50%), linear-gradient(180deg,#b03028,#7e1f18 58%,#641410) !important; box-shadow:0 0 10px rgba(196,30,30,.35) !important;} /* 当前页签: 金边上浮 */ a.nav-search.active{transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(227,195,109,.35),0 0 10px rgba(212,168,75,.3),0 2px 6px rgba(0,0,0,.3) !important;} /* 浅色 */ body.light-mode a.nav-search{border-color:rgba(154,116,38,.5) !important; box-shadow:inset 0 0 0 1px rgba(154,116,38,.1),inset 0 1px rgba(255,255,255,.55),0 2px 5px rgba(74,48,25,.12) !important;} body.light-mode a.nav-search[href$="全局搜索.html"]{background: radial-gradient(circle at 30% 30%,rgba(255,255,255,.4),transparent 52%), linear-gradient(180deg,#d8b888,#b09068 58%,#8a6a48) !important; color:#3d2b1a !important;border-color:rgba(140,100,60,.6) !important;} body.light-mode a.nav-search[href$="关于.html"]{background: radial-gradient(circle at 50% 24%,rgba(255,210,190,.25),transparent 50%), linear-gradient(180deg,#a83a30,#8a2820 58%,#6e1c16) !important; color:#fdf0e0 !important;border-color:rgba(154,116,38,.55) !important;} /* ============================================================ v17 · 万象纹章 (每部游戏专属器物纹样) body[data-game] 分配: hub=囍·灯笼 zjy1=鸳鸯·冥陀兰 zjy2=奘铃·阴阳鱼 zjy3=鸳鸯·灯笼 zjy4=同心结·囍 zjy5/6=云纹·灯笼/囍 zjy7=回纹·阴阳鱼 zjy8=囍·同心结 zjy9=阴阳鱼·回纹 shisan=心电·回纹 卡片右上主纹/左下辅纹水印 + 顶缘朱金线 + 顶栏红线 + 按钮双线描金 ============================================================ */ :root{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ctext%20x%3D%2712%27%20y%3D%2717.8%27%20font-size%3D%2718%27%20text-anchor%3D%27middle%27%20font-family%3D%27KaiTi%2CSTKaiti%2Cserif%27%20fill%3D%27%23e3c36d%27%20fill-opacity%3D%271%27%3E%E5%9B%8D%3C%2Ftext%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2028%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%202.4h8M10%202.4v2.4%27%2F%3E%3Cpath%20d%3D%27M6.4%204.8c-2.2%202.6-2.2%2015.6%200%2018.4h7.2c2.2-2.8%202.2-15.8%200-18.4%27%2F%3E%3Cpath%20d%3D%27M6.4%2023.2h7.2M10%2023.2v3.2%27%2F%3E%3Cpath%20d%3D%27M7.4%2027.4c.8-1%201.5-1.7%202.6-3%201.1%201.3%201.8%202%202.6%203%27%2F%3E%3Cpath%20d%3D%27M10%204.8v18.4%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ctext%20x%3D%2712%27%20y%3D%2717.8%27%20font-size%3D%2718%27%20text-anchor%3D%27middle%27%20font-family%3D%27KaiTi%2CSTKaiti%2Cserif%27%20fill%3D%27%23e3c36d%27%20fill-opacity%3D%270.11%27%3E%E5%9B%8D%3C%2Ftext%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2028%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%202.4h8M10%202.4v2.4%27%2F%3E%3Cpath%20d%3D%27M6.4%204.8c-2.2%202.6-2.2%2015.6%200%2018.4h7.2c2.2-2.8%202.2-15.8%200-18.4%27%2F%3E%3Cpath%20d%3D%27M6.4%2023.2h7.2M10%2023.2v3.2%27%2F%3E%3Cpath%20d%3D%27M7.4%2027.4c.8-1%201.5-1.7%202.6-3%201.1%201.3%201.8%202%202.6%203%27%2F%3E%3Cpath%20d%3D%27M10%204.8v18.4%27%2F%3E%3C%2Fsvg%3E");} [data-game="zjy1"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2030%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.3%207.4c.3-2.7%202.4-4.5%205-4.2%201.9.2%203.3%201.4%203.5%203M9.3%207.4c-.9.2-1.6.7-2%201.5%27%2F%3E%3Cpath%20d%3D%27M14%204.6c-.9%201-.9%202.3%200%203.3M14%207.9c.9%201.5%202.4%202.4%204.1%202.2%27%2F%3E%3Cpath%20d%3D%27M13.8%209.9c-2%20.3-3.7%201.5-4.8%203.4-.7%201.2-.9%202.6-.5%203.9%27%2F%3E%3Cpath%20d%3D%27M8.5%2017.2c.5%201.3%201.6%202.1%203%202M11.4%2019c.2-2.4%201-4.3%202.6-5.9%201.1-1%202.4-1.7%203.9-1.9%27%2F%3E%3Cpath%20d%3D%27M17.8%2012.4c2.4%201%204%202.7%204.6%205.1.3%201.2.2%202.5-.4%203.7M15.2%2015.2c.5.2%201%20.5%201.4%201%27%2F%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%278.7%27%20r%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M15.6%206.6l2.6-.6%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2022%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M11%202.2c.8%201.9%202.3%203%202.4%205.3%200%202.6-2.2%204.7-2.4%207.7-.2-3-2.4-5.1-2.4-7.7C8.7%205.2%2010.2%204.1%2011%202.2z%27%2F%3E%3Cpath%20d%3D%27M6.3%205.4c1.9%201%203.2%202.4%204%204.4-2.2.4-4.1%201.5-5.4%203.2M15.7%205.4c-1.9%201-3.2%202.4-4%204.4%202.2.4%204.1%201.5%205.4%203.2%27%2F%3E%3Cpath%20d%3D%27M3.8%2012.8c1.8.2%203.4%201%204.8%202.1M18.2%2012.8c-1.8.2-3.4%201-4.8%202.1%27%2F%3E%3Cpath%20d%3D%27M11%2015.2c1%201.5%201%203.3.1%204.9l-.1%202%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2030%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.3%207.4c.3-2.7%202.4-4.5%205-4.2%201.9.2%203.3%201.4%203.5%203M9.3%207.4c-.9.2-1.6.7-2%201.5%27%2F%3E%3Cpath%20d%3D%27M14%204.6c-.9%201-.9%202.3%200%203.3M14%207.9c.9%201.5%202.4%202.4%204.1%202.2%27%2F%3E%3Cpath%20d%3D%27M13.8%209.9c-2%20.3-3.7%201.5-4.8%203.4-.7%201.2-.9%202.6-.5%203.9%27%2F%3E%3Cpath%20d%3D%27M8.5%2017.2c.5%201.3%201.6%202.1%203%202M11.4%2019c.2-2.4%201-4.3%202.6-5.9%201.1-1%202.4-1.7%203.9-1.9%27%2F%3E%3Cpath%20d%3D%27M17.8%2012.4c2.4%201%204%202.7%204.6%205.1.3%201.2.2%202.5-.4%203.7M15.2%2015.2c.5.2%201%20.5%201.4%201%27%2F%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%278.7%27%20r%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M15.6%206.6l2.6-.6%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2022%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M11%202.2c.8%201.9%202.3%203%202.4%205.3%200%202.6-2.2%204.7-2.4%207.7-.2-3-2.4-5.1-2.4-7.7C8.7%205.2%2010.2%204.1%2011%202.2z%27%2F%3E%3Cpath%20d%3D%27M6.3%205.4c1.9%201%203.2%202.4%204%204.4-2.2.4-4.1%201.5-5.4%203.2M15.7%205.4c-1.9%201-3.2%202.4-4%204.4%202.2.4%204.1%201.5%205.4%203.2%27%2F%3E%3Cpath%20d%3D%27M3.8%2012.8c1.8.2%203.4%201%204.8%202.1M18.2%2012.8c-1.8.2-3.4%201-4.8%202.1%27%2F%3E%3Cpath%20d%3D%27M11%2015.2c1%201.5%201%203.3.1%204.9l-.1%202%27%2F%3E%3C%2Fsvg%3E");} [data-game="zjy2"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M8.4%202.8a1.6%201.6%200%201%201%203.2%200M8.6%204.8h2.8%27%2F%3E%3Cpath%20d%3D%27M7.4%208.6c0%202.4%201%204.4%202.4%206.2.9%201.1%201.2%202.4%201.2%203.8%200%201%20.8%201.8%201.8%201.8s1.8-.8%201.8-1.8c0-1.4.3-2.7%201.2-3.8%201.4-1.8%202.4-3.8%202.4-6.2%27%2F%3E%3Cpath%20d%3D%27M5.6%2010.6c1.4.8%202.8%201.2%204.4%201.2s3-.4%204.4-1.2%27%2F%3E%3Cpath%20d%3D%27M9.2%2019.8l.8-2.2M10.8%2019.8l-.8-2.2%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%201%200%200-20z%27%2F%3E%3Cpath%20d%3D%27M12%203.7a8.3%208.3%200%200%201%208.3%208.3A8.3%208.3%200%200%201%2012%2020.3%27%2F%3E%3Ccircle%20cx%3D%2716.6%27%20cy%3D%277.6%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%277.4%27%20cy%3D%2716.4%27%20r%3D%271.1%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M8.4%202.8a1.6%201.6%200%201%201%203.2%200M8.6%204.8h2.8%27%2F%3E%3Cpath%20d%3D%27M7.4%208.6c0%202.4%201%204.4%202.4%206.2.9%201.1%201.2%202.4%201.2%203.8%200%201%20.8%201.8%201.8%201.8s1.8-.8%201.8-1.8c0-1.4.3-2.7%201.2-3.8%201.4-1.8%202.4-3.8%202.4-6.2%27%2F%3E%3Cpath%20d%3D%27M5.6%2010.6c1.4.8%202.8%201.2%204.4%201.2s3-.4%204.4-1.2%27%2F%3E%3Cpath%20d%3D%27M9.2%2019.8l.8-2.2M10.8%2019.8l-.8-2.2%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%201%200%200-20z%27%2F%3E%3Cpath%20d%3D%27M12%203.7a8.3%208.3%200%200%201%208.3%208.3A8.3%208.3%200%200%201%2012%2020.3%27%2F%3E%3Ccircle%20cx%3D%2716.6%27%20cy%3D%277.6%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%277.4%27%20cy%3D%2716.4%27%20r%3D%271.1%27%2F%3E%3C%2Fsvg%3E");} [data-game="zjy3"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2030%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.3%207.4c.3-2.7%202.4-4.5%205-4.2%201.9.2%203.3%201.4%203.5%203M9.3%207.4c-.9.2-1.6.7-2%201.5%27%2F%3E%3Cpath%20d%3D%27M14%204.6c-.9%201-.9%202.3%200%203.3M14%207.9c.9%201.5%202.4%202.4%204.1%202.2%27%2F%3E%3Cpath%20d%3D%27M13.8%209.9c-2%20.3-3.7%201.5-4.8%203.4-.7%201.2-.9%202.6-.5%203.9%27%2F%3E%3Cpath%20d%3D%27M8.5%2017.2c.5%201.3%201.6%202.1%203%202M11.4%2019c.2-2.4%201-4.3%202.6-5.9%201.1-1%202.4-1.7%203.9-1.9%27%2F%3E%3Cpath%20d%3D%27M17.8%2012.4c2.4%201%204%202.7%204.6%205.1.3%201.2.2%202.5-.4%203.7M15.2%2015.2c.5.2%201%20.5%201.4%201%27%2F%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%278.7%27%20r%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M15.6%206.6l2.6-.6%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2028%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%202.4h8M10%202.4v2.4%27%2F%3E%3Cpath%20d%3D%27M6.4%204.8c-2.2%202.6-2.2%2015.6%200%2018.4h7.2c2.2-2.8%202.2-15.8%200-18.4%27%2F%3E%3Cpath%20d%3D%27M6.4%2023.2h7.2M10%2023.2v3.2%27%2F%3E%3Cpath%20d%3D%27M7.4%2027.4c.8-1%201.5-1.7%202.6-3%201.1%201.3%201.8%202%202.6%203%27%2F%3E%3Cpath%20d%3D%27M10%204.8v18.4%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2030%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.3%207.4c.3-2.7%202.4-4.5%205-4.2%201.9.2%203.3%201.4%203.5%203M9.3%207.4c-.9.2-1.6.7-2%201.5%27%2F%3E%3Cpath%20d%3D%27M14%204.6c-.9%201-.9%202.3%200%203.3M14%207.9c.9%201.5%202.4%202.4%204.1%202.2%27%2F%3E%3Cpath%20d%3D%27M13.8%209.9c-2%20.3-3.7%201.5-4.8%203.4-.7%201.2-.9%202.6-.5%203.9%27%2F%3E%3Cpath%20d%3D%27M8.5%2017.2c.5%201.3%201.6%202.1%203%202M11.4%2019c.2-2.4%201-4.3%202.6-5.9%201.1-1%202.4-1.7%203.9-1.9%27%2F%3E%3Cpath%20d%3D%27M17.8%2012.4c2.4%201%204%202.7%204.6%205.1.3%201.2.2%202.5-.4%203.7M15.2%2015.2c.5.2%201%20.5%201.4%201%27%2F%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%278.7%27%20r%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M15.6%206.6l2.6-.6%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2028%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%202.4h8M10%202.4v2.4%27%2F%3E%3Cpath%20d%3D%27M6.4%204.8c-2.2%202.6-2.2%2015.6%200%2018.4h7.2c2.2-2.8%202.2-15.8%200-18.4%27%2F%3E%3Cpath%20d%3D%27M6.4%2023.2h7.2M10%2023.2v3.2%27%2F%3E%3Cpath%20d%3D%27M7.4%2027.4c.8-1%201.5-1.7%202.6-3%201.1%201.3%201.8%202%202.6%203%27%2F%3E%3Cpath%20d%3D%27M10%204.8v18.4%27%2F%3E%3C%2Fsvg%3E");} [data-game="zjy4"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2022%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.8c-3.3%200-5.8%202.3-5.8%205.2%200%202.9%202.5%204.8%205.8%204.8s5.8-1.9%205.8-4.8c0-2.9-2.5-5.2-5.8-5.2z%27%2F%3E%3Cpath%20d%3D%27M12%204.8c1.5-1.7%203.9-1.7%205.2-.3M12%2014.8c-1.5%201.7-3.9%201.7-5.2.3%27%2F%3E%3Cpath%20d%3D%27M8%2019.2c1-1.1%201.7-1.6%202.6-2.6%201%201%201.7%201.5%202.6%202.6%27%2F%3E%3Cpath%20d%3D%27M5.8%2010h2M16.2%2010h2%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ctext%20x%3D%2712%27%20y%3D%2717.8%27%20font-size%3D%2718%27%20text-anchor%3D%27middle%27%20font-family%3D%27KaiTi%2CSTKaiti%2Cserif%27%20fill%3D%27%23e3c36d%27%20fill-opacity%3D%271%27%3E%E5%9B%8D%3C%2Ftext%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2022%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.8c-3.3%200-5.8%202.3-5.8%205.2%200%202.9%202.5%204.8%205.8%204.8s5.8-1.9%205.8-4.8c0-2.9-2.5-5.2-5.8-5.2z%27%2F%3E%3Cpath%20d%3D%27M12%204.8c1.5-1.7%203.9-1.7%205.2-.3M12%2014.8c-1.5%201.7-3.9%201.7-5.2.3%27%2F%3E%3Cpath%20d%3D%27M8%2019.2c1-1.1%201.7-1.6%202.6-2.6%201%201%201.7%201.5%202.6%202.6%27%2F%3E%3Cpath%20d%3D%27M5.8%2010h2M16.2%2010h2%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ctext%20x%3D%2712%27%20y%3D%2717.8%27%20font-size%3D%2718%27%20text-anchor%3D%27middle%27%20font-family%3D%27KaiTi%2CSTKaiti%2Cserif%27%20fill%3D%27%23e3c36d%27%20fill-opacity%3D%270.11%27%3E%E5%9B%8D%3C%2Ftext%3E%3C%2Fsvg%3E");} [data-game="zjy5"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2014%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3.4%207.6c0-2.6%202.1-4.6%204.7-4.6%203.1%200%204.7%202.2%204.7%205%200%202.3-1.9%203.6-4.1%203-1.4-.4-1.8-1.6-.6-2.6%27%2F%3E%3Cpath%20d%3D%27M13.2%203.4c2.9-1.5%205.7-.6%206.3%202.4.4%202.4-1.3%204.1-3.7%204.1-1.8%200-3-1.2-2.9-2.8%27%2F%3E%3Ccircle%20cx%3D%275.6%27%20cy%3D%277.4%27%20r%3D%27.8%27%2F%3E%3Ccircle%20cx%3D%2716.4%27%20cy%3D%276%27%20r%3D%27.8%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2028%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%202.4h8M10%202.4v2.4%27%2F%3E%3Cpath%20d%3D%27M6.4%204.8c-2.2%202.6-2.2%2015.6%200%2018.4h7.2c2.2-2.8%202.2-15.8%200-18.4%27%2F%3E%3Cpath%20d%3D%27M6.4%2023.2h7.2M10%2023.2v3.2%27%2F%3E%3Cpath%20d%3D%27M7.4%2027.4c.8-1%201.5-1.7%202.6-3%201.1%201.3%201.8%202%202.6%203%27%2F%3E%3Cpath%20d%3D%27M10%204.8v18.4%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2014%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3.4%207.6c0-2.6%202.1-4.6%204.7-4.6%203.1%200%204.7%202.2%204.7%205%200%202.3-1.9%203.6-4.1%203-1.4-.4-1.8-1.6-.6-2.6%27%2F%3E%3Cpath%20d%3D%27M13.2%203.4c2.9-1.5%205.7-.6%206.3%202.4.4%202.4-1.3%204.1-3.7%204.1-1.8%200-3-1.2-2.9-2.8%27%2F%3E%3Ccircle%20cx%3D%275.6%27%20cy%3D%277.4%27%20r%3D%27.8%27%2F%3E%3Ccircle%20cx%3D%2716.4%27%20cy%3D%276%27%20r%3D%27.8%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2028%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%202.4h8M10%202.4v2.4%27%2F%3E%3Cpath%20d%3D%27M6.4%204.8c-2.2%202.6-2.2%2015.6%200%2018.4h7.2c2.2-2.8%202.2-15.8%200-18.4%27%2F%3E%3Cpath%20d%3D%27M6.4%2023.2h7.2M10%2023.2v3.2%27%2F%3E%3Cpath%20d%3D%27M7.4%2027.4c.8-1%201.5-1.7%202.6-3%201.1%201.3%201.8%202%202.6%203%27%2F%3E%3Cpath%20d%3D%27M10%204.8v18.4%27%2F%3E%3C%2Fsvg%3E");} [data-game="zjy6"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2014%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3.4%207.6c0-2.6%202.1-4.6%204.7-4.6%203.1%200%204.7%202.2%204.7%205%200%202.3-1.9%203.6-4.1%203-1.4-.4-1.8-1.6-.6-2.6%27%2F%3E%3Cpath%20d%3D%27M13.2%203.4c2.9-1.5%205.7-.6%206.3%202.4.4%202.4-1.3%204.1-3.7%204.1-1.8%200-3-1.2-2.9-2.8%27%2F%3E%3Ccircle%20cx%3D%275.6%27%20cy%3D%277.4%27%20r%3D%27.8%27%2F%3E%3Ccircle%20cx%3D%2716.4%27%20cy%3D%276%27%20r%3D%27.8%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ctext%20x%3D%2712%27%20y%3D%2717.8%27%20font-size%3D%2718%27%20text-anchor%3D%27middle%27%20font-family%3D%27KaiTi%2CSTKaiti%2Cserif%27%20fill%3D%27%23e3c36d%27%20fill-opacity%3D%271%27%3E%E5%9B%8D%3C%2Ftext%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2014%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3.4%207.6c0-2.6%202.1-4.6%204.7-4.6%203.1%200%204.7%202.2%204.7%205%200%202.3-1.9%203.6-4.1%203-1.4-.4-1.8-1.6-.6-2.6%27%2F%3E%3Cpath%20d%3D%27M13.2%203.4c2.9-1.5%205.7-.6%206.3%202.4.4%202.4-1.3%204.1-3.7%204.1-1.8%200-3-1.2-2.9-2.8%27%2F%3E%3Ccircle%20cx%3D%275.6%27%20cy%3D%277.4%27%20r%3D%27.8%27%2F%3E%3Ccircle%20cx%3D%2716.4%27%20cy%3D%276%27%20r%3D%27.8%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ctext%20x%3D%2712%27%20y%3D%2717.8%27%20font-size%3D%2718%27%20text-anchor%3D%27middle%27%20font-family%3D%27KaiTi%2CSTKaiti%2Cserif%27%20fill%3D%27%23e3c36d%27%20fill-opacity%3D%270.11%27%3E%E5%9B%8D%3C%2Ftext%3E%3C%2Fsvg%3E");} [data-game="zjy7"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%206%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.2%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27square%27%3E%3Cpath%20d%3D%27M1%201h8v3.4h-4V2.2h1.6M11%201h8v3.4h-4V2.2h1.6M21%201h2v3.4h-2V2.2%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%201%200%200-20z%27%2F%3E%3Cpath%20d%3D%27M12%203.7a8.3%208.3%200%200%201%208.3%208.3A8.3%208.3%200%200%201%2012%2020.3%27%2F%3E%3Ccircle%20cx%3D%2716.6%27%20cy%3D%277.6%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%277.4%27%20cy%3D%2716.4%27%20r%3D%271.1%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%206%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.2%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27square%27%3E%3Cpath%20d%3D%27M1%201h8v3.4h-4V2.2h1.6M11%201h8v3.4h-4V2.2h1.6M21%201h2v3.4h-2V2.2%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%201%200%200-20z%27%2F%3E%3Cpath%20d%3D%27M12%203.7a8.3%208.3%200%200%201%208.3%208.3A8.3%208.3%200%200%201%2012%2020.3%27%2F%3E%3Ccircle%20cx%3D%2716.6%27%20cy%3D%277.6%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%277.4%27%20cy%3D%2716.4%27%20r%3D%271.1%27%2F%3E%3C%2Fsvg%3E");} [data-game="zjy8"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ctext%20x%3D%2712%27%20y%3D%2717.8%27%20font-size%3D%2718%27%20text-anchor%3D%27middle%27%20font-family%3D%27KaiTi%2CSTKaiti%2Cserif%27%20fill%3D%27%23e3c36d%27%20fill-opacity%3D%271%27%3E%E5%9B%8D%3C%2Ftext%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2022%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.8c-3.3%200-5.8%202.3-5.8%205.2%200%202.9%202.5%204.8%205.8%204.8s5.8-1.9%205.8-4.8c0-2.9-2.5-5.2-5.8-5.2z%27%2F%3E%3Cpath%20d%3D%27M12%204.8c1.5-1.7%203.9-1.7%205.2-.3M12%2014.8c-1.5%201.7-3.9%201.7-5.2.3%27%2F%3E%3Cpath%20d%3D%27M8%2019.2c1-1.1%201.7-1.6%202.6-2.6%201%201%201.7%201.5%202.6%202.6%27%2F%3E%3Cpath%20d%3D%27M5.8%2010h2M16.2%2010h2%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ctext%20x%3D%2712%27%20y%3D%2717.8%27%20font-size%3D%2718%27%20text-anchor%3D%27middle%27%20font-family%3D%27KaiTi%2CSTKaiti%2Cserif%27%20fill%3D%27%23e3c36d%27%20fill-opacity%3D%270.11%27%3E%E5%9B%8D%3C%2Ftext%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2022%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.8c-3.3%200-5.8%202.3-5.8%205.2%200%202.9%202.5%204.8%205.8%204.8s5.8-1.9%205.8-4.8c0-2.9-2.5-5.2-5.8-5.2z%27%2F%3E%3Cpath%20d%3D%27M12%204.8c1.5-1.7%203.9-1.7%205.2-.3M12%2014.8c-1.5%201.7-3.9%201.7-5.2.3%27%2F%3E%3Cpath%20d%3D%27M8%2019.2c1-1.1%201.7-1.6%202.6-2.6%201%201%201.7%201.5%202.6%202.6%27%2F%3E%3Cpath%20d%3D%27M5.8%2010h2M16.2%2010h2%27%2F%3E%3C%2Fsvg%3E");} [data-game="zjy9"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%201%200%200-20z%27%2F%3E%3Cpath%20d%3D%27M12%203.7a8.3%208.3%200%200%201%208.3%208.3A8.3%208.3%200%200%201%2012%2020.3%27%2F%3E%3Ccircle%20cx%3D%2716.6%27%20cy%3D%277.6%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%277.4%27%20cy%3D%2716.4%27%20r%3D%271.1%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%206%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.2%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27square%27%3E%3Cpath%20d%3D%27M1%201h8v3.4h-4V2.2h1.6M11%201h8v3.4h-4V2.2h1.6M21%201h2v3.4h-2V2.2%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%201%200%200-20z%27%2F%3E%3Cpath%20d%3D%27M12%203.7a8.3%208.3%200%200%201%208.3%208.3A8.3%208.3%200%200%201%2012%2020.3%27%2F%3E%3Ccircle%20cx%3D%2716.6%27%20cy%3D%277.6%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%277.4%27%20cy%3D%2716.4%27%20r%3D%271.1%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%206%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.2%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27square%27%3E%3Cpath%20d%3D%27M1%201h8v3.4h-4V2.2h1.6M11%201h8v3.4h-4V2.2h1.6M21%201h2v3.4h-2V2.2%27%2F%3E%3C%2Fsvg%3E");} [data-game="shisan"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2014%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1%207h4.6l2.2-4.2%202.9%208.4L13.4%207H23%27%2F%3E%3Cpath%20d%3D%27M18.8%201.6v3.4M17.1%203.3h3.4%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%206%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.2%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27square%27%3E%3Cpath%20d%3D%27M1%201h8v3.4h-4V2.2h1.6M11%201h8v3.4h-4V2.2h1.6M21%201h2v3.4h-2V2.2%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2014%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1%207h4.6l2.2-4.2%202.9%208.4L13.4%207H23%27%2F%3E%3Cpath%20d%3D%27M18.8%201.6v3.4M17.1%203.3h3.4%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%206%27%20fill%3D%27none%27%20stroke%3D%27%23e3c36d%27%20stroke-width%3D%271.2%27%20stroke-opacity%3D%270.11%27%20stroke-linecap%3D%27square%27%3E%3Cpath%20d%3D%27M1%201h8v3.4h-4V2.2h1.6M11%201h8v3.4h-4V2.2h1.6M21%201h2v3.4h-2V2.2%27%2F%3E%3C%2Fsvg%3E");} body.light-mode{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ctext%20x%3D%2712%27%20y%3D%2717.8%27%20font-size%3D%2718%27%20text-anchor%3D%27middle%27%20font-family%3D%27KaiTi%2CSTKaiti%2Cserif%27%20fill%3D%27%238a5a2a%27%20fill-opacity%3D%271%27%3E%E5%9B%8D%3C%2Ftext%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2028%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%202.4h8M10%202.4v2.4%27%2F%3E%3Cpath%20d%3D%27M6.4%204.8c-2.2%202.6-2.2%2015.6%200%2018.4h7.2c2.2-2.8%202.2-15.8%200-18.4%27%2F%3E%3Cpath%20d%3D%27M6.4%2023.2h7.2M10%2023.2v3.2%27%2F%3E%3Cpath%20d%3D%27M7.4%2027.4c.8-1%201.5-1.7%202.6-3%201.1%201.3%201.8%202%202.6%203%27%2F%3E%3Cpath%20d%3D%27M10%204.8v18.4%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ctext%20x%3D%2712%27%20y%3D%2717.8%27%20font-size%3D%2718%27%20text-anchor%3D%27middle%27%20font-family%3D%27KaiTi%2CSTKaiti%2Cserif%27%20fill%3D%27%238a5a2a%27%20fill-opacity%3D%270.16%27%3E%E5%9B%8D%3C%2Ftext%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2028%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%202.4h8M10%202.4v2.4%27%2F%3E%3Cpath%20d%3D%27M6.4%204.8c-2.2%202.6-2.2%2015.6%200%2018.4h7.2c2.2-2.8%202.2-15.8%200-18.4%27%2F%3E%3Cpath%20d%3D%27M6.4%2023.2h7.2M10%2023.2v3.2%27%2F%3E%3Cpath%20d%3D%27M7.4%2027.4c.8-1%201.5-1.7%202.6-3%201.1%201.3%201.8%202%202.6%203%27%2F%3E%3Cpath%20d%3D%27M10%204.8v18.4%27%2F%3E%3C%2Fsvg%3E");} body.light-mode[data-game="zjy1"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2030%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.3%207.4c.3-2.7%202.4-4.5%205-4.2%201.9.2%203.3%201.4%203.5%203M9.3%207.4c-.9.2-1.6.7-2%201.5%27%2F%3E%3Cpath%20d%3D%27M14%204.6c-.9%201-.9%202.3%200%203.3M14%207.9c.9%201.5%202.4%202.4%204.1%202.2%27%2F%3E%3Cpath%20d%3D%27M13.8%209.9c-2%20.3-3.7%201.5-4.8%203.4-.7%201.2-.9%202.6-.5%203.9%27%2F%3E%3Cpath%20d%3D%27M8.5%2017.2c.5%201.3%201.6%202.1%203%202M11.4%2019c.2-2.4%201-4.3%202.6-5.9%201.1-1%202.4-1.7%203.9-1.9%27%2F%3E%3Cpath%20d%3D%27M17.8%2012.4c2.4%201%204%202.7%204.6%205.1.3%201.2.2%202.5-.4%203.7M15.2%2015.2c.5.2%201%20.5%201.4%201%27%2F%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%278.7%27%20r%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M15.6%206.6l2.6-.6%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2022%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M11%202.2c.8%201.9%202.3%203%202.4%205.3%200%202.6-2.2%204.7-2.4%207.7-.2-3-2.4-5.1-2.4-7.7C8.7%205.2%2010.2%204.1%2011%202.2z%27%2F%3E%3Cpath%20d%3D%27M6.3%205.4c1.9%201%203.2%202.4%204%204.4-2.2.4-4.1%201.5-5.4%203.2M15.7%205.4c-1.9%201-3.2%202.4-4%204.4%202.2.4%204.1%201.5%205.4%203.2%27%2F%3E%3Cpath%20d%3D%27M3.8%2012.8c1.8.2%203.4%201%204.8%202.1M18.2%2012.8c-1.8.2-3.4%201-4.8%202.1%27%2F%3E%3Cpath%20d%3D%27M11%2015.2c1%201.5%201%203.3.1%204.9l-.1%202%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2030%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.3%207.4c.3-2.7%202.4-4.5%205-4.2%201.9.2%203.3%201.4%203.5%203M9.3%207.4c-.9.2-1.6.7-2%201.5%27%2F%3E%3Cpath%20d%3D%27M14%204.6c-.9%201-.9%202.3%200%203.3M14%207.9c.9%201.5%202.4%202.4%204.1%202.2%27%2F%3E%3Cpath%20d%3D%27M13.8%209.9c-2%20.3-3.7%201.5-4.8%203.4-.7%201.2-.9%202.6-.5%203.9%27%2F%3E%3Cpath%20d%3D%27M8.5%2017.2c.5%201.3%201.6%202.1%203%202M11.4%2019c.2-2.4%201-4.3%202.6-5.9%201.1-1%202.4-1.7%203.9-1.9%27%2F%3E%3Cpath%20d%3D%27M17.8%2012.4c2.4%201%204%202.7%204.6%205.1.3%201.2.2%202.5-.4%203.7M15.2%2015.2c.5.2%201%20.5%201.4%201%27%2F%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%278.7%27%20r%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M15.6%206.6l2.6-.6%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2022%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M11%202.2c.8%201.9%202.3%203%202.4%205.3%200%202.6-2.2%204.7-2.4%207.7-.2-3-2.4-5.1-2.4-7.7C8.7%205.2%2010.2%204.1%2011%202.2z%27%2F%3E%3Cpath%20d%3D%27M6.3%205.4c1.9%201%203.2%202.4%204%204.4-2.2.4-4.1%201.5-5.4%203.2M15.7%205.4c-1.9%201-3.2%202.4-4%204.4%202.2.4%204.1%201.5%205.4%203.2%27%2F%3E%3Cpath%20d%3D%27M3.8%2012.8c1.8.2%203.4%201%204.8%202.1M18.2%2012.8c-1.8.2-3.4%201-4.8%202.1%27%2F%3E%3Cpath%20d%3D%27M11%2015.2c1%201.5%201%203.3.1%204.9l-.1%202%27%2F%3E%3C%2Fsvg%3E");} body.light-mode[data-game="zjy2"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M8.4%202.8a1.6%201.6%200%201%201%203.2%200M8.6%204.8h2.8%27%2F%3E%3Cpath%20d%3D%27M7.4%208.6c0%202.4%201%204.4%202.4%206.2.9%201.1%201.2%202.4%201.2%203.8%200%201%20.8%201.8%201.8%201.8s1.8-.8%201.8-1.8c0-1.4.3-2.7%201.2-3.8%201.4-1.8%202.4-3.8%202.4-6.2%27%2F%3E%3Cpath%20d%3D%27M5.6%2010.6c1.4.8%202.8%201.2%204.4%201.2s3-.4%204.4-1.2%27%2F%3E%3Cpath%20d%3D%27M9.2%2019.8l.8-2.2M10.8%2019.8l-.8-2.2%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%201%200%200-20z%27%2F%3E%3Cpath%20d%3D%27M12%203.7a8.3%208.3%200%200%201%208.3%208.3A8.3%208.3%200%200%201%2012%2020.3%27%2F%3E%3Ccircle%20cx%3D%2716.6%27%20cy%3D%277.6%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%277.4%27%20cy%3D%2716.4%27%20r%3D%271.1%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M8.4%202.8a1.6%201.6%200%201%201%203.2%200M8.6%204.8h2.8%27%2F%3E%3Cpath%20d%3D%27M7.4%208.6c0%202.4%201%204.4%202.4%206.2.9%201.1%201.2%202.4%201.2%203.8%200%201%20.8%201.8%201.8%201.8s1.8-.8%201.8-1.8c0-1.4.3-2.7%201.2-3.8%201.4-1.8%202.4-3.8%202.4-6.2%27%2F%3E%3Cpath%20d%3D%27M5.6%2010.6c1.4.8%202.8%201.2%204.4%201.2s3-.4%204.4-1.2%27%2F%3E%3Cpath%20d%3D%27M9.2%2019.8l.8-2.2M10.8%2019.8l-.8-2.2%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%201%200%200-20z%27%2F%3E%3Cpath%20d%3D%27M12%203.7a8.3%208.3%200%200%201%208.3%208.3A8.3%208.3%200%200%201%2012%2020.3%27%2F%3E%3Ccircle%20cx%3D%2716.6%27%20cy%3D%277.6%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%277.4%27%20cy%3D%2716.4%27%20r%3D%271.1%27%2F%3E%3C%2Fsvg%3E");} body.light-mode[data-game="zjy3"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2030%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.3%207.4c.3-2.7%202.4-4.5%205-4.2%201.9.2%203.3%201.4%203.5%203M9.3%207.4c-.9.2-1.6.7-2%201.5%27%2F%3E%3Cpath%20d%3D%27M14%204.6c-.9%201-.9%202.3%200%203.3M14%207.9c.9%201.5%202.4%202.4%204.1%202.2%27%2F%3E%3Cpath%20d%3D%27M13.8%209.9c-2%20.3-3.7%201.5-4.8%203.4-.7%201.2-.9%202.6-.5%203.9%27%2F%3E%3Cpath%20d%3D%27M8.5%2017.2c.5%201.3%201.6%202.1%203%202M11.4%2019c.2-2.4%201-4.3%202.6-5.9%201.1-1%202.4-1.7%203.9-1.9%27%2F%3E%3Cpath%20d%3D%27M17.8%2012.4c2.4%201%204%202.7%204.6%205.1.3%201.2.2%202.5-.4%203.7M15.2%2015.2c.5.2%201%20.5%201.4%201%27%2F%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%278.7%27%20r%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M15.6%206.6l2.6-.6%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2028%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%202.4h8M10%202.4v2.4%27%2F%3E%3Cpath%20d%3D%27M6.4%204.8c-2.2%202.6-2.2%2015.6%200%2018.4h7.2c2.2-2.8%202.2-15.8%200-18.4%27%2F%3E%3Cpath%20d%3D%27M6.4%2023.2h7.2M10%2023.2v3.2%27%2F%3E%3Cpath%20d%3D%27M7.4%2027.4c.8-1%201.5-1.7%202.6-3%201.1%201.3%201.8%202%202.6%203%27%2F%3E%3Cpath%20d%3D%27M10%204.8v18.4%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2030%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.3%207.4c.3-2.7%202.4-4.5%205-4.2%201.9.2%203.3%201.4%203.5%203M9.3%207.4c-.9.2-1.6.7-2%201.5%27%2F%3E%3Cpath%20d%3D%27M14%204.6c-.9%201-.9%202.3%200%203.3M14%207.9c.9%201.5%202.4%202.4%204.1%202.2%27%2F%3E%3Cpath%20d%3D%27M13.8%209.9c-2%20.3-3.7%201.5-4.8%203.4-.7%201.2-.9%202.6-.5%203.9%27%2F%3E%3Cpath%20d%3D%27M8.5%2017.2c.5%201.3%201.6%202.1%203%202M11.4%2019c.2-2.4%201-4.3%202.6-5.9%201.1-1%202.4-1.7%203.9-1.9%27%2F%3E%3Cpath%20d%3D%27M17.8%2012.4c2.4%201%204%202.7%204.6%205.1.3%201.2.2%202.5-.4%203.7M15.2%2015.2c.5.2%201%20.5%201.4%201%27%2F%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%278.7%27%20r%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M15.6%206.6l2.6-.6%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2028%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%202.4h8M10%202.4v2.4%27%2F%3E%3Cpath%20d%3D%27M6.4%204.8c-2.2%202.6-2.2%2015.6%200%2018.4h7.2c2.2-2.8%202.2-15.8%200-18.4%27%2F%3E%3Cpath%20d%3D%27M6.4%2023.2h7.2M10%2023.2v3.2%27%2F%3E%3Cpath%20d%3D%27M7.4%2027.4c.8-1%201.5-1.7%202.6-3%201.1%201.3%201.8%202%202.6%203%27%2F%3E%3Cpath%20d%3D%27M10%204.8v18.4%27%2F%3E%3C%2Fsvg%3E");} body.light-mode[data-game="zjy4"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2022%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.8c-3.3%200-5.8%202.3-5.8%205.2%200%202.9%202.5%204.8%205.8%204.8s5.8-1.9%205.8-4.8c0-2.9-2.5-5.2-5.8-5.2z%27%2F%3E%3Cpath%20d%3D%27M12%204.8c1.5-1.7%203.9-1.7%205.2-.3M12%2014.8c-1.5%201.7-3.9%201.7-5.2.3%27%2F%3E%3Cpath%20d%3D%27M8%2019.2c1-1.1%201.7-1.6%202.6-2.6%201%201%201.7%201.5%202.6%202.6%27%2F%3E%3Cpath%20d%3D%27M5.8%2010h2M16.2%2010h2%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ctext%20x%3D%2712%27%20y%3D%2717.8%27%20font-size%3D%2718%27%20text-anchor%3D%27middle%27%20font-family%3D%27KaiTi%2CSTKaiti%2Cserif%27%20fill%3D%27%238a5a2a%27%20fill-opacity%3D%271%27%3E%E5%9B%8D%3C%2Ftext%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2022%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.8c-3.3%200-5.8%202.3-5.8%205.2%200%202.9%202.5%204.8%205.8%204.8s5.8-1.9%205.8-4.8c0-2.9-2.5-5.2-5.8-5.2z%27%2F%3E%3Cpath%20d%3D%27M12%204.8c1.5-1.7%203.9-1.7%205.2-.3M12%2014.8c-1.5%201.7-3.9%201.7-5.2.3%27%2F%3E%3Cpath%20d%3D%27M8%2019.2c1-1.1%201.7-1.6%202.6-2.6%201%201%201.7%201.5%202.6%202.6%27%2F%3E%3Cpath%20d%3D%27M5.8%2010h2M16.2%2010h2%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ctext%20x%3D%2712%27%20y%3D%2717.8%27%20font-size%3D%2718%27%20text-anchor%3D%27middle%27%20font-family%3D%27KaiTi%2CSTKaiti%2Cserif%27%20fill%3D%27%238a5a2a%27%20fill-opacity%3D%270.16%27%3E%E5%9B%8D%3C%2Ftext%3E%3C%2Fsvg%3E");} body.light-mode[data-game="zjy5"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2014%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3.4%207.6c0-2.6%202.1-4.6%204.7-4.6%203.1%200%204.7%202.2%204.7%205%200%202.3-1.9%203.6-4.1%203-1.4-.4-1.8-1.6-.6-2.6%27%2F%3E%3Cpath%20d%3D%27M13.2%203.4c2.9-1.5%205.7-.6%206.3%202.4.4%202.4-1.3%204.1-3.7%204.1-1.8%200-3-1.2-2.9-2.8%27%2F%3E%3Ccircle%20cx%3D%275.6%27%20cy%3D%277.4%27%20r%3D%27.8%27%2F%3E%3Ccircle%20cx%3D%2716.4%27%20cy%3D%276%27%20r%3D%27.8%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2028%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%202.4h8M10%202.4v2.4%27%2F%3E%3Cpath%20d%3D%27M6.4%204.8c-2.2%202.6-2.2%2015.6%200%2018.4h7.2c2.2-2.8%202.2-15.8%200-18.4%27%2F%3E%3Cpath%20d%3D%27M6.4%2023.2h7.2M10%2023.2v3.2%27%2F%3E%3Cpath%20d%3D%27M7.4%2027.4c.8-1%201.5-1.7%202.6-3%201.1%201.3%201.8%202%202.6%203%27%2F%3E%3Cpath%20d%3D%27M10%204.8v18.4%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2014%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3.4%207.6c0-2.6%202.1-4.6%204.7-4.6%203.1%200%204.7%202.2%204.7%205%200%202.3-1.9%203.6-4.1%203-1.4-.4-1.8-1.6-.6-2.6%27%2F%3E%3Cpath%20d%3D%27M13.2%203.4c2.9-1.5%205.7-.6%206.3%202.4.4%202.4-1.3%204.1-3.7%204.1-1.8%200-3-1.2-2.9-2.8%27%2F%3E%3Ccircle%20cx%3D%275.6%27%20cy%3D%277.4%27%20r%3D%27.8%27%2F%3E%3Ccircle%20cx%3D%2716.4%27%20cy%3D%276%27%20r%3D%27.8%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2028%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%202.4h8M10%202.4v2.4%27%2F%3E%3Cpath%20d%3D%27M6.4%204.8c-2.2%202.6-2.2%2015.6%200%2018.4h7.2c2.2-2.8%202.2-15.8%200-18.4%27%2F%3E%3Cpath%20d%3D%27M6.4%2023.2h7.2M10%2023.2v3.2%27%2F%3E%3Cpath%20d%3D%27M7.4%2027.4c.8-1%201.5-1.7%202.6-3%201.1%201.3%201.8%202%202.6%203%27%2F%3E%3Cpath%20d%3D%27M10%204.8v18.4%27%2F%3E%3C%2Fsvg%3E");} body.light-mode[data-game="zjy6"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2014%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3.4%207.6c0-2.6%202.1-4.6%204.7-4.6%203.1%200%204.7%202.2%204.7%205%200%202.3-1.9%203.6-4.1%203-1.4-.4-1.8-1.6-.6-2.6%27%2F%3E%3Cpath%20d%3D%27M13.2%203.4c2.9-1.5%205.7-.6%206.3%202.4.4%202.4-1.3%204.1-3.7%204.1-1.8%200-3-1.2-2.9-2.8%27%2F%3E%3Ccircle%20cx%3D%275.6%27%20cy%3D%277.4%27%20r%3D%27.8%27%2F%3E%3Ccircle%20cx%3D%2716.4%27%20cy%3D%276%27%20r%3D%27.8%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ctext%20x%3D%2712%27%20y%3D%2717.8%27%20font-size%3D%2718%27%20text-anchor%3D%27middle%27%20font-family%3D%27KaiTi%2CSTKaiti%2Cserif%27%20fill%3D%27%238a5a2a%27%20fill-opacity%3D%271%27%3E%E5%9B%8D%3C%2Ftext%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2014%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.4%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3.4%207.6c0-2.6%202.1-4.6%204.7-4.6%203.1%200%204.7%202.2%204.7%205%200%202.3-1.9%203.6-4.1%203-1.4-.4-1.8-1.6-.6-2.6%27%2F%3E%3Cpath%20d%3D%27M13.2%203.4c2.9-1.5%205.7-.6%206.3%202.4.4%202.4-1.3%204.1-3.7%204.1-1.8%200-3-1.2-2.9-2.8%27%2F%3E%3Ccircle%20cx%3D%275.6%27%20cy%3D%277.4%27%20r%3D%27.8%27%2F%3E%3Ccircle%20cx%3D%2716.4%27%20cy%3D%276%27%20r%3D%27.8%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ctext%20x%3D%2712%27%20y%3D%2717.8%27%20font-size%3D%2718%27%20text-anchor%3D%27middle%27%20font-family%3D%27KaiTi%2CSTKaiti%2Cserif%27%20fill%3D%27%238a5a2a%27%20fill-opacity%3D%270.16%27%3E%E5%9B%8D%3C%2Ftext%3E%3C%2Fsvg%3E");} body.light-mode[data-game="zjy7"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%206%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.2%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27square%27%3E%3Cpath%20d%3D%27M1%201h8v3.4h-4V2.2h1.6M11%201h8v3.4h-4V2.2h1.6M21%201h2v3.4h-2V2.2%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%201%200%200-20z%27%2F%3E%3Cpath%20d%3D%27M12%203.7a8.3%208.3%200%200%201%208.3%208.3A8.3%208.3%200%200%201%2012%2020.3%27%2F%3E%3Ccircle%20cx%3D%2716.6%27%20cy%3D%277.6%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%277.4%27%20cy%3D%2716.4%27%20r%3D%271.1%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%206%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.2%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27square%27%3E%3Cpath%20d%3D%27M1%201h8v3.4h-4V2.2h1.6M11%201h8v3.4h-4V2.2h1.6M21%201h2v3.4h-2V2.2%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%201%200%200-20z%27%2F%3E%3Cpath%20d%3D%27M12%203.7a8.3%208.3%200%200%201%208.3%208.3A8.3%208.3%200%200%201%2012%2020.3%27%2F%3E%3Ccircle%20cx%3D%2716.6%27%20cy%3D%277.6%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%277.4%27%20cy%3D%2716.4%27%20r%3D%271.1%27%2F%3E%3C%2Fsvg%3E");} body.light-mode[data-game="zjy8"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ctext%20x%3D%2712%27%20y%3D%2717.8%27%20font-size%3D%2718%27%20text-anchor%3D%27middle%27%20font-family%3D%27KaiTi%2CSTKaiti%2Cserif%27%20fill%3D%27%238a5a2a%27%20fill-opacity%3D%271%27%3E%E5%9B%8D%3C%2Ftext%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2022%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.8c-3.3%200-5.8%202.3-5.8%205.2%200%202.9%202.5%204.8%205.8%204.8s5.8-1.9%205.8-4.8c0-2.9-2.5-5.2-5.8-5.2z%27%2F%3E%3Cpath%20d%3D%27M12%204.8c1.5-1.7%203.9-1.7%205.2-.3M12%2014.8c-1.5%201.7-3.9%201.7-5.2.3%27%2F%3E%3Cpath%20d%3D%27M8%2019.2c1-1.1%201.7-1.6%202.6-2.6%201%201%201.7%201.5%202.6%202.6%27%2F%3E%3Cpath%20d%3D%27M5.8%2010h2M16.2%2010h2%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ctext%20x%3D%2712%27%20y%3D%2717.8%27%20font-size%3D%2718%27%20text-anchor%3D%27middle%27%20font-family%3D%27KaiTi%2CSTKaiti%2Cserif%27%20fill%3D%27%238a5a2a%27%20fill-opacity%3D%270.16%27%3E%E5%9B%8D%3C%2Ftext%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2022%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.8c-3.3%200-5.8%202.3-5.8%205.2%200%202.9%202.5%204.8%205.8%204.8s5.8-1.9%205.8-4.8c0-2.9-2.5-5.2-5.8-5.2z%27%2F%3E%3Cpath%20d%3D%27M12%204.8c1.5-1.7%203.9-1.7%205.2-.3M12%2014.8c-1.5%201.7-3.9%201.7-5.2.3%27%2F%3E%3Cpath%20d%3D%27M8%2019.2c1-1.1%201.7-1.6%202.6-2.6%201%201%201.7%201.5%202.6%202.6%27%2F%3E%3Cpath%20d%3D%27M5.8%2010h2M16.2%2010h2%27%2F%3E%3C%2Fsvg%3E");} body.light-mode[data-game="zjy9"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%201%200%200-20z%27%2F%3E%3Cpath%20d%3D%27M12%203.7a8.3%208.3%200%200%201%208.3%208.3A8.3%208.3%200%200%201%2012%2020.3%27%2F%3E%3Ccircle%20cx%3D%2716.6%27%20cy%3D%277.6%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%277.4%27%20cy%3D%2716.4%27%20r%3D%271.1%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%206%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.2%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27square%27%3E%3Cpath%20d%3D%27M1%201h8v3.4h-4V2.2h1.6M11%201h8v3.4h-4V2.2h1.6M21%201h2v3.4h-2V2.2%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%201%200%200-20z%27%2F%3E%3Cpath%20d%3D%27M12%203.7a8.3%208.3%200%200%201%208.3%208.3A8.3%208.3%200%200%201%2012%2020.3%27%2F%3E%3Ccircle%20cx%3D%2716.6%27%20cy%3D%277.6%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%277.4%27%20cy%3D%2716.4%27%20r%3D%271.1%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%206%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.2%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27square%27%3E%3Cpath%20d%3D%27M1%201h8v3.4h-4V2.2h1.6M11%201h8v3.4h-4V2.2h1.6M21%201h2v3.4h-2V2.2%27%2F%3E%3C%2Fsvg%3E");} body.light-mode[data-game="shisan"]{--em-a:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2014%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1%207h4.6l2.2-4.2%202.9%208.4L13.4%207H23%27%2F%3E%3Cpath%20d%3D%27M18.8%201.6v3.4M17.1%203.3h3.4%27%2F%3E%3C%2Fsvg%3E");--em-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%206%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.2%27%20stroke-opacity%3D%271%27%20stroke-linecap%3D%27square%27%3E%3Cpath%20d%3D%27M1%201h8v3.4h-4V2.2h1.6M11%201h8v3.4h-4V2.2h1.6M21%201h2v3.4h-2V2.2%27%2F%3E%3C%2Fsvg%3E");--em-a-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2014%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.5%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1%207h4.6l2.2-4.2%202.9%208.4L13.4%207H23%27%2F%3E%3Cpath%20d%3D%27M18.8%201.6v3.4M17.1%203.3h3.4%27%2F%3E%3C%2Fsvg%3E");--em-b-dim:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%206%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2a%27%20stroke-width%3D%271.2%27%20stroke-opacity%3D%270.16%27%20stroke-linecap%3D%27square%27%3E%3Cpath%20d%3D%27M1%201h8v3.4h-4V2.2h1.6M11%201h8v3.4h-4V2.2h1.6M21%201h2v3.4h-2V2.2%27%2F%3E%3C%2Fsvg%3E");} step-card,menu-card,ref-card,char-card,modal-card,theme-card,team-card,ach-card,world-card,game-card,tl-overview-card,quick-ref,panel-card,music-card,song-card,cult-card,result-item,tl-item,link-item{background-image:var(--em-a-dim),var(--em-b-dim),repeating-linear-gradient(90deg,rgba(227,195,109,.26) 0 2px,transparent 2px 6px);background-position:94% 6%,6% 92%,0 0;background-size:13% auto,11% auto,100% 3px;background-repeat:no-repeat,no-repeat,no-repeat;border-top:1px solid rgba(212,168,75,.42);} step-card:hover,menu-card:hover,ref-card:hover,char-card:hover,modal-card:hover,theme-card:hover,team-card:hover,ach-card:hover,world-card:hover,game-card:hover,tl-overview-card:hover,quick-ref:hover,panel-card:hover,music-card:hover,song-card:hover,cult-card:hover,result-item:hover,tl-item:hover,link-item:hover{background-image:var(--em-a),var(--em-b-dim),repeating-linear-gradient(90deg,rgba(227,195,109,.3) 0 2px,transparent 2px 6px);} body.light-mode step-card,menu-card,ref-card,char-card,modal-card,theme-card,team-card,ach-card,world-card,game-card,tl-overview-card,quick-ref,panel-card,music-card,song-card,cult-card,result-item,tl-item,link-item{background-image:var(--em-a-dim),var(--em-b-dim),repeating-linear-gradient(90deg,rgba(142,104,41,.3) 0 2px,transparent 2px 6px);border-top-color:rgba(142,104,41,.5);} body.light-mode step-card:hover,menu-card:hover,ref-card:hover,char-card:hover,modal-card:hover,theme-card:hover,team-card:hover,ach-card:hover,world-card:hover,game-card:hover,tl-overview-card:hover,quick-ref:hover,panel-card:hover,music-card:hover,song-card:hover,cult-card:hover,result-item:hover,tl-item:hover,link-item:hover{background-image:var(--em-a),var(--em-b-dim),repeating-linear-gradient(90deg,rgba(142,104,41,.34) 0 2px,transparent 2px 6px);} .top-bar::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:1;background:linear-gradient(90deg,transparent,rgba(181,43,39,.8) 12%,rgba(212,168,75,.85) 50%,rgba(181,43,39,.8) 88%,transparent);} body.light-mode .top-bar::before{background:linear-gradient(90deg,transparent,rgba(165,43,39,.55) 12%,rgba(142,104,41,.7) 50%,rgba(165,43,39,.55) 88%,transparent);} a.nav-search{outline:1px solid rgba(227,195,109,.28);outline-offset:-3px !important;box-shadow:0 0 0 2px rgba(227,195,109,.22),inset 0 0 0 1px rgba(23,16,8,.5),inset 0 1px rgba(255,255,255,.09),0 3px 8px rgba(0,0,0,.38) !important;} body.light-mode a.nav-search{outline-color:rgba(142,104,41,.35);box-shadow:0 0 0 2px rgba(142,104,41,.25),inset 0 0 0 1px rgba(61,41,29,.25),inset 0 1px rgba(255,255,255,.6),0 3px 8px rgba(61,41,29,.18) !important;} /* ============================================================ v18 · 变化对照检查器 (zjy_diff.js 配套) 罗盘铜镜风: 对照按钮=罗盘钮, 面板=卦盘, 标签=朱砂签, 双主题 ============================================================ */ .diff-btn{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:5px 14px; font-family:var(--font-kai);font-size:.78rem;letter-spacing:.08em;cursor:pointer; color:#e3c36d;background:linear-gradient(180deg,#3a2418,#241209); border:1px solid rgba(212,168,75,.45);border-radius:20px; box-shadow:inset 0 1px rgba(255,235,200,.14),inset 0 -2px 4px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3); transition:all .2s;} .diff-btn:hover{color:#f4e0a8;border-color:rgba(227,195,109,.7); box-shadow:inset 0 1px rgba(255,235,200,.2),0 0 10px rgba(212,168,75,.28),0 2px 6px rgba(0,0,0,.3);} .diff-btn.on{background:linear-gradient(180deg,#8f211e,#5e1310);color:#f8e8c8; border-color:rgba(227,195,109,.6);} body.light-mode .diff-btn{color:#8a5a2a;background:linear-gradient(180deg,#f2e4c8,#e2cfA6); border-color:rgba(154,116,38,.55);box-shadow:inset 0 1px rgba(255,255,255,.7),0 2px 5px rgba(74,48,25,.14);} body.light-mode .diff-btn:hover{color:#6e4420;border-color:rgba(142,104,41,.75); box-shadow:inset 0 1px rgba(255,255,255,.8),0 0 10px rgba(154,116,38,.25);} body.light-mode .diff-btn.on{background:linear-gradient(180deg,#a83a30,#8a2820);color:#fdf0e0;} /* 对照面板: 卦盘底 + 金缘 */ .diff-panel{margin:10px 0 14px;padding:12px 14px;position:relative; background:linear-gradient(170deg,#221408,#1a0e06 60%,#140a04); border:1px solid rgba(212,168,75,.5);border-radius:10px; box-shadow:inset 0 0 0 1px rgba(212,168,75,.12),inset 0 2px 8px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.35);} body.light-mode .diff-panel{background:linear-gradient(170deg,#f6ecd4,#efe0c0 60%,#e8d6b0); border-color:rgba(154,116,38,.55); box-shadow:inset 0 0 0 1px rgba(154,116,38,.14),inset 0 1px rgba(255,255,255,.6),0 4px 12px rgba(74,48,25,.16);} .diff-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px; padding-bottom:8px;border-bottom:1px solid rgba(212,168,75,.28);} body.light-mode .diff-bar{border-bottom-color:rgba(154,116,38,.35);} .diff-title{font-family:var(--font-kai);font-size:.95rem;color:#e3c36d;letter-spacing:.14em;} body.light-mode .diff-title{color:#8a5a2a;} .diff-tabs{display:flex;gap:6px;} .diff-tab{padding:3px 12px;font-size:.72rem;font-family:var(--font-kai);cursor:pointer; color:#c8b090;background:rgba(212,168,75,.08);border:1px solid rgba(212,168,75,.35);border-radius:14px;transition:all .2s;} .diff-tab:hover{color:#f0dca0;border-color:rgba(227,195,109,.6);} .diff-tab.on{color:#f8e8c8;background:linear-gradient(180deg,#8f211e,#5e1310);border-color:rgba(227,195,109,.65);} body.light-mode .diff-tab{color:#7a5a34;background:rgba(154,116,38,.08);border-color:rgba(154,116,38,.4);} body.light-mode .diff-tab.on{color:#fdf0e0;background:linear-gradient(180deg,#a83a30,#8a2820);} .diff-pct{margin-left:auto;font-size:.72rem;color:#9fd4a8;letter-spacing:.04em;} .diff-pct.warn{color:#e8a0a0;} body.light-mode .diff-pct{color:#4a7a3a;} body.light-mode .diff-pct.warn{color:#a03428;} .diff-close{padding:3px 12px;font-size:.72rem;font-family:var(--font-kai);cursor:pointer; color:#d8b890;background:transparent;border:1px solid rgba(212,168,75,.35);border-radius:14px;transition:all .2s;} .diff-close:hover{color:#f4e0a8;border-color:rgba(227,195,109,.65);} body.light-mode .diff-close{color:#7a5a34;border-color:rgba(154,116,38,.45);} body.light-mode .diff-close:hover{color:#5e4228;border-color:rgba(142,104,41,.7);} /* 三视图: 变化前 / 变化后 / 差异高亮 */ .diff-views{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;} .diff-cell{margin:0;position:relative;} .diff-cell .diff-slot{border:1px solid rgba(212,168,75,.35);border-radius:6px;overflow:hidden;background:#000;} body.light-mode .diff-cell .diff-slot{border-color:rgba(154,116,38,.45);background:#1a120a;} .diff-cell img,.diff-canvas{display:block;width:100%;height:auto;} .diff-tag{position:absolute;top:6px;left:6px;z-index:2;padding:2px 10px; font-family:var(--font-kai);font-size:.68rem;letter-spacing:.12em;border-radius:3px; color:#f8e8c8;background:rgba(20,10,5,.82);border:1px solid rgba(212,168,75,.5);} .diff-tag-b{color:#f8d8c8;border-color:rgba(196,60,50,.6);} .diff-tag-d{color:#f0b0a8;border-color:rgba(226,48,40,.65);} body.light-mode .diff-tag{background:rgba(246,236,212,.9);color:#6e4420;border-color:rgba(154,116,38,.55);} body.light-mode .diff-tag-b{color:#8a2820;border-color:rgba(165,43,39,.55);} body.light-mode .diff-tag-d{color:#a03428;border-color:rgba(165,43,39,.6);} /* 对照模式中原截图区压暗,聚焦面板 */ .shot-grid.diff-mode{opacity:.38;filter:saturate(.6);transition:opacity .25s,filter .25s;} @media(max-width:768px){.diff-views{grid-template-columns:1fr 1fr;}.diff-pct{margin-left:0;width:100%;}}