/* ============================================================
   命格图鉴（167 个命格）：左栏详情大图 + 右栏图标网格
   样式变量沿用 index.html 的 :root（--paper --ink --cinnabar --jade --gold --line --line-gold …）
   全局命名统一加 .dty- 前缀，避免与首页既有类名冲突。

   本模块整体嵌在 04「技能展示」区块（<section class="sec sec-ink">）内部，
   因此基础配色按“深墨底”书写；文末另有一组 .sec-ink 兼容覆盖，
   保证即使将来把它挪回浅色区块也能读得清。
   ============================================================ */

/* ===== 子标题：已不是顶层章节，体量必须明显小于 .sec-title（约 55–65%） =====
   结构：描金细分割线 →「命格·天赋星轨」+ DESTINY → 说明文字 + 音效开关 → 颜色筛选 chip */
.dty-mod{margin-top:78px}
.dty-sub{margin-bottom:26px;padding-top:30px;border-top:1px solid var(--line-gold)}
.dty-sub-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.dty-sub-title{font-family:var(--font-title);font-weight:400;font-size:22px;line-height:1.5;
  letter-spacing:.2em;color:#f2ebdd}
.dty-sub-title em{font-style:normal;color:var(--cinnabar-l);padding:0 2px}
.dty-sub-en{font-family:var(--font-title);font-size:11px;letter-spacing:.42em;color:#7ea79b}
.dty-sub-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:10px}
.dty-sub-desc{font-size:13px;letter-spacing:.12em;color:#a9a294}

/* ===== 颜色分级筛选 chip：橙 / 青 / 紫 / 红 + 全部 ===== */
.dty-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.dty-chip{display:inline-flex;align-items:center;gap:9px;padding:8px 17px;cursor:pointer;
  font-family:var(--font-title);font-size:13.5px;letter-spacing:.14em;color:#d8d1c1;
  border:1px solid rgba(200,164,92,.34);background:rgba(255,255,255,.045);transition:.28s}
/* 颜色圆点：颜色由 destiny.js 以 --dty-c 注入，数量与按钮均由脚本生成 */
.dty-chip::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--dty-c,var(--gold));box-shadow:0 0 7px var(--dty-c,var(--gold))}
.dty-chip b{font-weight:400;font-size:12.5px;letter-spacing:.1em;color:#8f887a}
.dty-chip:hover{border-color:var(--gold);color:#f4ece0;background:rgba(200,164,92,.13)}
.dty-chip:hover b{color:var(--gold-l)}
/* 选中态：描金实边 + 金色底纹 + 外发光，在深墨底上足够醒目 */
.dty-chip[aria-pressed="true"]{color:#f6efe2;border-color:var(--gold);background:rgba(200,164,92,.2);
  box-shadow:inset 0 0 0 1px rgba(224,196,137,.42),0 0 16px rgba(200,164,92,.24)}
.dty-chip[aria-pressed="true"] b{color:var(--gold-l)}
.dty-chip:focus-visible{outline:2px solid var(--cinnabar-l);outline-offset:2px}

/* 音效开关：描金按钮 + 内联 SVG 喇叭图标（不使用 emoji） */
.dty-audio{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;font-family:var(--font-title);
  font-size:13.5px;letter-spacing:.2em;color:var(--gold-l);border:1px solid var(--line-gold);
  background:rgba(255,255,255,.06);transition:.32s}
.dty-audio:hover{border-color:var(--gold);background:rgba(200,164,92,.13)}
.dty-audio .dty-ic{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* 关闭态：灰色描边 + 显示斜线（图标由 CSS 切换，无需改 DOM 结构） */
.dty-audio[aria-pressed="false"]{color:#8d867a;border-color:rgba(200,164,92,.2);background:rgba(255,255,255,.03)}
.dty-audio[aria-pressed="false"]:hover{border-color:var(--gold);color:var(--gold-l)}
.dty-audio[aria-pressed="true"] .dty-ic-off{display:none}
.dty-audio[aria-pressed="false"] .dty-ic-on{display:none}
.dty-audio[aria-pressed="true"] .dty-wave{display:block}
.dty-audio[aria-pressed="false"] .dty-wave{display:none}

/* ===== 主体：左右两栏（左 5 / 右 7） ===== */
.dty-layout{display:grid;grid-template-columns:5fr 7fr;gap:44px;align-items:start}

/* ===== 左栏：详情预览面板 ===== */
.dty-preview{position:relative;min-width:0}
/* ===== 展示舞台（2026-10）：3D 旋转法阵 =====
   空闲时只转法阵，指针进入网格或舞台时才把属性面板浮出来（靠 .is-live，见 destiny.js）。
   法阵全部由 CSS 动画驱动，不占 JS；prefers-reduced-motion 下自动静止。
   舞台是一个固定比例的「房间」，面板按宽度等比缩放后浮在法阵上方 ——
   宽度统一意味着 167 个命格的文字大小完全一致。 */
.dty-stage{position:relative;width:100%;aspect-ratio:720/640;isolation:isolate}
/* 水墨晕染：给舞台一点质感，与 04/07 区块共用 --ink-blot */
.dty-stage::before{content:"";position:absolute;inset:0;opacity:.2;pointer-events:none;z-index:0;
  background-image:var(--ink-blot);background-size:cover}

/* 法阵分组：纯装饰，不接收指针事件。
   perspective 必须放在这里 —— 它只作用于直接子元素，而 .dty-orb-floor 正是直接子元素。 */
.dty-orb{position:absolute;inset:0;z-index:1;pointer-events:none;
  perspective:1100px;perspective-origin:50% 42%}

/* 光柱：从法阵中心往上打 */
.dty-orb-beam{position:absolute;left:50%;top:6%;width:30%;height:68%;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(56,176,200,.13) 38%,rgba(224,196,137,.2) 80%,transparent);
  filter:blur(15px);animation:dtyBeam 6.5s ease-in-out infinite;will-change:opacity}

/* 法阵光晕：跟着一起呼吸 */
.dty-orb-aura{position:absolute;left:50%;top:78%;width:82%;aspect-ratio:8/5;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at 50% 50%,rgba(224,196,137,.28),rgba(31,111,107,.22) 44%,transparent 72%);
  filter:blur(18px);animation:dtyAura 5.6s ease-in-out infinite;will-change:transform,opacity}

/* 地面法阵：整块平面绕 X 轴倒下去形成俯视透视，每圈再各自在平面内旋转 */
.dty-orb-floor{position:absolute;left:50%;top:78%;width:96%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotateX(72deg)}
.dty-ring{position:absolute;left:50%;top:50%;border-radius:50%;
  animation-name:dtySpin;animation-timing-function:linear;animation-iteration-count:infinite;
  will-change:transform}
/* 原先最外圈是一道虚线金环（100%），按需求去掉了：
   它正好压在湖面外缘，和羽化后的水边打架，看着像湖被一个虚线框圈住。
   剩下三圈：刻度圈 → 青玉内圈 → 描金芯圈。 */
/* 次圈：一圈刻度，读起来像法阵符文 */
.dty-ring-b{width:76%;height:76%;margin:-38% 0 0 -38%;animation-duration:26s;animation-direction:reverse;
  background:repeating-conic-gradient(from 0deg,rgba(200,164,92,.72) 0 .8deg,transparent .8deg 6deg);
  -webkit-mask:radial-gradient(circle,transparent 0 88%,#000 89% 100%);
  mask:radial-gradient(circle,transparent 0 88%,#000 89% 100%)}
/* 内圈：青玉色，呼应站点 --jade */
.dty-ring-c{width:54%;height:54%;margin:-27% 0 0 -27%;border:1px solid rgba(56,176,200,.5);
  box-shadow:0 0 22px rgba(56,176,200,.26),inset 0 0 22px rgba(56,176,200,.16);animation-duration:17s}
/* 芯圈：描金实线，转得最快 */
.dty-ring-d{width:30%;height:30%;margin:-15% 0 0 -15%;border:2px solid rgba(224,196,137,.55);
  box-shadow:0 0 26px rgba(224,196,137,.34);animation-duration:11s;animation-direction:reverse}

/* ---------- 宁静湖面（真实素材）+ 涟漪序列 ----------
   湖面铺在法阵同一个倾斜平面里（.dty-orb-floor 的 rotateX 平面），
   所以方画出来自然是椭圆，和法阵的透视一致；作为平面的第一个子元素，
   法阵的圈层会画在它上面。

   素材：WorkBuddy 生成的「晨雾镜湖」序列帧（tools/build-lake.cjs 裁出水面那一段）。
   静面底图由 destiny.js 用 BASE_ROOT 拼地址赋值（不写进 CSS 的 url()）：
   CSS 里的相对 url() 是相对「样式表所在目录」解析的，首页下样式表在 /destiny.css，
   二级页下却是 /destiny/destiny.css —— 同一个相对地址在两个挂载点会解析成
   /assets/… 和 /destiny/assets/… 两种结果，必然有一个 404。而这个元素本来就由
   JS 创建，所以地址交给 JS 拼，天然跟着 data-dty-base 走。

   比例对得上，所以用 100% 100% 直接铺满，透视压缩交给倾斜平面完成：
     元素在平面里是 763×763 的圆，rotateX(76°) 后渲染成 763×185 的椭圆，
     而素材是 768×180 —— 几乎 1:1，不会再被二次拉伸变形。

   羽化（border-radius 只给得出一道硬边，照片里的树线会被齐齐切断，一眼假）：
   遮罩写在元素的本地坐标里（先遮罩、后透视），本地半径 r% 的那圈正好映射到
   屏幕椭圆的 r% 处，所以羽化环的形状天然跟着透视走，不用手工配比例。
   透视会把羽化「宽度」压扁：本地 36% 半径 ≈ 屏幕横向 137px、纵向 33px。
   33px 落在 185px 高的椭圆上（约 18%）已经够软，不必再叠一层线性遮罩 ——
   线性的纵向羽化会和径向叠加，把整个椭圆都压在渐变里，二级页上（卡片挡住
   明亮的湖心，只剩外圈）湖面就直接看不见了，这里踩过一次。
   border-radius 保留：万一 mask 完全不支持，至少还是一块干净的圆湖。 */
.dty-lake{position:absolute;left:50%;top:50%;width:108%;height:108%;margin:-54% 0 0 -54%;
  border-radius:50%;overflow:hidden;pointer-events:none;
  background-color:#0a1618;background-repeat:no-repeat;background-position:center;background-size:100% 100%;
  -webkit-mask-image:radial-gradient(closest-side,#000 0 64%,rgba(0,0,0,.9) 73%,rgba(0,0,0,.62) 82%,rgba(0,0,0,.3) 91%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 0 64%,rgba(0,0,0,.9) 73%,rgba(0,0,0,.62) 82%,rgba(0,0,0,.3) 91%,transparent 100%)}
/* 水面极淡的横向反光：让静态素材也有"水"的质感，不抢画面。
   放在 ::before（涟漪播放层之下），且只在中间一段可见。 */
.dty-lake::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 22px);
  -webkit-mask:radial-gradient(circle,transparent 14%,#000 46%,transparent 90%);
  mask:radial-gradient(circle,transparent 14%,#000 46%,transparent 90%)}
/* 水墨暗角：素材是明亮的实景照片，原样铺在墨色页面上会「跳出」画面，
   空闲时还会压在提示文案下面。这一层把外圈压到接近背景色、中心只压一点，
   既保住镜湖的暖色倒影，又接得上 :root 的墨绿基调，顺带藏掉照片本身的硬边。
   放在 ::after（最后一个子节点）——绝对定位同级按文档顺序绘制，
   所以它同时盖住涟漪播放层，播放中的序列会被一起调色，不会突然变亮。 */
.dty-lake::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(ellipse 62% 58% at 50% 52%,rgba(6,16,18,0) 0%,rgba(6,16,18,.14) 58%,rgba(6,16,18,.52) 84%,rgba(6,16,18,.88) 100%),
    linear-gradient(180deg,rgba(8,22,24,.34),rgba(4,12,14,.30) 52%,rgba(4,12,14,.58))}

/* 涟漪播放层：11 格横向序列条（1→2→3→4→5→6→5→4→3→2→1）。
   选中命格时播一轮再隐掉 —— 末尾回到第 1 帧，所以隐藏那一刻和静面底图无缝衔接。
   步进用 steps(11, jump-none)：background-position 的百分比是按
   「容器与图片的尺寸差」算的，N 格要 N 个对齐位置正好是 0%,1/(N-1)…,100%，
   jump-none 才会把首尾两端都取到；用 steps(11) 会永远少最后一帧。
   序列条 124KB，所以不在首屏请求 —— 首次选中命格时才由 JS 赋 background-image。 */
.dty-lake-ripples{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .12s linear;
  background-repeat:no-repeat;background-size:1100% 100%;background-position:0% 50%}
.dty-lake-ripples.is-playing{opacity:1;animation:dtyLakeRipple 1.9s steps(11,jump-none) 1 forwards}
@keyframes dtyLakeRipple{
  from{background-position:0% 50%}
  to{background-position:100% 50%}}

/* 火星：沿光柱缓缓上浮 */
.dty-orb-sparks{position:absolute;inset:0}
.dty-orb-sparks i{position:absolute;width:3px;height:3px;border-radius:50%;background:#e8d3a0;
  box-shadow:0 0 9px 2px rgba(232,211,160,.6);opacity:0;animation:dtyFloat 8s linear infinite}
.dty-orb-sparks i:nth-child(1){left:26%;animation-duration:8.2s}
.dty-orb-sparks i:nth-child(2){left:38%;animation-delay:-2.1s;animation-duration:6.8s}
.dty-orb-sparks i:nth-child(3){left:51%;animation-delay:-4.4s;animation-duration:9s}
.dty-orb-sparks i:nth-child(4){left:63%;animation-delay:-1.2s;animation-duration:7.2s}
.dty-orb-sparks i:nth-child(5){left:74%;animation-delay:-5.6s;animation-duration:8.6s}
.dty-orb-sparks i:nth-child(6){left:44%;animation-delay:-3.3s;animation-duration:6.4s}
.dty-orb-sparks i:nth-child(7){left:58%;animation-delay:-6.5s;animation-duration:9.4s}

@keyframes dtySpin{to{transform:rotate(360deg)}}
@keyframes dtyAura{
  0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}
@keyframes dtyBeam{0%,100%{opacity:.4}50%{opacity:.88}}
@keyframes dtyFloat{
  0%{opacity:0;top:78%;transform:scale(.5)}
  14%{opacity:.9}
  72%{opacity:.5}
  100%{opacity:0;top:13%;transform:scale(1.1)}}

/* ===== 属性卡片：立体铭牌（3D 层次 + 鼠标倾斜） =====
   属性图包进 .dty-plate，靠 translateZ 分层做出厚度：
     板厚 → 面板本体 → 内描边 → 青玉轮廓
   定位与淡入都挂在 .dty-plate 上，里面的 img 退化成普通块级图。
   层次由 destiny.js 生成，首页模块与二级页共用同一份逻辑。
   配色只用站点变量（描金 --gold/--gold-l、青玉 --jade），不引入参考文件的暖黑金。
   （四角描金角标、斜向扫光、跟随鼠标的发光高光，均已按需求去掉。） */
.dty-plate{position:absolute;left:50%;top:43%;width:86%;z-index:3;transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateX(var(--dty-rx,0deg)) rotateY(var(--dty-ry,0deg))
    translateZ(var(--dty-tz,0px)) scale(var(--dty-sc,1));
  opacity:0;transition:opacity .34s ease,transform .42s cubic-bezier(.22,.68,.32,1);
  animation:dtyBob 6.6s ease-in-out infinite}
/* 浮动用 translate 独立属性（可合成），不用会触发重排的 margin */
@keyframes dtyBob{0%,100%{translate:0 -6px}50%{translate:0 8px}}
.dty-plate.is-on{opacity:1}
/* 空闲：把画面让给法阵，面板略微下沉后淡出 */
.dty-stage:not(.is-live) .dty-plate.is-on{opacity:0;transform:translate(-50%,-43%) scale(.97)}
/* 卡片宽度兜底 86%；实际尺寸由 destiny.js 的 sizePlate() 按舞台实测值写成 px。
   注意不能再靠 img 的 max-height 百分比来限制高度：img 现在被包进 .dty-plate，
   百分比 max-height 的参照变成 auto 高度的父元素，会解析成 none，
   720×536 那种高面板会直接顶出舞台。 */
.dty-plate > img{display:block;width:100%;height:auto;position:relative;z-index:4;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.62))}

/* 1 板厚：面板后方一层深墨青实体，卡片是"一块牌"而不是一张纸 */
.dty-plate-thick{position:absolute;inset:7px;border-radius:13px;transform:translateZ(-26px);
  background:linear-gradient(180deg,#163035,#0a1618);
  box-shadow:0 0 34px rgba(200,164,92,.24),0 24px 48px rgba(0,0,0,.62)}
/* 3 内描边：框中有框 */
.dty-plate-edge{position:absolute;inset:2%;border-radius:11px;transform:translateZ(24px);pointer-events:none;
  border:1px solid rgba(200,164,92,.32);box-shadow:inset 0 0 48px rgba(31,111,107,.20)}
/* 4 青玉轮廓光：反向冷光。强度压得很低 —— screen 混在近黑面板上，
   0.22 会把卡面整体抬成灰绿。这是静态轮廓光，不跟随鼠标。 */
.dty-plate-rim{position:absolute;inset:0;border-radius:13px;transform:translateZ(44px);pointer-events:none;
  background:linear-gradient(205deg,rgba(79,179,173,.11),transparent 48%,rgba(79,179,173,.07));
  mix-blend-mode:screen}

/* 倒影：镜像一份面板放在卡片正下方。top 由 destiny.js 按当前图的真实高度算
   （属性行数不同，面板高 332~536，写死偏移在高面板上会错位）。 */
.dty-reflect{position:absolute;left:50%;width:86%;z-index:2;
  transform:translateX(-50%) scaleY(-1);pointer-events:none;
  mask-image:linear-gradient(to top,rgba(0,0,0,.52),transparent 56%);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.52),transparent 56%);
  filter:blur(3.5px) saturate(.95);opacity:0;transition:opacity .34s ease}
.dty-reflect.is-on{opacity:.52}
.dty-reflect img{display:block;width:100%;height:auto}

/* 空闲提示。湖面换成实景照片之后它正好压在明亮的倒影上，
   原来的单层阴影不够，这里加一层近距硬阴影把字从水面里"抠"出来。 */
.dty-hint{position:absolute;left:0;right:0;bottom:9%;z-index:4;margin:0;text-align:center;
  font-size:12.5px;letter-spacing:.16em;color:#c3d2c7;pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.9),0 2px 18px rgba(0,0,0,.8);
  transition:opacity .3s ease}
.dty-stage.is-live .dty-hint{opacity:0}

/* 详情图缺失 / 尚未加载出来时的占位提示 */
.dty-stage p[data-dty-msg]{position:absolute;left:0;right:0;bottom:20px;z-index:5;text-align:center;
  font-size:12.5px;letter-spacing:.14em;color:#9fb0a7;padding:0 22px}
.dty-stage p[hidden]{display:none}

/* 面板下方：位置指示 + 自动播放受限提示 */
.dty-meta{display:flex;align-items:baseline;gap:12px;margin-top:18px;padding-top:14px;
  border-top:1px solid rgba(200,164,92,.22)}
.dty-idx{font-family:var(--font-title);font-size:26px;letter-spacing:.14em;color:#e7dfd0}
.dty-idx b{font-weight:400;color:var(--cinnabar-l)}
.dty-idx span{font-size:14px;letter-spacing:.2em;color:#8b8578}
.dty-count{margin-left:auto;font-family:var(--font-title);font-size:12.5px;letter-spacing:.26em;color:var(--gold-l)}
/* 自动播放被拒提示（仅显示一次） */
.dty-tip{margin-top:12px;font-size:12.5px;letter-spacing:.06em;color:#c8a45c;line-height:1.8;
  border-left:2px solid var(--gold);padding-left:11px}
.dty-tip[hidden]{display:none}

/* ===== 右栏：图标网格（固定高度 + 纵向滚动） ===== */
.dty-index{min-width:0}
.dty-grid-head{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;
  border-bottom:1px solid rgba(200,164,92,.22);
  font-family:var(--font-title);font-size:12px;letter-spacing:.32em;color:#8f887a}
.dty-grid-head b{margin-left:auto;font-weight:400;color:var(--gold-l)}
/* 首页网格头右侧的二级页入口 */
.dty-more{margin-left:16px;font-family:var(--font-title);font-size:12px;letter-spacing:.2em;
  color:var(--gold-l);border-bottom:1px solid var(--line-gold);transition:.25s;white-space:nowrap}
.dty-more:hover{color:#fff8ee;border-color:var(--gold-l)}
.dty-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;
  max-height:520px;overflow-y:auto;overflow-x:hidden;padding:18px 12px 18px 2px;margin-top:4px;
  border-bottom:1px solid rgba(200,164,92,.22);scrollbar-width:thin;
  scrollbar-color:rgba(200,164,92,.6) rgba(255,255,255,.05)}
/* 网格滚动条：WebKit 细化描金样式 */
.dty-grid::-webkit-scrollbar{width:9px}
.dty-grid::-webkit-scrollbar-track{background:rgba(255,255,255,.045)}
.dty-grid::-webkit-scrollbar-thumb{background:rgba(200,164,92,.5);border:2px solid transparent;background-clip:content-box}
.dty-grid::-webkit-scrollbar-thumb:hover{background:var(--gold);background-clip:content-box}
.dty-grid:focus-visible{outline:1px solid var(--line-gold);outline-offset:4px}

/* 单个命格图标：原始 110x42 比例（110/42 ≈ 2.62 : 1）
   图标为“深色石纹盘 + 金色描边 + 彩色文字”，深墨底上靠金色描边与轻微外发光拉开层次 */
.dty-item{position:relative;padding:3px;border:1px solid transparent;transition:.24s;line-height:0;
  display:block;width:100%;background:none}
.dty-item img{display:block;width:100%;height:auto;aspect-ratio:110/42;object-fit:contain;
  border:1px solid rgba(200,164,92,.38);box-shadow:0 0 0 0 rgba(200,164,92,0),0 3px 10px rgba(0,0,0,.34)}
.dty-item:hover{border-color:var(--line-gold);background:rgba(200,164,92,.1)}
.dty-item:hover img{border-color:var(--gold);box-shadow:0 0 12px rgba(200,164,92,.3),0 3px 12px rgba(0,0,0,.4)}
.dty-item:focus-visible{outline:2px solid var(--cinnabar-l);outline-offset:1px;border-color:var(--cinnabar-l)}
/* 当前选中项：更强的描金高亮 + 朱砂底纹 + 外发光 */
.dty-item[aria-current="true"]{border-color:var(--gold);background:rgba(184,53,44,.16);
  box-shadow:inset 0 0 0 1px rgba(224,196,137,.5),0 6px 16px rgba(0,0,0,.4),0 0 18px rgba(200,164,92,.3)}
.dty-item[aria-current="true"] img{border-color:var(--gold-l);box-shadow:0 0 14px rgba(224,196,137,.45)}
.dty-item[aria-current="true"]::after{content:"";position:absolute;left:50%;bottom:-7px;width:4px;height:4px;
  border-radius:50%;background:var(--cinnabar-l);transform:translateX(-50%)}

/* ---------- 选定交互动效 ----------
   ::before 平时不用，专做「选中瞬间」的扩散光环。
   CSS 动画会在元素刚开始匹配这条规则时重新触发，所以每次 aria-current 从 false
   变成 true 都会重播一次，不需要 JS 参与；来回切换也不会残留。
   持续态再用一层缓慢呼吸的金光，让「当前是哪个」一直看得出来。
   光环用 box-shadow 扩散而不是 transform 放大：外扩阴影属于 ink overflow，
   不会把网格撑出横向滚动条（横向那 1~2px 的滚动条闪一下比没有动效更难看）。 */
.dty-item::before{content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;opacity:0}
.dty-item[aria-current="true"]{animation:dtyPick .5s cubic-bezier(.34,1.4,.5,1)}
.dty-item[aria-current="true"]::before{animation:dtyRing .72s ease-out}
.dty-item[aria-current="true"] img{animation:dtyHalo 2.6s ease-in-out .5s infinite}

@keyframes dtyPick{
  0%{transform:scale(1)}
  38%{transform:scale(1.05)}
  100%{transform:scale(1)}}
@keyframes dtyRing{
  0%{opacity:.9;box-shadow:0 0 10px 2px rgba(224,196,137,.85)}
  100%{opacity:0;box-shadow:0 0 26px 18px rgba(224,196,137,0)}}
@keyframes dtyHalo{
  0%,100%{box-shadow:0 0 12px rgba(224,196,137,.38),0 3px 10px rgba(0,0,0,.34)}
  50%{box-shadow:0 0 22px rgba(224,196,137,.72),0 3px 10px rgba(0,0,0,.34)}}
/* 被颜色筛选排除的图标：display:none 同时把它移出无障碍树 */
.dty-item[hidden]{display:none}

/* ===== 兼容：万一模块被挪回浅色区块，恢复纸面配色 ===== */
.sec:not(.sec-ink) .dty-sub-title{color:var(--ink)}
.sec:not(.sec-ink) .dty-sub-desc{color:#7d776c}
.sec:not(.sec-ink) .dty-chip{color:var(--ink);border-color:var(--line-gold);background:rgba(255,255,255,.36)}
.sec:not(.sec-ink) .dty-chip b{color:#7d776c}
.sec:not(.sec-ink) .dty-chip[aria-pressed="true"]{background:rgba(200,164,92,.2)}
.sec:not(.sec-ink) .dty-audio{color:var(--cinnabar);background:rgba(255,255,255,.34)}
.sec:not(.sec-ink) .dty-idx{color:var(--ink)}
.sec:not(.sec-ink) .dty-idx b{color:var(--cinnabar)}
.sec:not(.sec-ink) .dty-idx span,.sec:not(.sec-ink) .dty-grid-head{color:#7d776c}
.sec:not(.sec-ink) .dty-count,.sec:not(.sec-ink) .dty-grid-head b{color:var(--jade)}
.sec:not(.sec-ink) .dty-meta,.sec:not(.sec-ink) .dty-grid-head,.sec:not(.sec-ink) .dty-grid{border-color:var(--line)}
.sec:not(.sec-ink) .dty-tip{color:#8a5a3c}
.sec:not(.sec-ink) .dty-item img{border-color:var(--line);box-shadow:0 3px 10px rgba(26,26,24,.12)}
.sec:not(.sec-ink) .dty-plate > img{filter:drop-shadow(0 16px 30px rgba(26,26,24,.26))}

/* ============================================================
   二级页（/destiny/）：data-dty-mode="page"
   index.html 里是「左栏预览 + 右栏网格」两栏、工具条上下堆叠；
   二级页改成「工具条一行 → 法阵 → 满宽网格」的单列大版面。
   面板在二级页常驻（is-live 由 destiny.js 初始化时直接加上），所以不显示空闲提示。
   ============================================================ */
.dty-mod[data-dty-mode="page"]{margin-top:0}
.dty-mod[data-dty-mode="page"] .dty-sub{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  border-top:0;padding-top:0;margin-bottom:14px}
.dty-mod[data-dty-mode="page"] .dty-sub-head{order:1;flex:none}
.dty-mod[data-dty-mode="page"] .dty-sub-title{font-size:20px}
.dty-mod[data-dty-mode="page"] .dty-sub-en{letter-spacing:.3em}
.dty-mod[data-dty-mode="page"] .dty-sub-row{order:2;margin-left:auto;margin-top:0;justify-content:flex-end;flex-wrap:nowrap}
.dty-mod[data-dty-mode="page"] .dty-sub-desc{display:none}
/* chip 已移到 .dty-index 里（「命格图鉴」表头正上方），这里给它和表头之间的间距 */
.dty-mod[data-dty-mode="page"] .dty-index .dty-filters{margin-top:0;margin-bottom:14px}

/* 编号 / 颜色检索框 */
.dty-search{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px;
  border:1px solid var(--line-gold);background:rgba(255,255,255,.05);transition:.25s}
.dty-search:focus-within{border-color:var(--gold);background:rgba(255,255,255,.09)}
.dty-search .ic{width:15px;height:15px;flex:none;color:#8f887a}
.dty-search input{border:0;background:none;outline:none;width:150px;font-size:13.5px;letter-spacing:.08em;color:#e7dfd0}
.dty-search input::placeholder{color:#7d776c;letter-spacing:.1em}
.dty-search input::-webkit-search-cancel-button{-webkit-appearance:none}

/* 单列排版：法阵在上、网格在下。
   首页那个 720/640 的「房间」是给鼠标划入式预览用的，留白很大；
   整页版要在一屏里同时看到工具条、舞台、筛选 chip 和卡片，所以整体收小。
   注意 .dty-mod[data-dty-mode="page"] 的 margin-top:0 必须写在这里：
   destiny.css 在 destiny.html 的内联 <style> 之后加载，同优先级的 .dty-mod{margin-top:78px}
   会把它盖掉，白白多出 78px。 */
.dty-mod[data-dty-mode="page"] .dty-layout{grid-template-columns:1fr;gap:18px}
.dty-mod[data-dty-mode="page"] .dty-preview{width:100%;max-width:680px;margin:0 auto}
.dty-mod[data-dty-mode="page"] .dty-stage{max-width:680px;aspect-ratio:720/340}
.dty-mod[data-dty-mode="page"] .dty-plate{width:86%;top:46%}
/* 舞台压扁后面板几乎盖住整个法阵，所以把盘面放宽到 104%：
   两侧各露出约 60px，配合面板下缘的一点缝隙，法阵才看得出是个"台"。 */
.dty-mod[data-dty-mode="page"] .dty-orb-floor{top:72%;width:104%;transform:translate(-50%,-50%) rotateX(76deg)}
.dty-mod[data-dty-mode="page"] .dty-orb-aura{top:72%;width:86%}
.dty-mod[data-dty-mode="page"] .dty-orb-beam{top:2%;width:28%;height:84%}
.dty-mod[data-dty-mode="page"] .dty-meta,
.dty-mod[data-dty-mode="page"] .dty-tip{max-width:680px;margin-left:auto;margin-right:auto}
.dty-mod[data-dty-mode="page"] .dty-meta{margin-top:12px;padding-top:10px}
.dty-mod[data-dty-mode="page"] .dty-hint{display:none}

/* 二级页整页做成「一屏」：工具条 / 舞台固定，图鉴框吃掉剩余高度并在框内滚动。
   桌面与移动同一套，理由是实测出来的：
     1) 手机：167 张卡片把页面拉长，滑到图鉴时舞台早已出屏（实测 top=-217），
        点命格看不到上方属性；
     2) 桌面：网格框内部可滚 2000px+，鼠标停在框里时滚轮一直被它吃掉
        （实测 grid 900→180 而 page 始终 498），想滚回上方舞台得先把框内滚动耗完，
        手感就是「划不动」。
   页面本身不再需要滚，这两个问题就都不存在了。 --dty-chrome = 导航 + 区块上下留白。 */
.dty-mod[data-dty-mode="page"]{--dty-chrome:176px;display:flex;flex-direction:column;
  height:calc(100vh - var(--dty-chrome))}
.dty-mod[data-dty-mode="page"] .dty-sub{flex:none;margin-bottom:14px}
/* align-items:stretch 必须显式写：基础规则 .dty-layout 是 grid 且带 align-items:start，
   换成 flex 列之后 start 会让子项按内容宽度收缩 —— 实测 .dty-index 只剩 530px（父级 1240），
   图鉴被挤成 3 列。和移动端那条 flex-direction 是同一类「通用属性泄漏」。 */
.dty-mod[data-dty-mode="page"] .dty-layout{display:flex;flex-direction:column;align-items:stretch;
  flex:1;min-height:0;gap:16px}
.dty-mod[data-dty-mode="page"] .dty-preview{flex:none}
.dty-mod[data-dty-mode="page"] .dty-index{flex:1;min-height:0;display:flex;flex-direction:column}
.dty-mod[data-dty-mode="page"] .dty-index .dty-filters,
.dty-mod[data-dty-mode="page"] .dty-grid-head{flex:none}
/* 面板上已经写了编号，这一行在二级页是冗余的，把高度让给图鉴 */
.dty-mod[data-dty-mode="page"] .dty-meta{display:none}
.dty-mod[data-dty-mode="page"] .dty-grid{flex:1;min-height:0;max-height:none;
  grid-template-columns:repeat(auto-fill,minmax(146px,1fr));
  gap:14px;padding:16px;margin-top:0;
  overflow-y:auto;overflow-x:hidden;
  border:1px solid var(--line-gold);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:inset 0 0 44px rgba(0,0,0,.4)}

/* 键盘提示：只有二级页显示 */
.dty-kbd{display:none}
.dty-mod[data-dty-mode="page"] .dty-kbd{display:inline;margin-left:16px;font-size:12px;letter-spacing:.2em;color:#6f6a5f}

/* 卡片下方的「品质 · 编号」一行：名称只存在于图标画面里，没有文字数据，所以只补编号与色阶。
   文字直接用该命格的色阶色（--dty-c 由 destiny.js 写在按钮上）。 */
.dty-cap{display:none}
.dty-mod[data-dty-mode="page"] .dty-item{line-height:1.4}
.dty-mod[data-dty-mode="page"] .dty-cap{display:block;margin-top:7px;text-align:center;
  font-family:var(--font-title);font-size:11.5px;letter-spacing:.16em;
  color:var(--dty-c,#9a9488);opacity:.85}
.dty-mod[data-dty-mode="page"] .dty-item[aria-current="true"] .dty-cap{color:var(--gold-l);opacity:1}

/* ===== 响应式：≤1024 汇总为单列前的过渡，≤768 改为上下结构 ===== */
@media (max-width:1024px){
  .dty-mod{margin-top:64px}
  .dty-layout{grid-template-columns:1fr;gap:30px}
  .dty-stage{max-width:620px;margin:0 auto}
  .dty-meta{max-width:620px;margin-left:auto;margin-right:auto}
  .dty-tip{max-width:620px;margin-left:auto;margin-right:auto}
  .dty-grid{max-height:460px}
}
@media (max-width:768px){
  .dty-mod{margin-top:52px}
  .dty-sub-row{align-items:flex-start;flex-direction:column;gap:12px}
  /* 筛选 chip 允许换行，触摸目标按移动端放宽 */
  .dty-filters{gap:8px}
  .dty-chip{padding:8px 14px;font-size:12.5px}
  /* 移动端：预览面板在上、图标网格在下（grid 单列天然顺序） */
  .dty-layout{gap:24px}
  .dty-grid{grid-template-columns:repeat(3,1fr);gap:9px;max-height:420px;padding:14px 8px 14px 2px}
  .dty-meta{margin-top:14px}
  .dty-idx{font-size:21px}
  .dty-count{font-size:11px;letter-spacing:.18em}
  /* 二级页工具条：窄屏改成两行，检索框占满一行 */
  .dty-mod[data-dty-mode="page"] .dty-sub{gap:12px}
  /* 注意要显式写回 flex-direction:row —— 上面那条通配的移动端规则把它设成了 column，
     只覆盖 flex-wrap 是盖不住的，检索框和音效会各占一行。 */
  .dty-mod[data-dty-mode="page"] .dty-sub-row{margin-left:0;flex-direction:row;flex-wrap:nowrap;
    width:100%;justify-content:flex-start;align-items:center;gap:8px}
  /* 检索框和音效并排一行，别各占一行白吃高度 */
  .dty-mod[data-dty-mode="page"] .dty-search{flex:1 1 auto;min-width:0}
  .dty-mod[data-dty-mode="page"] .dty-search input{width:100%;min-width:0}
  .dty-mod[data-dty-mode="page"] .dty-audio{flex:none}
  /* chip 收紧一点，尽量挤进一行 */
  .dty-mod[data-dty-mode="page"] .dty-chip{padding:6px 10px;font-size:12px;gap:6px}
  .dty-mod[data-dty-mode="page"] .dty-filters{gap:6px}
  /* 触摸端没有实体键盘，箭头提示没有意义 */
  .dty-mod[data-dty-mode="page"] .dty-kbd{display:none}
  /* 手机端一屏布局与桌面同一套（在页面上方的基础规则里），
     这里只改两个数：导航矮一截 → 扣的 chrome 变少；图鉴改 3 列。 */
  .dty-mod[data-dty-mode="page"]{--dty-chrome:140px}
  .dty-mod[data-dty-mode="page"] .dty-layout{gap:10px}
  .dty-mod[data-dty-mode="page"] .dty-grid{flex:1;min-height:0;max-height:none;
    grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:11px}
  /* 手机端把高度让给图鉴框：
     001 / 167 那一行是冗余的（面板上已经写了编号），收起来能多出两行卡片；
     工具条与筛选的间距也一并收紧。 */
  .dty-mod[data-dty-mode="page"] .dty-meta,
  .dty-mod[data-dty-mode="page"] .dty-tip{display:none}
  .dty-mod[data-dty-mode="page"] .dty-sub{margin-bottom:8px;gap:8px}
  .dty-mod[data-dty-mode="page"] .dty-index .dty-filters{margin-bottom:8px}
  .dty-mod[data-dty-mode="page"] .dty-sec{padding-bottom:48px}
}
@media (max-width:560px){
  .dty-grid{grid-template-columns:repeat(3,1fr);gap:7px}
  .dty-item{padding:2px}
  .dty-sub-title{font-size:19px}
}

/* 尊重系统「减少动态效果」偏好：法阵停止旋转与呼吸，选定不再放大/扩散，火星直接不渲染 */
@media (prefers-reduced-motion:reduce){
  .dty-item,.dty-plate,.dty-reflect,.dty-hint{transition-duration:.01ms}
  .dty-ring,.dty-orb-aura,.dty-orb-beam,.dty-orb-sparks i{animation:none}
  .dty-item,.dty-item::before,.dty-item img{animation:none}
  /* 铭牌浮动一并停掉，只留淡入（四角角标、扫光、鼠标发光已按需求移除） */
  .dty-plate{animation:none}
  /* 减少动态效果时不播涟漪序列（emitRipple() 里也会直接 return） */
  .dty-lake-ripples{display:none}
  .dty-plate{transform:translate(-50%,-50%)}
  .dty-stage:not(.is-live) .dty-plate.is-on{transform:translate(-50%,-43%) scale(.97)}
  .dty-orb-sparks{display:none}
  .dty-orb-aura{opacity:.8}
  .dty-orb-beam{opacity:.7}
}