/* ============================================================
   JYC HoloCard Engine v2 — 数据驱动闪卡组件样式 (⑤五档新框接线版)
   命名空间: .hc (根容器) — 不污染宿主页面
   来源: layout.html v8 定案版式 (锚定网格/名签三件套/活价值/卡背数据面)
   多实例: 无 ID, 全部 class; frame 图经 --frame-url 变量注入
   ============================================================ */

/* ---------- 根容器 / 翻面 ---------- */
.hc { perspective: 1400px; }
.hc, .hc * { margin: 0; padding: 0; box-sizing: border-box; }
.hc .flipper { position: relative; width: 100%; aspect-ratio: 5/7;
  transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,.9,.3,1); }
.hc .flipper.flipped { transform: rotateY(180deg); }
.hc .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 18px; }
.hc .face.back { transform: rotateY(180deg); }

/* ---------- 闪卡引擎 (正面) ---------- */
/* --kf = 卡实宽/750 (新框源图宽), JS(ResizeObserver) 注入宿主; .4 为 300px 宽兜底 */
.hc { --kf: .4; }
.hc .holo3d { --rx:0deg; --ry:0deg; --px:0; --py:0; --mx:50%; --my:50%; --hyp:0;
  --inx: calc(112px * var(--kf)); --iny: calc(117px * var(--kf));  /* \u540d\u7b7e/\u7f16\u53f7\u951a\u70b9: \u6cbf\u7528\u9a8c\u6536\u7248\u89c6\u89c9\u4f4d (300px\u5361\u2248\u65e7 --k \u4f53\u7cfb\u540c\u4f4d) */
  width: 100%; height: 100%; position: relative; border-radius: 18px;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  /* ㊑ 2026-09-13 陀螺仪边框频闪根治 (用户: "开启陀螺仪后边框一直闪, 之前没调好"):
     旧值 transform-style: preserve-3d — holo3d 内部没有任何 Z 轴变换 (羻面由外层 .flipper 负责), preserve-3d 纯属多余;
     但它让 7 个 mix-blend-mode 框层 (fbrush/flit×4/frim/fspec + shine/glare/aura) 落在 3D 渲染上下文里——Chromium/WebKit
     对 3D 上下文中的混合层每帧重新判定是否"扁平化"合成, 传感器连续微动 → 合成路径反复切换 → 框上叠层一帧亮一帧暗。
     gyro.js 的死区/量化只能减写入次数, 压不住这个渲染层面的闪。
     改: flat + isolation:isolate → holo3d 自身作为一个稳定的 2D 合成组被整体 3D 旋转, 框层混合在组内完成, 不再随角度切换路径。
     副作用: 无 (foil.js 早已不依赖 plus-lighter; 内部无 translateZ)。 */
  transform-style: flat; isolation: isolate; backface-visibility: hidden;
  transition: transform .5s cubic-bezier(.2,.8,.3,1);
  box-shadow: 0 26px 54px -18px rgba(0,0,0,.85);
  font-family: system-ui; }
.hc .holo3d.live { transition: transform .06s linear; }
.hc .layer { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; }
.hc .layer img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover;
  transform: translate(calc(var(--px)*var(--d)*14px), calc(var(--py)*var(--d)*14px));
  transition: transform .5s cubic-bezier(.2,.8,.3,1); }
.hc .holo3d.live .layer img { transition: transform .06s linear; }
.hc .l-bg { --d: -0.25; }
.hc .l-fx { --d: 0.12; mix-blend-mode: screen; opacity: .85; }
/* 平面模式: composed 单图 (④分层存储落地前的真卡形态), 轻视差保留 holo 手感 */
.hc .l-art { --d: -0.12; background: #0b0d12; }
/* 五档新框系统: 源图 750×1050, 窗口 x50-698 y120-932 (五档几何已规整一致)
   图源经 JS 注入 --frame-url (按稀有度自动选 frame_{tier}.webp)
   overflow:visible — 扫光 ::after 用负 inset 盖框区, 不能被裁 */
.hc .l-frame { --d: 0; pointer-events: none; overflow: visible;
  /* ⑰ 框整图铺满 (卡 aspect 5/7 = 源图 750:1050 = 1500:2100, 几何严格等比, 无需九宫切片)
     原 border-image slice 方案在切片边界会产生 1-2 设备像素的暗缝 (两片各自对透明抗锯齿) → 改整图 background 根治;
     与 l-fglow/l-frim/l-fspec 的 mask-size 100% 100% 完全同构, 光效与金属像素级对齐 */
  background: var(--frame-url) center / 100% 100% no-repeat; }
/* ⑰ 框效公共 mask: 所有框上光效都用框自身 alpha 裁切 → 光只落在金属上, 永不冲画面 */
.hc .l-fglow, .hc .l-frim, .hc .l-fspec { --d: 0; pointer-events: none;
  -webkit-mask-image: var(--frame-url); mask-image: var(--frame-url);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* 主体: 破框, 脚踩框底 */
.hc .l-subject { --d: 0.4; overflow: visible; }
/* h94% = 敲定标准 (agreed/holocard.css 行39): 主体大、破框、头顶可越框顶 — 敲定美学;
   subject 素材已统一裁边规整到敲定版边距(上2.4%/下3.6%), 尺寸观感与 /engine 对齐 */
.hc .l-subject img { inset: auto; left: 0; bottom: 4.5%; width: 100%; height: 94%;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)); }

/* ---------- 名签三件套 (五行印+竖名+星级) ---------- */
.hc .namecol { position: absolute; left: calc(var(--inx)*.5); top: 50%; transform: translateY(-50%);
  --d: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 9px 5px 11px; border-radius: 999px;
  background: linear-gradient(to bottom, rgba(30,18,6,.9), rgba(14,8,3,.82));
  border: 1px solid rgba(252,211,77,.5);
  box-shadow: inset 1px 0 0 rgba(255,240,190,.2), 2px 2px 8px rgba(0,0,0,.55); }
.hc .cardname { writing-mode: vertical-rl; font-size: .98rem; font-weight: 900; letter-spacing: .24em; white-space: nowrap;
  background: linear-gradient(160deg, #fff3c4, #fcd34d 45%, #d99a35 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.85)); }
.hc .seal { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 900; font-family: "Songti SC","STSong",serif;
  border: 1.5px solid; }
/* 五行五印 (篆刻风圆章五色) */
.hc .seal.wx-fire  { color: #ffd9c4; border-color: rgba(255,120,70,.85); box-shadow: 0 0 9px rgba(255,90,40,.6);
  background: radial-gradient(circle at 35% 30%, #b83a14, #5e1404 75%); }
.hc .seal.wx-water { color: #cfe8ff; border-color: rgba(80,160,255,.85); box-shadow: 0 0 9px rgba(60,140,255,.6);
  background: radial-gradient(circle at 35% 30%, #1a5db8, #082b5e 75%); }
.hc .seal.wx-wood  { color: #d8f5cf; border-color: rgba(110,220,110,.85); box-shadow: 0 0 9px rgba(80,200,90,.55);
  background: radial-gradient(circle at 35% 30%, #2e8b32, #0c3d10 75%); }
.hc .seal.wx-metal { color: #fffbe8; border-color: rgba(240,225,180,.9); box-shadow: 0 0 9px rgba(255,240,200,.6);
  background: radial-gradient(circle at 35% 30%, #a89263, #4f4326 75%); }
.hc .seal.wx-earth { color: #ffedc2; border-color: rgba(215,170,80,.9); box-shadow: 0 0 9px rgba(210,160,60,.55);
  background: radial-gradient(circle at 35% 30%, #8a6420, #402c08 75%); }
.hc .stars { display: flex; flex-direction: column; gap: 3px; }
.hc .stars i { width: 11px; height: 11px; display: inline-block;
  background: linear-gradient(135deg, #fff3c4, #fcd34d 50%, #b45309);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter: drop-shadow(0 0 3px rgba(252,211,77,.8)); }

/* ---------- JB 活价值 (鎏金字入座框上铭牌槽 + 市场心跳) ----------
   铭牌槽内净空源图 x228-521 y953-1014, 中心 (50%, 93.7%) — 五档通用; 无底胶囊 */
.hc .jbcenter { position: absolute; left: 50%; top: 93.7%;
  transform: translate(-50%, -50%); --d: 0; pointer-events: none; white-space: nowrap;
  display: flex; align-items: baseline; gap: calc(12px * var(--kf)); line-height: 1;
  font-size: calc(40px * var(--kf)); font-weight: 900; font-variant-numeric: tabular-nums; }
.hc .jbcenter .jtxt { background: linear-gradient(175deg, #fffbe8 8%, #ffe58a 32%, #f5b93c 55%, #b4791d 78%, #ffd76e 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.85)); }
.hc .jbcenter small { font-size: calc(22px * var(--kf)); font-weight: 800; color: #e8c565;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.85)); }
/* 心跳涨跌: 无底样式 → 整体辉光(drop-shadow)收尾归零 */
.hc .jbcenter.tick-up   { animation: hcTickUp .9s ease-out; }
.hc .jbcenter.tick-down { animation: hcTickDown .9s ease-out; }
@keyframes hcTickUp {
  0%   { filter: drop-shadow(0 0 10px rgba(74,222,128,.95)) drop-shadow(0 0 4px rgba(74,222,128,.7)); }
  100% { filter: none; } }
@keyframes hcTickDown {
  0%   { filter: drop-shadow(0 0 10px rgba(248,113,113,.95)) drop-shadow(0 0 4px rgba(248,113,113,.7)); }
  100% { filter: none; } }

/* ---------- 认证印 + 涨跌幅 ---------- */
.hc .certwrap { position: absolute; right: 6.5%; bottom: 14.5%; --d: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hc .certstamp { display: flex; width: 58px; height: 58px; border-radius: 50%;
  background: conic-gradient(from 0deg, #ffd76e, #7ef2c0, #7eb8ff, #d98cff, #ffd76e);
  padding: 2.5px; align-items: center; justify-content: center;
  animation: hcCertSpin 7s linear infinite; box-shadow: 0 0 16px rgba(160,220,255,.5); }
@keyframes hcCertSpin { to { filter: hue-rotate(360deg); } }
.hc .certstamp b { width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #2c2158, #16103a 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #e9ddff; font-size: .52rem; font-weight: 900; letter-spacing: .08em; gap: 1px; }
.hc .certstamp b span { color: #fcd34d; font-size: .36rem; letter-spacing: .06em; }
.hc .delta { font-size: .55rem; font-weight: 800; border-radius: 999px; padding: 1px 7px;
  background: rgba(10,6,26,.7); }
.hc .delta.up   { color: #4ade80; border: 1px solid rgba(74,222,128,.45); text-shadow: 0 0 6px rgba(74,222,128,.5); }
.hc .delta.down { color: #f87171; border: 1px solid rgba(248,113,113,.45); text-shadow: 0 0 6px rgba(248,113,113,.5); }

/* ---------- 编号 / 版权 ---------- */
.hc .cardno { position: absolute; left: calc(var(--inx)*.55); bottom: calc(var(--iny)*.2);
  --d: 0; color: rgba(255,235,190,.6); font-size: 7px; letter-spacing: .16em;
  font-variant-numeric: tabular-nums; pointer-events: none; }
.hc .copyline { position: absolute; right: calc(var(--inx)*.55); bottom: calc(var(--iny)*.2); --d: 0;
  text-align: right; color: rgba(255,235,190,.5); font-size: 6.5px; letter-spacing: .2em;
  font-variant-numeric: tabular-nums; pointer-events: none; }

/* ---------- 闪箔 / 眩光 ---------- */
/* ⑰ 闪箔/眩光 排除框区 (双 mask exclude): 彩虹箔只压画面窗口, 金属框保持本色, 框上只走自己的镜面高光 */
.hc .l-shine, .hc .l-glare {
  -webkit-mask-image: linear-gradient(#000, #000), var(--frame-url);
  mask-image: linear-gradient(#000, #000), var(--frame-url);
  -webkit-mask-size: 100% 100%, 100% 100%; mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: xor; mask-composite: exclude; }
.hc .l-shine { --d: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg,
    hsla(283,70%,58%,.35) 0%, hsla(2,74%,59%,.35) 7%, hsla(53,90%,60%,.35) 14%,
    hsla(93,60%,52%,.35) 21%, hsla(176,70%,50%,.35) 28%, hsla(228,70%,60%,.35) 35%, hsla(283,70%,58%,.35) 42%);
  background-size: 400% 400%; background-position: var(--mx) var(--my);
  mix-blend-mode: color-dodge; opacity: calc(.16 + var(--hyp)*.42);
  filter: brightness(calc(.65 + var(--hyp)*.35)) contrast(1.9) saturate(1.35); }
.hc .l-glare { --d: 0; pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 28%, transparent 60%);
  mix-blend-mode: overlay; opacity: calc(.28 + var(--hyp)*.5); }

/* ---------- 未鉴定态 (哑卡封印) ---------- */
.hc .sealed-hint { display: none; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--iny)*.75); --d: 0; white-space: nowrap; color: #8d80b8;
  font-size: .64rem; font-weight: 800; letter-spacing: .3em; pointer-events: none;
  border: 1px dashed rgba(148,120,255,.45); border-radius: 6px; padding: 4px 14px;
  background: rgba(10,6,26,.6); }
.hc .sealfilm { --d: 0; pointer-events: none; display: none; border-radius: 18px;
  background: repeating-linear-gradient(135deg, rgba(120,100,190,.07) 0 8px, rgba(255,255,255,.045) 8px 16px);
  backdrop-filter: saturate(.82) brightness(.94); }
.hc .sealwax { position: absolute; right: 8%; top: 34%; --d: 0; display: none; pointer-events: none;
  width: 64px; height: 64px; border-radius: 50%; transform: rotate(-12deg);
  background: radial-gradient(circle at 38% 32%, #8d7fd0, #4c3a8f 60%, #2c1f60);
  border: 2px dashed rgba(230,220,255,.55); box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 0 12px rgba(0,0,0,.4);
  align-items: center; justify-content: center;
  color: #efe8ff; font-size: .6rem; font-weight: 900; letter-spacing: .15em; text-align: center; line-height: 1.35; }
.hc .unidentified .jbcenter, .hc .unidentified .certwrap, .hc .unidentified .namecol { display: none; }
.hc .unidentified .sealed-hint { display: block; }
.hc .unidentified .sealfilm { display: block; }
.hc .unidentified .sealwax { display: flex; }
.hc .unidentified .l-shine, .hc .unidentified .l-glare { opacity: 0 !important; }
.hc .unidentified { --damp: .45; }
.hc .unidentified .layer img { transform: translate(calc(var(--px)*var(--d)*14px*var(--damp,1)), calc(var(--py)*var(--d)*14px*var(--damp,1))); }

/* ---------- ⑰五档框效 v2: 各向异性金属高光 (mask 约束 · 倾角驱动 · 零 filter 动画) ----------
   五色铁律不变: 普通白/稀有青/史诗紫/传说金/神话红 (--fxc 在下方 ⑧ 段定义)
   层次 (自下而上): l-fglow 外溢光晕(框下) → l-frame 金属本体 → l-frim 受光面边光 → l-fspec 镜面高光线+bloom
   全部 opacity/transform/background-position 动画, 不再对大 border-image 元素跑 filter (GPU 友好) */

/* ① 外溢光晕: 框形状的档色光, 放在框下方向外漫射 — 替代旧 drop-shadow 呼吸 + ::before 通道脉冲两层 */
/* 注: CSS 渲染顺序 filter → mask, 若 blur 与 mask 同元素会被 mask 裁回框形; 故 mask 放子元素 i, blur 放父层 → 光真正外溢 */
.hc .l-fglow { overflow: visible; -webkit-mask-image: none; mask-image: none; border-radius: 0;
  filter: blur(calc(9px*var(--kf) + 3px)); transform: scale(1.012);
  animation: hcGlowBreath var(--glow-t, 4.2s) ease-in-out infinite; }
.hc .l-fglow i { position: absolute; inset: 0; display: block;
  -webkit-mask-image: var(--frame-url); mask-image: var(--frame-url);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: rgba(var(--fxc), 1); }
@keyframes hcGlowBreath { 0%,100% { opacity: calc(.14*var(--fxi)); } 50% { opacity: calc(.34*var(--fxi)); } }

/* ①b 材质 C: 拉丝微纹理 (make_frame_maps.py brush.webp: 上下带横丝/左右带纵丝, 只落平坦金属面不进凹槽)
   overlay 中性灰 128 ± 9%, 补升清补不出的金属微细节; 强度随倾角略增 (侧光下拉丝更显) */
.hc .l-fbrush { --d: 0; pointer-events: none; mix-blend-mode: overlay;
  background: url('/static/holo/brush.webp?v1') center / 100% 100% no-repeat;
  opacity: calc(.45 + var(--hyp)*.3); }
/* ①c 材质 B: 烘焙受光导数图 (lit_l/r/u/d: 光从左/右/上/下时各斜面的明暗增量, 五档几何一致共用一套)
   四张按倾角配权: 倾右 (--px>0) 光源在右 → lit_r 权重升; 中性灰 128 overlay = 无效果, 所以静置时几乎不可见,
   倾斜时每一道斜面/宝石爪/字母棱都真的随光向翻面 — 替代整片线性渐变的"假受光" */
.hc .l-flit { --d: 0; pointer-events: none; mix-blend-mode: overlay;
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
  transition: opacity .12s linear; }
/* 注: 四张必须是 holo3d 的直接子层 (兄弟), 嵌套在父容器内的 mix-blend 会对着父容器的透明背景混合而非框金属 (Chromium 实测) */
.hc .l-flit.fl-l { background-image: url('/static/holo/lit_l.webp?v1'); opacity: calc(max(0, var(--px) * -1) * .8); }
.hc .l-flit.fl-r { background-image: url('/static/holo/lit_r.webp?v1'); opacity: calc(max(0, var(--px)) * .8); }
.hc .l-flit.fl-u { background-image: url('/static/holo/lit_u.webp?v1'); opacity: calc(max(0, var(--py) * -1) * .8); }
.hc .l-flit.fl-d { background-image: url('/static/holo/lit_d.webp?v1'); opacity: calc(max(0, var(--py)) * .8); }
/* 静置默认: 顶光微量常驻, 让静态框也有"上亮下暗"的雕塑体积 */
.hc .holo3d:not(.live) .l-flit.fl-u { opacity: .25; }

/* ② 受光面边光: 线性渐变方向跟随倾角 — 倾左则左框亮、右框暗, 模拟金属受光面 */
.hc .l-frim { mix-blend-mode: soft-light; opacity: calc(.55 + var(--hyp)*.45);
  background: linear-gradient(calc(135deg + var(--px)*70deg + var(--py)*-70deg),
    rgba(255,255,255,.0) 20%, rgba(255,255,255,.26) 50%, rgba(0,0,0,.22) 80%);
  transition: opacity .3s ease; }

/* ③ 镜面高光: 一条 1.5% 宽锐利镜面线 + 一层 8% 宽 bloom, 位置由倾角驱动 (--mx), 静置时缓慢巡游
   background-position 动画, 两条带叠在同一渐变里避免多层 */
.hc .l-fspec { mix-blend-mode: screen; opacity: calc(.55 + var(--hyp)*.45);
  --spc: 255,255,255;   /* 镜面线芯色, 深色框按档改带色 */
  background:
    linear-gradient(112deg, transparent 0%, transparent 46.8%, rgba(var(--spc),.14) 48.2%,
      rgba(var(--spc),.9) 49.7%, rgba(var(--spc),1) 50%, rgba(var(--spc),.9) 50.3%,
      rgba(var(--spc),.14) 51.8%, transparent 53.2%, transparent 100%),
    linear-gradient(112deg, transparent 40%, rgba(var(--fxc), .3) 50%, transparent 60%);
  background-size: 300% 100%, 300% 100%;
  background-position: calc(var(--mx) * 1.6 - 30%) 0, calc(var(--mx) * 1.6 - 30%) 0;
  transition: background-position .18s ease-out, opacity .3s ease; }
/* 静置(非 live) 时高光缓慢巡游: 用 @keyframes 覆盖 position, live 时被内联变量驱动接管 */
.hc .holo3d:not(.live) .l-fspec { animation: hcSpecIdle var(--spec-t, 6.5s) ease-in-out .35s infinite; }
/* 巡游起止都在 50% (= 指针归零位), 135%→-35% 的回绕发生在框外两侧不可见; 0.35s 延迟留给离手过渡 → 进/出 live 无跳变 */
@keyframes hcSpecIdle { 0%,8% { background-position: 50% 0, 50% 0; } 52% { background-position: 135% 0, 135% 0; }
  52.01% { background-position: -35% 0, -35% 0; } 92%,100% { background-position: 50% 0, 50% 0; } }
/* live 接管瞬间: 动画被移除 → 从巡游位过渡到指针位 (.14s 缓出, 既不跳变也不拖手) */
.hc .holo3d.live .l-fspec { transition: background-position .14s ease-out, opacity .3s ease; }

/* 五档节奏 & 强度: 普通最含蓄, 神话最盛 */
.hc .tier-common { --glow-t: 5.2s; --spec-t: 9s; }
.hc .tier-rare   { --glow-t: 4.6s; --spec-t: 7.5s; }
.hc .tier-epic   { --glow-t: 4s;   --spec-t: 6.5s; }
.hc .tier-legend { --glow-t: 3.6s; --spec-t: 5.5s; }
.hc .tier-mythic { --glow-t: 3.2s; --spec-t: 4.8s; }
/* 深色框(史诗紫/神话红 本体亮度低): 高光线换档色白芯, 避免白线过跳 */
.hc .tier-epic .l-frim, .hc .tier-mythic .l-frim { opacity: calc(.4 + var(--hyp)*.4); }
.hc .tier-epic .l-fspec   { --spc: 236,214,255; opacity: calc(.34 + var(--hyp)*.42); }
.hc .tier-mythic .l-fspec { --spc: 255,206,196; opacity: calc(.36 + var(--hyp)*.42); }
.hc .tier-rare .l-fspec   { --spc: 232,250,255; }
.hc .tier-legend .l-fspec { --spc: 255,250,230; }
/* 普通: 只保留边光 + 极弱高光 (素雅但体面) */
.hc .tier-common .l-fspec { opacity: calc(.32 + var(--hyp)*.35); }
.hc .tier-common .l-fglow { --glow-t: 6s; }

/* ---------- ⑱ 槽光系统 v3 (Groove Light) — 几何: 用户手工标注凹槽中心线 (2026-09-13) → grooves.json tiers[tier] ----------
   层位 (v3 改): l-aura(主体背光) / l-ember(画面内粒子) 在 l-fglow 之下 ; l-groove 在 l-fspec 之上、l-subject 之下 → 主体永远遮住框光, 不再"头部半透"。
   .l-groove 内两张 svg:
     svg.gs  槽内光, mask = groove_<tier>.webp (中心线按槽宽膨胀), 描边/光晕再宽也不出槽
             path: g-base 常亮底光 / g-flow 主光 / g-glow 光晕 ; class k-vrail 长竖槽 · k-hrail 横槽 · k-gem 宝石座环 · k-plate 名牌环
     svg.gm  宝石座心 (不 mask): g-gem 径向渐变发光宝石 · g-star 八芒星爆
   五档物理 (递进: 亮度 · 层数 · 节奏 · 粒子):
     普通 银辉  : 底光常亮 + 长槽慢扫一道白光 + 宝石心慢呼吸 + 极淡背光            (体面, 不简陋)
     稀有 冷光  : 扫光更快更亮带光晕 + 名牌随扫 + 宝石心呼吸 + 青色背光
     史诗 充能  : 宝石心轮转充能→ 邻接长槽放电(带光晕) → 名牌应答闪 → 星爆 ; 紫背光随放电脉冲 ; 稀疏紫尘上浮
     传说 熔金  : 全槽金液常亮 + 每槽一段高亮热流连续环行(非虚线) + 宝石心金焰 + 星爆 ; 金背光 ; 金尘上浮
     神话 裂隙  : 全槽双拍心跳(底光更红) + 光晕 + 宝石心同拍猛闪 + 每 3 拍全框爆闪 + 星爆 ; 红背光同拍 ; 密集余烬
   --fxc 档能量色 / --fxi 强度 (五色铁律: 白/青/紫/金/红) ; 只有 opacity / dashoffset / transform 动画 */
.hc .tier-common { --fxc: 226,230,238; --fxi: .5;  }
.hc .tier-rare   { --fxc: 96,211,240;  --fxi: .65; }
.hc .tier-epic   { --fxc: 192,132,252; --fxi: .8;  }
.hc .tier-legend { --fxc: 255,214,110; --fxi: .92; }
.hc .tier-mythic { --fxc: 255,86,74;   --fxi: 1;   }

.hc .l-groove { --d: 0; pointer-events: none; overflow: visible; }
.hc .l-groove svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hc .l-groove svg.gs {
  -webkit-mask-image: var(--groove-url); mask-image: var(--groove-url);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.hc .l-groove path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* 常亮底光: 全档可见 (槽宽 8 viewBox 单位, 描 7 填满) */
.hc .g-base { stroke: rgba(var(--fxc), calc(.16 + var(--fxi)*.22)); stroke-width: 7; }
/* 主光: 一段 dash 长=槽长 (--seg), dashoffset 从 +L 走到 -L (整段进-出) */
.hc .g-flow { stroke: rgb(var(--fxc)); stroke-width: 7; opacity: 0; stroke-dasharray: var(--seg) var(--gap); }
.hc .g-glow { stroke: rgba(var(--fxc), .7); stroke-width: 18; opacity: 0; filter: blur(3px); stroke-dasharray: var(--seg) var(--gap); }
/* 宝石座心 / 星爆 */
.hc .g-gem { opacity: 0; transform-box: fill-box; transform-origin: center; }
.hc .g-star { stroke: rgba(255,255,255,.95); stroke-width: 2.4; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* 主体背光 (l-aura): 画面窗口内、主体之后的档色柔光, 随档增强 */
.hc .l-aura { --d: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 62% 55% at 50% 42%, rgba(var(--fxc), 1) 0%, rgba(var(--fxc), .35) 45%, transparent 75%);
  opacity: var(--aura); animation: auraBreath calc(var(--gl-t) * 1) ease-in-out infinite; }
@keyframes auraBreath { 0%,100% { opacity: calc(var(--aura) * .7); } 50% { opacity: var(--aura); } }

/* ================= 五档乐句编排 v4 (2026-09-13 用户: "五档都缺编排, 各有特色, 神话最绚") =================
   原则: 每档一个主时钟 --gl-t, 一个乐句 = 若干拍, 全部层 (槽/宝石/背光/框光晕/粒子) 用同一时长 + 各自 delay 锁相, 不再各跑各的。
   每档一个"性格动词":
     普通 · 巡    : 一道白光沿槽逆时针巡一圈 (--ph 错相=沿程), 路过哪个宝石座, 座心就应一下。8s 一圈, 其余静。体面。
     稀有 · 呼吸  : 冷光从名牌起, 沿两侧槽上涌到顶, 四角同时点亮, 再退潮; 背光同拍起落。6s 一呼一吸。
     史诗 · 充能→释放 : 四拍轮转: 一角宝石转圈充能 → 满 → 邻接槽放电 → 名牌应答 → 星爆 → 背光脉冲; 下一角。因果链清楚。
     传说 · 环流+过角星爆 : 金液在槽内常流 (连续无缝), 热流头每经过一个宝石座, 那座金焰涨一下并星爆; 背光慢涨落; 金尘上浮。绵延不断。
     神话 · 心跳乐句 (3 拍一句, 6.6s) : 拍1 弱 (咚) 拍2 弱 (咚) 拍3 强 (咚—) 全框爆白 + 四角同时星爆 + 前景火星喷发 + 背光暴涨, 然后 1 拍休止 (只剩余烬)。最绚, 但有呼吸, 不是持续噪音。 */
.hc .tier-common { --gl-t: 8s;   --aura: .10; }
.hc .tier-rare   { --gl-t: 6s;   --aura: .16; }
.hc .tier-epic   { --gl-t: 5.6s; --aura: .22; }
.hc .tier-legend { --gl-t: 5s;   --aura: .26; }
.hc .tier-mythic { --gl-t: 2.2s; --aura: .30; }

/* ---------- 普通 · 巡 ---------- */
.hc .tier-common .g-flow.k-vrail, .hc .tier-common .g-flow.k-hrail { stroke: rgba(255,255,255,.9); --pk: .6;
  animation: glRun var(--gl-t) linear infinite; animation-delay: calc(var(--ph) * var(--gl-t) * -.45 - var(--gl-t)*.55); }
.hc .tier-common .g-flow.k-gem, .hc .tier-common .g-flow.k-plate, .hc .tier-common .g-glow, .hc .tier-common .g-star { display: none; }
/* 座心应光: 巡光 --ph 到达该角时 (gph≈ph) 亮一下; 用 --gph 作 delay */
.hc .tier-common .g-gem { animation: gemPass var(--gl-t) ease-out infinite; animation-delay: calc(var(--gph) * var(--gl-t) * -.45 - var(--gl-t)*.55 + var(--gl-t)*.2); --gk: .6; }
@keyframes glRun {
  0%   { stroke-dashoffset: var(--seg); opacity: 0; }
  3%   { opacity: var(--pk, .8); }
  40%  { opacity: var(--pk, .8); }
  45%, 100% { stroke-dashoffset: calc(var(--seg) * -1 - var(--gap)); opacity: 0; } }
@keyframes gemPass { 0%, 100% { opacity: .12; transform: scale(.85); } 6% { opacity: var(--gk, .6); transform: scale(1.05); } 22% { opacity: .12; transform: scale(.85); } }
.hc .tier-common .l-aura { animation: none; }
.hc .tier-common .l-fglow { --glow-t: 8s; }

/* ---------- 稀有 · 呼吸 (一呼一吸 6s: 0-45% 上涌, 45-60% 满盈, 60-100% 退潮) ---------- */
.hc .tier-rare .g-flow { stroke-dasharray: none; stroke: rgb(var(--fxc)); }
/* 上涌: 用 --rise mask (与鉴定仪式同机制) 在 gpaths 上做周期擦亮/擦暗 */
.hc .tier-rare .l-groove svg.gs .gpaths {
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 calc(var(--rise) - 8%), transparent var(--rise));
  mask-image: linear-gradient(to top, #000 0, #000 calc(var(--rise) - 8%), transparent var(--rise));
  animation: rareTide var(--gl-t) ease-in-out infinite; }
@keyframes rareTide { 0% { --rise: 0%; } 45% { --rise: 112%; } 60% { --rise: 112%; } 100% { --rise: 0%; } }
.hc .tier-rare .g-flow.k-vrail, .hc .tier-rare .g-flow.k-hrail, .hc .tier-rare .g-flow.k-plate, .hc .tier-rare .g-flow.k-gem { animation: rareFlow var(--gl-t) ease-in-out infinite; }
.hc .tier-rare .g-glow.k-vrail, .hc .tier-rare .g-glow.k-hrail { animation: rareGlow var(--gl-t) ease-in-out infinite; stroke-dasharray: none; }
.hc .tier-rare .g-glow.k-gem, .hc .tier-rare .g-glow.k-plate, .hc .tier-rare .g-star { display: none; }
@keyframes rareFlow { 0% { opacity: .35; } 45% { opacity: .95; } 60% { opacity: .95; } 100% { opacity: .35; } }
@keyframes rareGlow { 0% { opacity: 0; } 45% { opacity: .55; } 60% { opacity: .55; } 100% { opacity: 0; } }
/* 四角在潮满时同时亮 */
.hc .tier-rare .g-gem { animation: rareGem var(--gl-t) ease-in-out infinite; }
@keyframes rareGem { 0%, 30% { opacity: .1; transform: scale(.8); } 47% { opacity: .9; transform: scale(1.1); } 60% { opacity: .85; transform: scale(1); } 100% { opacity: .1; transform: scale(.8); } }
.hc .tier-rare .l-aura { animation: rareAura var(--gl-t) ease-in-out infinite; }
@keyframes rareAura { 0% { opacity: calc(var(--aura) * .4); } 50% { opacity: calc(var(--aura) * 1.3); } 100% { opacity: calc(var(--aura) * .4); } }
.hc .tier-rare .l-fglow { animation: rareFglow var(--gl-t) ease-in-out infinite; }
@keyframes rareFglow { 0% { opacity: calc(.10*var(--fxi)); } 50% { opacity: calc(.36*var(--fxi)); } 100% { opacity: calc(.10*var(--fxi)); } }

/* ---------- 史诗 · 充能→释放 (四拍轮转, 每拍 --gl-t; 拍内: 0-16% 充能, 17% 满, 17-23% 放电, 22-30% 名牌应答, 17-21% 星爆, 17-24% 背光脉冲) ---------- */
.hc .tier-epic .g-gem { animation: glCharge calc(var(--gl-t) * 4) linear infinite; animation-delay: calc(var(--gi) * var(--gl-t) * -1 - var(--gl-t)*3); }
.hc .tier-epic .g-flow.k-gem { stroke-dasharray: 22px 12px; animation: glChargeRing calc(var(--gl-t) * 4) linear infinite; animation-delay: calc(var(--near) * var(--gl-t) * -1 - var(--gl-t)*3); }
.hc .tier-epic .g-glow.k-gem { stroke-dasharray: none; animation: glChargeGlow calc(var(--gl-t) * 4) ease-in infinite; animation-delay: calc(var(--near) * var(--gl-t) * -1 - var(--gl-t)*3); }
.hc .tier-epic .g-flow.k-vrail, .hc .tier-epic .g-flow.k-hrail, .hc .tier-epic .g-glow.k-vrail, .hc .tier-epic .g-glow.k-hrail {
  animation: glDischarge calc(var(--gl-t) * 4) ease-out infinite; animation-delay: calc(var(--near) * var(--gl-t) * -1 - var(--gl-t)*3); }
.hc .tier-epic .g-flow.k-plate, .hc .tier-epic .g-glow.k-plate { stroke-dasharray: none; animation: glPlateTick calc(var(--gl-t) * 4) ease-out infinite; animation-delay: calc(var(--near) * var(--gl-t) * -1 - var(--gl-t)*3); }
.hc .tier-epic .g-star { animation: glStarEpic calc(var(--gl-t) * 4) ease-out infinite; animation-delay: calc(var(--gi) * var(--gl-t) * -1 - var(--gl-t)*3); }
.hc .tier-epic .l-aura { animation: auraPulse4 calc(var(--gl-t) * 4) ease-out infinite; animation-delay: calc(var(--gl-t) * -3); }
.hc .tier-epic .l-fglow { animation: epicFglow var(--gl-t) ease-out infinite; }
@keyframes epicFglow { 0%, 60% { opacity: calc(.14*var(--fxi)); } 70% { opacity: calc(.5*var(--fxi)); } 100% { opacity: calc(.14*var(--fxi)); } }
@keyframes glCharge { 0% { opacity: .12; transform: scale(.6); } 16% { opacity: .95; transform: scale(1.05); } 17% { opacity: 1; transform: scale(1.5); } 20% { opacity: .2; transform: scale(.7); } 25%, 100% { opacity: .12; transform: scale(.6); } }
@keyframes glChargeRing { 0% { opacity: .08; stroke-dashoffset: 0px; } 16% { opacity: 1; stroke-dashoffset: -170px; } 17% { opacity: 1; stroke-dashoffset: -180px; } 20% { opacity: .15; stroke-dashoffset: -200px; } 25%, 100% { opacity: .08; stroke-dashoffset: -200px; } }
@keyframes glChargeGlow { 0% { opacity: 0; } 14% { opacity: .35; } 17% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes glDischarge { 0%, 16% { stroke-dashoffset: var(--seg); opacity: 0; } 17% { opacity: 1; } 22% { stroke-dashoffset: calc(var(--seg) * -1 - var(--gap)); opacity: .95; } 23%, 100% { stroke-dashoffset: calc(var(--seg) * -1 - var(--gap)); opacity: 0; } }
@keyframes glPlateTick { 0%, 20% { opacity: 0; } 22.5% { opacity: .9; } 30%, 100% { opacity: 0; } }
@keyframes glStarEpic { 0%, 16.5% { opacity: 0; transform: scale(.2) rotate(0deg); } 17.5% { opacity: 1; transform: scale(1.2) rotate(15deg); } 21%, 100% { opacity: 0; transform: scale(1.8) rotate(35deg); } }
@keyframes auraPulse4 { 0%, 16% { opacity: calc(var(--aura) * .7); } 17.5% { opacity: calc(var(--aura) * 1.9); } 24%, 100% { opacity: calc(var(--aura) * .7); } }

/* ---------- 传说 · 环流 + 过角星爆 (热流周期 = --gl-t*1.4 = 7s; 星爆/金焰锁到热流经过各角的相位) ---------- */
.hc .tier-legend .g-base { stroke: rgba(var(--fxc), .32); }
.hc .tier-legend .g-flow { opacity: 1; stroke: rgb(255,250,222);
  stroke-dasharray: calc(var(--seg) * .35) calc(var(--seg) * .65); animation: glMeltRun calc(var(--gl-t) * 1.4) linear infinite; animation-delay: calc(var(--ph) * -3s); }
.hc .tier-legend .g-flow.k-hrail { animation-direction: reverse; }
.hc .tier-legend .g-flow.k-gem { stroke-dasharray: calc(var(--seg) * .5) calc(var(--seg) * .5); animation-duration: calc(var(--gl-t) * .9); }
.hc .tier-legend .g-flow.k-plate { animation-duration: calc(var(--gl-t) * 1.8); }
.hc .tier-legend .g-glow { opacity: .85; stroke: rgba(255,240,190,.8); stroke-dasharray: calc(var(--seg) * .35) calc(var(--seg) * .65); animation: glMeltRun calc(var(--gl-t) * 1.4) linear infinite; animation-delay: calc(var(--ph) * -3s); }
.hc .tier-legend .g-glow.k-hrail { animation-direction: reverse; }
.hc .tier-legend .g-glow.k-gem { stroke-dasharray: calc(var(--seg) * .5) calc(var(--seg) * .5); animation-duration: calc(var(--gl-t) * .9); }
.hc .tier-legend .g-glow.k-plate { animation-duration: calc(var(--gl-t) * 1.8); }
/* 金焰 + 星爆: 同一周期 (--gl-t*1.4), 按 --gph 相位错开 → 视觉上"热流头到哪, 哪角爆" */
.hc .tier-legend .g-gem { animation: legendGem calc(var(--gl-t) * 1.4) ease-in-out infinite; animation-delay: calc(var(--gph) * var(--gl-t) * -1.4); }
@keyframes legendGem { 0%, 100% { opacity: .55; transform: scale(.9); } 12% { opacity: 1; transform: scale(1.18); } 30% { opacity: .55; transform: scale(.9); } }
.hc .tier-legend .g-star { animation: legendStar calc(var(--gl-t) * 1.4) ease-out infinite; animation-delay: calc(var(--gph) * var(--gl-t) * -1.4); }
@keyframes legendStar { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 6% { opacity: 0; } 12% { opacity: 1; transform: scale(1.15) rotate(12deg); } 24% { opacity: 0; transform: scale(1.7) rotate(30deg); } }
.hc .tier-legend .l-aura { animation: auraBreath calc(var(--gl-t) * 1.4) ease-in-out infinite; }
.hc .tier-legend .l-fglow { --glow-t: 7s; }
@keyframes glMeltRun { from { stroke-dashoffset: 0px; } to { stroke-dashoffset: calc(var(--seg) * -1); } }

/* ---------- 神话 · 心跳乐句 (一句 = 4 拍 × 2.2s = 8.8s: 拍1 弱, 拍2 弱, 拍3 强(爆), 拍4 休止) ---------- */
.hc .tier-mythic { --ph4: calc(var(--gl-t) * 4); }
.hc .tier-mythic .g-base { stroke: rgba(var(--fxc), .42); }
.hc .tier-mythic .g-flow { stroke: rgb(255,120,100); stroke-dasharray: none; animation: mythHeart var(--ph4) ease-out infinite; }
.hc .tier-mythic .g-glow { stroke-dasharray: none; stroke-width: 20; animation: mythHeart var(--ph4) ease-out infinite, mythBurstStroke var(--ph4) ease-out infinite; }
/* 血流: 长槽/名牌上一段 30% 亮段, 每拍从宝石座方向冲一次; 第 3 拍冲得更快 (在 keyframe 里用两段位移) */
.hc .tier-mythic .g-flow.k-vrail, .hc .tier-mythic .g-flow.k-hrail, .hc .tier-mythic .g-flow.k-plate {
  stroke-dasharray: calc(var(--seg) * .3) calc(var(--seg) * .7);
  animation: mythHeart var(--ph4) ease-out infinite, mythVein var(--ph4) ease-in-out infinite; }
.hc .tier-mythic .g-flow.k-hrail { animation-direction: normal, reverse; }
.hc .tier-mythic .g-flow.k-gem { stroke: rgb(255,170,150); }
.hc .tier-mythic .g-gem { animation: mythGem var(--ph4) ease-out infinite; }
.hc .tier-mythic .g-star { animation: mythStar var(--ph4) ease-out infinite; }
.hc .tier-mythic .l-aura { animation: mythAura var(--ph4) ease-out infinite; }
.hc .tier-mythic .l-fglow { animation: mythFglow var(--ph4) ease-out infinite; }
.hc .tier-mythic .l-flash { animation: mythFlash var(--ph4) ease-out infinite; }
.hc .tier-mythic .l-spark { animation: mythSpark var(--ph4) ease-out infinite; }
/* 拍位: 拍1 0-25%, 拍2 25-50%, 拍3 50-75%, 拍4 75-100%. 每拍内 咚 在拍首 8% 处 */
@keyframes mythHeart {
  0% { opacity: .12; } 3% { opacity: .8; } 12% { opacity: .18; }
  25% { opacity: .12; } 28% { opacity: .8; } 37% { opacity: .18; }
  50% { opacity: .15; } 53% { opacity: 1; } 58% { opacity: .95; } 68% { opacity: .2; }
  75%, 100% { opacity: .12; } }
@keyframes mythVein {
  0% { stroke-dashoffset: 0px; } 24.9% { stroke-dashoffset: calc(var(--seg) * -1); }
  25% { stroke-dashoffset: 0px; } 49.9% { stroke-dashoffset: calc(var(--seg) * -1); }
  50% { stroke-dashoffset: 0px; } 62% { stroke-dashoffset: calc(var(--seg) * -1); } 74.9% { stroke-dashoffset: calc(var(--seg) * -1); }
  75%, 100% { stroke-dashoffset: calc(var(--seg) * -1); } }
@keyframes mythBurstStroke { 0%, 52% { stroke: rgba(var(--fxc), .7); } 54% { stroke: rgba(255,255,255,1); } 60%, 100% { stroke: rgba(var(--fxc), .7); } }
@keyframes mythGem {
  0% { opacity: .3; transform: scale(.8); } 3% { opacity: .9; transform: scale(1.1); } 12% { opacity: .35; transform: scale(.85); }
  25% { opacity: .3; transform: scale(.8); } 28% { opacity: .9; transform: scale(1.1); } 37% { opacity: .35; transform: scale(.85); }
  50% { opacity: .3; transform: scale(.8); } 53% { opacity: 1; transform: scale(1.45); } 60% { opacity: 1; transform: scale(1.2); } 70% { opacity: .35; transform: scale(.85); }
  75%, 100% { opacity: .25; transform: scale(.8); } }
@keyframes mythStar { 0%, 52% { opacity: 0; transform: scale(.2) rotate(0deg); } 54% { opacity: 1; transform: scale(1.5) rotate(20deg); } 64% { opacity: 0; transform: scale(2.2) rotate(50deg); } 100% { opacity: 0; } }
@keyframes mythAura {
  0% { opacity: calc(var(--aura) * .5); } 3% { opacity: calc(var(--aura) * 1.2); } 12% { opacity: calc(var(--aura) * .6); }
  25% { opacity: calc(var(--aura) * .5); } 28% { opacity: calc(var(--aura) * 1.2); } 37% { opacity: calc(var(--aura) * .6); }
  50% { opacity: calc(var(--aura) * .5); } 53% { opacity: calc(var(--aura) * 2.2); } 62% { opacity: calc(var(--aura) * 1.6); } 72% { opacity: calc(var(--aura) * .6); }
  75%, 100% { opacity: calc(var(--aura) * .45); } }
@keyframes mythFglow { 0%, 50% { opacity: calc(.16*var(--fxi)); } 53% { opacity: .9; } 62% { opacity: calc(.4*var(--fxi)); } 75%, 100% { opacity: calc(.16*var(--fxi)); } }
@keyframes mythFlash { 0%, 52.5% { opacity: 0; } 53.5% { opacity: .55; } 57% { opacity: 0; } 100% { opacity: 0; } }
/* 前景火星: 第 3 拍喷发 (opacity 1 + 上浮加速), 休止拍几乎不见 */
@keyframes mythSpark { 0%, 48% { opacity: .25; } 53% { opacity: 1; } 70% { opacity: .8; } 78%, 100% { opacity: .2; } }

/* ---------- ④c 切卡上电 (.boot 0.9s): 槽光自下而上擦亮 + 框光晕短促亮一下 ---------- */
.hc .boot .l-groove svg.gs .gpaths {
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 calc(var(--rise) - 8%), transparent var(--rise));
  mask-image: linear-gradient(to top, #000 0, #000 calc(var(--rise) - 8%), transparent var(--rise));
  animation: bootRise .9s cubic-bezier(.3,.8,.3,1) both !important; }
@keyframes bootRise { 0% { --rise: 0%; } 100% { --rise: 112%; } }
.hc .boot .l-fglow { animation: bootGlow .9s ease-out both !important; }
@keyframes bootGlow { 0% { opacity: 0; } 55% { opacity: calc(.6*var(--fxi)); } 100% { opacity: calc(.3*var(--fxi)); } }
.hc .boot .l-aura, .hc .boot .l-ember, .hc .boot .l-spark { animation: bootIn .9s ease-out both !important; }
@keyframes bootIn { 0% { opacity: 0; } 100% { opacity: var(--aura, 1); } }

/* ---------- ④b 翻背棱光 (.prism 0.8s+): 翻转期间卡面扫一道棱镜色带 (front 用 l-glare 的姐妹层, 这里直接借 l-shine 的 mask 放一条渐变), 背面数据逐行显现 ---------- */
.hc .flipper.prism .face.front::after { content: ''; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.0) 40%, hsla(283,90%,75%,.55) 46%, hsla(53,100%,80%,.75) 50%, hsla(176,90%,70%,.55) 54%, transparent 62%, transparent 100%);
  background-size: 300% 100%; mix-blend-mode: screen;
  animation: prismSweep .8s ease-in-out both; }
@keyframes prismSweep { 0% { background-position: 120% 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { background-position: -20% 0; opacity: 0; } }
/* 背面: 元素行 / 攻防 / lore 逐行淡入 (只在 prism 且已翻到背面时) */
.hc .flipper.prism.flipped .face.back .el-row { animation: rowIn .35s ease-out both; }
.hc .flipper.prism.flipped .face.back .el-row:nth-child(n)  { animation-delay: calc(.35s + var(--i, 0) * .04s); }
.hc .flipper.prism.flipped .face.back .bk-ad, .hc .flipper.prism.flipped .face.back .bk-lore { animation: rowIn .4s ease-out both; animation-delay: .9s; }
@keyframes rowIn { 0% { opacity: 0; transform: translateX(-6px); } 100% { opacity: 1; transform: translateX(0); } }

/* ---------- ④d 按压涟漪 (.l-ripple i 750ms; .press 卡体 0.985 微缩回弹 420ms) ---------- */
.hc .l-ripple { --d: 0; pointer-events: none; overflow: hidden; }
.hc .l-ripple i { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  border: 2px solid rgba(var(--fxc), .9); box-shadow: 0 0 12px rgba(var(--fxc), .6), inset 0 0 8px rgba(var(--fxc), .35);
  animation: ripple .75s cubic-bezier(.2,.7,.3,1) both; }
@keyframes ripple { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(18); opacity: 0; } }
.hc .holo3d.press { animation: press .42s cubic-bezier(.3,1.6,.4,1) both; }
@keyframes press { 0% { scale: 1; } 30% { scale: .985; } 100% { scale: 1; } }

/* ---------- B: hb-tick 方向化 — 涨: 光从名牌自下而上冲; 跌: 从顶自上而下沉 ---------- */
.hc .l-groove.hb-tick.hb-up svg.gs .gpaths, .hc .l-groove.hb-tick.hb-down svg.gs .gpaths { animation: hbWipe 1.1s ease-out 1; }
.hc .l-groove.hb-tick.hb-up svg.gs .gpaths {
  -webkit-mask-image: linear-gradient(to top, transparent calc(var(--rise) - 30%), #000 calc(var(--rise) - 12%), #000 var(--rise), transparent calc(var(--rise) + 4%), transparent 100%), linear-gradient(#000, #000);
  mask-image: linear-gradient(to top, transparent calc(var(--rise) - 30%), #000 calc(var(--rise) - 12%), #000 var(--rise), transparent calc(var(--rise) + 4%), transparent 100%), linear-gradient(#000, #000);
  -webkit-mask-composite: source-over; mask-composite: add; }
.hc .l-groove.hb-tick.hb-down svg.gs .gpaths { animation-direction: reverse; }
@keyframes hbWipe { 0% { --rise: 0%; } 100% { --rise: 130%; } }
.hc .l-groove.hb-tick.hb-up .g-base { animation: glHbUp 1.1s ease-out 1; }
.hc .l-groove.hb-tick.hb-down .g-base { animation: glHbDown 1.1s ease-out 1; }
@keyframes glHbUp { 0% { stroke: rgba(120,255,170,1); } 100% { stroke: rgba(var(--fxc), calc(.16 + var(--fxi)*.22)); } }
@keyframes glHbDown { 0% { stroke: rgba(255,110,110,.9); } 100% { stroke: rgba(var(--fxc), calc(.16 + var(--fxi)*.22)); } }

/* 粒子 (l-ember, v3.1): 档色余烬/尘, 在画面窗口内、主体之后上浮
   v3 问题: 2px 点 ×7/瓦片, 亮底画面上 screen 几乎不可见, 且等距网格感 → v3.1: 每粒 = 白芯 + 档色光晕 (3~9px), 两层不同瓦片尺寸/速度 (消网格), 加横向摆动 */
.hc .l-ember { --d: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; overflow: hidden; }
.hc .tier-epic .l-ember   { opacity: .6; --em-t: 16s; }
.hc .tier-legend .l-ember { opacity: .9; --em-t: 13s; }
.hc .tier-mythic .l-ember { opacity: 1;  --em-t: 7s; }
.hc .l-ember::before, .hc .l-ember::after { content: ''; position: absolute; inset: -12% -6% 0 -6%; background-repeat: repeat; }
.hc .l-ember::before { background-size: 210px 300px; background-image:
    radial-gradient(circle at 20px 260px,  rgba(255,255,255,.95) 0, rgba(var(--fxc),.9) 1.6px, rgba(var(--fxc),.35) 3.5px, transparent 6px),
    radial-gradient(circle at 96px 210px,  rgba(255,255,255,.9) 0,  rgba(var(--fxc),.85) 1.2px, rgba(var(--fxc),.3) 2.6px, transparent 4.5px),
    radial-gradient(circle at 170px 280px, rgba(255,255,255,1) 0,   rgba(var(--fxc),.95) 2.2px, rgba(var(--fxc),.4) 4.5px, transparent 8px),
    radial-gradient(circle at 56px 120px,  rgba(255,255,255,.8) 0,  rgba(var(--fxc),.8) 1px,    rgba(var(--fxc),.3) 2.2px, transparent 4px),
    radial-gradient(circle at 140px 60px,  rgba(255,255,255,.9) 0,  rgba(var(--fxc),.9) 1.5px,  rgba(var(--fxc),.35) 3px, transparent 5.5px),
    radial-gradient(circle at 190px 160px, rgba(255,255,255,.85) 0, rgba(var(--fxc),.8) 1.2px,  rgba(var(--fxc),.3) 2.4px, transparent 4.5px);
  animation: emberUpA var(--em-t, 14s) linear infinite, emberSway 3.7s ease-in-out infinite alternate, emberFlk 1.9s ease-in-out infinite; }
.hc .l-ember::after { background-size: 260px 380px; background-image:
    radial-gradient(circle at 130px 340px, rgba(255,255,255,1) 0,   rgba(var(--fxc),.95) 2.6px, rgba(var(--fxc),.4) 5px, transparent 9px),
    radial-gradient(circle at 30px 200px,  rgba(255,255,255,.85) 0, rgba(var(--fxc),.85) 1.4px, rgba(var(--fxc),.3) 3px, transparent 5px),
    radial-gradient(circle at 220px 250px, rgba(255,255,255,.9) 0,  rgba(var(--fxc),.9) 1.8px,  rgba(var(--fxc),.35) 3.6px, transparent 6.5px),
    radial-gradient(circle at 80px 40px,   rgba(255,255,255,.8) 0,  rgba(var(--fxc),.8) 1px,    rgba(var(--fxc),.3) 2px, transparent 3.8px),
    radial-gradient(circle at 180px 110px, rgba(255,255,255,.9) 0,  rgba(var(--fxc),.9) 1.6px,  rgba(var(--fxc),.35) 3.2px, transparent 6px);
  animation: emberUpB calc(var(--em-t, 14s) * 1.45) linear infinite, emberSway 5.1s ease-in-out infinite alternate-reverse, emberFlk 2.7s ease-in-out infinite reverse; }
/* 史诗只留一层稀疏 */
.hc .tier-epic .l-ember::after { display: none; }
/* 前景火星 (l-spark): 主体之上的稀疏大粒 (前景景深), 只神话/传说; 密度低、粒径大, 不遮脸 (screen 在白毛上不可见, 在暗处显) */
/* 注: 前景层用 normal 混合 (screen 在亮底画面/白毛上完全不可见, 实测); 粒子自带极淡暗边保证亮底可读 */
.hc .l-spark { --d: 0; pointer-events: none; mix-blend-mode: normal; opacity: 0; overflow: hidden; }
.hc .tier-legend .l-spark { opacity: .7; --em-t: 11s; }
.hc .tier-mythic .l-spark { opacity: .95; --em-t: 6s; }
.hc .l-spark::before { content: ''; position: absolute; inset: -12% -6% 0 -6%; background-repeat: repeat; background-size: 320px 420px; background-image:
    radial-gradient(circle at 60px 380px,  rgba(255,255,255,1) 0,  rgba(var(--fxc),1) 2.4px,  rgba(var(--fxc),.45) 5px, rgba(40,0,0,.28) 7.6px, transparent 9px),
    radial-gradient(circle at 250px 300px, rgba(255,255,255,.95) 0, rgba(var(--fxc),.95) 1.8px, rgba(var(--fxc),.4) 3.8px, rgba(40,0,0,.28) 6.0px, transparent 7px),
    radial-gradient(circle at 150px 150px, rgba(255,255,255,1) 0,  rgba(var(--fxc),1) 3px,    rgba(var(--fxc),.5) 6px, rgba(40,0,0,.28) 9.3px, transparent 11px),
    radial-gradient(circle at 290px 60px,  rgba(255,255,255,.9) 0,  rgba(var(--fxc),.9) 1.6px, rgba(var(--fxc),.35) 3.4px, rgba(40,0,0,.28) 5.1px, transparent 6px);
  animation: emberUpS var(--em-t, 8s) linear infinite, emberSway 4.3s ease-in-out infinite alternate, emberFlk 1.6s ease-in-out infinite; }
/* 神话前景第二层: 更大更亮的余烬 (带拖尾感的竖椭圆), 慢速 */
.hc .tier-mythic .l-spark::after { content: ''; position: absolute; inset: -12% -6% 0 -6%; background-repeat: repeat; background-size: 380px 520px; background-image:
    radial-gradient(ellipse 4px 7px at 90px 480px,  rgba(255,255,255,1) 0,  rgba(var(--fxc),1) 40%, rgba(var(--fxc),.4) 70%, rgba(40,0,0,.28) 88%, transparent 100%),
    radial-gradient(ellipse 3px 5px at 300px 360px, rgba(255,255,255,.95) 0, rgba(var(--fxc),.95) 40%, rgba(var(--fxc),.35) 70%, rgba(40,0,0,.28) 88%, transparent 100%),
    radial-gradient(ellipse 5px 9px at 200px 200px, rgba(255,255,255,1) 0,  rgba(var(--fxc),1) 40%, rgba(var(--fxc),.45) 70%, rgba(40,0,0,.28) 88%, transparent 100%),
    radial-gradient(ellipse 3px 6px at 40px 90px,   rgba(255,255,255,.9) 0,  rgba(var(--fxc),.9) 40%, rgba(var(--fxc),.35) 70%, rgba(40,0,0,.28) 88%, transparent 100%);
  animation: emberUpM 9s linear infinite, emberSway 6s ease-in-out infinite alternate-reverse, emberFlk 2.1s ease-in-out infinite reverse; }
@keyframes emberUpM { to { background-position-y: -520px; } }
@keyframes emberUpS { to { background-position-y: -420px; } }
@keyframes emberUpA { to { background-position-y: -300px; } }
@keyframes emberUpB { to { background-position-y: -380px; } }
@keyframes emberSway { from { background-position-x: -14px; } to { background-position-x: 14px; } }
@keyframes emberFlk { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

/* ---------- ⑲ 鉴定仪式 (Rite of Identification, ④a, 2026-09-13) ----------
   触发: 引擎 setIdentified(true,{rite:true}) / identify() 在 .holo3d 上加 .rite 2.6s 后自动移除。所有动画 both 填充、一次性。
   时间轴 (2.6s):
     0.00–0.45  封印裂解: sealfilm 亮一下→撕裂上飘消失, sealwax 弹裂缩退, sealed-hint 淡出
     0.25–1.05  通电: 槽内光 (.gpaths) 用 linear-gradient mask 随注册属性 --rise 自下而上擦亮: 底部名牌槽→两侧长槽→顶部题栏槽
     0.95–1.75  四角宝石依次充能 (BL→BR→TR→TL, 每 .2s), 每个座心 scale 0→1.4→1 白闪
     1.70–1.95  全框闪白: l-flash (框 alpha mask) 白 → 0 ; 同时 l-fglow 猛亮一次
     1.85–2.60  升起: namecol / jbcenter / certwrap 从下 12px 淡入; l-aura 从 0 升到常态; 卡体轻微 scale 1.015→1
   未鉴定态 opacity:0 !important 的层在 .rite 期间由本段 !important 覆盖为动画驱动。 */
.hc .l-flash { --d: 0; pointer-events: none; opacity: 0; background: #fff;
  -webkit-mask-image: var(--frame-url); mask-image: var(--frame-url); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* 电位面: 常态不参与; .rite 期间 gpaths 用 mask 显示 (mask 由 CSS mask-image 渐变 + --rise 驱动) */
.hc .rite .l-groove svg.gs .gpaths {
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 calc(var(--rise) - 6%), transparent var(--rise));
  mask-image: linear-gradient(to top, #000 0, #000 calc(var(--rise) - 6%), transparent var(--rise));
  animation: riteRise 2.6s cubic-bezier(.25,.8,.3,1) both; }
@keyframes riteRise { 0%, 9% { --rise: 0%; } 40% { --rise: 108%; } 100% { --rise: 108%; } }
/* --rise 需注册为可插值的 <percentage> 自定义属性 */
@property --rise { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
/* ㊑ 倾角变量注册为可插值类型: 此前是未注册的任意字符串, 所有 calc(var(--px)…) 算出的 opacity / 渐变角度 /
   background-position 每次写入都是“离散跳变”, transition 对它们无效 (只能过渡 transform)。注册后变量本身可被过渡,
   下游所有 calc 随之连续 → gyro 量化台阶在这一层被磨平。inherits:true 因为子层靠继承读值。 */
@property --px  { syntax: '<number>';     inherits: true; initial-value: 0; }
@property --py  { syntax: '<number>';     inherits: true; initial-value: 0; }
@property --hyp { syntax: '<number>';     inherits: true; initial-value: 0; }
@property --mx  { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --my  { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --rx  { syntax: '<angle>';      inherits: true; initial-value: 0deg; }
@property --ry  { syntax: '<angle>';      inherits: true; initial-value: 0deg; }
/* .rite 期间 光效层从 unidentified 的 0 过渡: 槽光整层随 rise 立即可见 (mask 负责显隐); 其他层按时序 */
.hc .rite.unidentified .l-groove, .hc .rite .l-groove { opacity: 1 !important; }
.hc .rite .l-groove * { animation-play-state: running !important; }
.hc .rite .l-fglow { animation: riteGlow 2.6s ease-out both !important; opacity: 1 !important; }
@keyframes riteGlow { 0%, 60% { opacity: 0; } 66% { opacity: 1; } 74% { opacity: calc(.3*var(--fxi)); } 100% { opacity: calc(.34*var(--fxi)); } }
.hc .rite .l-fspec { animation: riteSpec 2.6s ease-out both !important; }
@keyframes riteSpec { 0%, 70% { opacity: 0; } 100% { opacity: calc(.55 + var(--hyp)*.45); } }
.hc .rite .l-aura { animation: riteAura 2.6s ease-out both !important; }
@keyframes riteAura { 0%, 66% { opacity: 0; } 100% { opacity: var(--aura); } }
.hc .rite .l-ember, .hc .rite .l-spark { animation: riteIn 2.6s ease-out both !important; }
@keyframes riteIn { 0%, 70% { opacity: 0; } 100% { opacity: 1; } }
.hc .rite .l-shine, .hc .rite .l-glare { animation: riteFoil 2.6s ease-out both !important; }
@keyframes riteFoil { 0%, 66% { opacity: 0; } 100% { opacity: .5; } }
/* 封印裂解 */
.hc .rite .sealfilm { display: block !important; animation: riteSealFilm .55s ease-in both; }
@keyframes riteSealFilm { 0% { opacity: 1; } 100% { opacity: 0; } }
.hc .rite .sealwax { display: flex !important; animation: riteWax .5s cubic-bezier(.6,-.3,.7,1) both; }
@keyframes riteWax { 0% { opacity: 1; transform: rotate(-12deg) scale(1); } 30% { transform: rotate(-6deg) scale(1.18); } 100% { opacity: 0; transform: rotate(20deg) scale(.2); } }
.hc .rite .sealed-hint { display: block !important; animation: riteHint .4s ease-out both; }
@keyframes riteHint { to { opacity: 0; transform: translateX(-50%) translateY(8px); } }
/* 四角宝石依次充能: gm 里 g-gem 按 --gi 序 (BL=2, BR=3, TR=1, TL=0 → 延迟 .95/.1.15/1.35/1.55) */
.hc .rite .g-gem { animation: riteGem .45s cubic-bezier(.2,1.4,.4,1) both !important; }
.hc .rite .g-gem[style*="--gi:2"] { animation-delay: .95s !important; }
.hc .rite .g-gem[style*="--gi:3"] { animation-delay: 1.15s !important; }
.hc .rite .g-gem[style*="--gi:1"] { animation-delay: 1.35s !important; }
.hc .rite .g-gem[style*="--gi:0"] { animation-delay: 1.55s !important; }
@keyframes riteGem { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } }
.hc .rite .g-star { animation: riteStar .5s ease-out both !important; }
.hc .rite .g-star[style*="--gi:2"] { animation-delay: 1.05s !important; }
.hc .rite .g-star[style*="--gi:3"] { animation-delay: 1.25s !important; }
.hc .rite .g-star[style*="--gi:1"] { animation-delay: 1.45s !important; }
.hc .rite .g-star[style*="--gi:0"] { animation-delay: 1.65s !important; }
@keyframes riteStar { 0% { opacity: 0; transform: scale(.2) rotate(0); } 40% { opacity: 1; transform: scale(1.3) rotate(20deg); } 100% { opacity: 0; transform: scale(1.9) rotate(45deg); } }
/* 全框闪白 */
.hc .rite .l-flash { animation: riteFlash 2.6s linear both; }
@keyframes riteFlash { 0%, 65% { opacity: 0; } 67% { opacity: .95; } 75% { opacity: 0; } 100% { opacity: 0; } }
/* 升起: 名签 / 价值 / 鉴定章 */
.hc .rite .namecol { display: flex !important; animation: riteUpL 2.6s ease-out both; }
.hc .rite .jbcenter { display: flex !important; animation: riteUpC 2.6s ease-out both; }
.hc .rite .certwrap { display: flex !important; animation: riteUpR 2.6s ease-out both; }
@keyframes riteUpL { 0%, 71% { opacity: 0; transform: translateY(calc(-50% + 12px)); } 100% { opacity: 1; transform: translateY(-50%); } }
@keyframes riteUpC { 0%, 71% { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } 100% { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes riteUpR { 0%, 71% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }
/* 视差立即恢复 (不给整卡上 filter: 大元素 filter 动画违反性能约束, 闪白由 l-flash 承担) */
.hc .rite { --damp: 1; }
@media (prefers-reduced-motion: reduce) { .hc .rite, .hc .rite * { animation: none !important; } }

/* 价值心跳钩子 (box 业务事件, 保留 .hb-tick class 名): 全槽亮度一次脉冲, 不改色 */
@keyframes glHb { 0% { stroke: rgba(var(--fxc), 1); } 100% { stroke: rgba(var(--fxc), calc(.16 + var(--fxi)*.22)); } }

/* 性能降级 (列表缩略图 <190px): 只留待机微光 */
.hc .fx-lite .g-flow, .hc .fx-lite .g-glow, .hc .fx-lite .g-gem, .hc .fx-lite .g-star, .hc .fx-lite .l-ember, .hc .fx-lite .l-spark, .hc .fx-lite .l-ripple, .hc .fx-lite .l-aura,
.hc .fx-lite .l-fglow, .hc .fx-lite .l-flit, .hc .fx-lite .l-fbrush { display: none; }
/* 未鉴定哑卡: 槽光/光晕/镜面熄灭 */
.hc .unidentified .l-groove, .hc .unidentified .l-ember, .hc .unidentified .l-spark, .hc .unidentified .l-ripple, .hc .unidentified .l-flash, .hc .unidentified .l-aura,
.hc .unidentified .l-fglow, .hc .unidentified .l-fspec { opacity: 0 !important; }
.hc .unidentified .l-frim { opacity: .35 !important; }
.hc .unidentified .l-groove *, .hc .unidentified .l-fglow, .hc .unidentified .l-fspec { animation: none !important; }
/* 无障碍 */
@media (prefers-reduced-motion: reduce) {
  .hc .l-groove *, .hc .l-ember::before, .hc .l-ember::after, .hc .l-spark::before, .hc .l-spark::after, .hc .l-aura, .hc .l-fglow, .hc .l-fspec { animation: none !important; }
}

/* ============================================================
   卡背 数据面
   ============================================================ */
.hc .face.back { background: linear-gradient(165deg, #191036, #0d0824 65%);
  border: 1px solid rgba(148,120,255,.35); overflow: hidden;
  display: flex; flex-direction: column; padding: 14px 14px 12px;
  box-shadow: 0 26px 54px -18px rgba(0,0,0,.85);
  font-family: system-ui; color: #c9bfe8; }
.hc .bk-head { display: flex; justify-content: space-between; align-items: stretch;
  border-bottom: 1px solid rgba(252,211,77,.35); padding-bottom: 7px; }
.hc .bk-idblock { display: flex; flex-direction: column; justify-content: space-between; gap: 3px; }
.hc .bk-brand { color: #fcd34d; font-weight: 900; letter-spacing: .3em; font-size: .72rem; line-height: 1; }
.hc .bk-no { color: #8b7fb8; font-size: .55rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; line-height: 1; }
.hc .barcode-chip { background: #fff; border-radius: 4px; padding: 0 5px; display: flex; align-items: center; }
.hc .barcode-chip svg { display: block; }
.hc .bk-title { display: flex; justify-content: space-between; align-items: baseline; margin: 7px 0 5px; }
.hc .bk-title .n { color: #fff3d6; font-weight: 900; font-size: .85rem; letter-spacing: .1em; }
/* 卡背铭文行 tagline (命名契约 §6.1, 可空) */
.hc .bk-title .tg { color: #c9b8ea; font-size: .52rem; letter-spacing: .18em; margin-top: 2px; opacity: .85; font-weight: 500; }
.hc .bk-title .r { color: #fcd34d; font-size: .55rem; font-weight: 800; letter-spacing: .2em; }
/* 战力行 */
.hc .bk-ad { display: flex; gap: 14px; align-items: center; margin: 6px 0 4px;
  padding: 6px 9px; border-radius: 8px;
  background: rgba(20,12,40,.55); border: 1px solid rgba(148,120,255,.28);
  font-size: .6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.hc .bk-ad .half { flex: 1; display: flex; align-items: center; gap: 6px; }
.hc .bk-ad .lbl { flex-shrink: 0; letter-spacing: .08em; }
.hc .bk-ad .half.atk2 .lbl { color: #ff9c66; }
.hc .bk-ad .half.def2 .lbl { color: #7db8f0; }
.hc .bk-ad .tr { flex: 1; height: 7px; border-radius: 99px; overflow: hidden;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.hc .bk-ad .tf { display: block; height: 100%; width: calc(var(--p)*100%); border-radius: 99px; position: relative; }
.hc .bk-ad .tf::before { content: ''; position: absolute; inset: 0; border-radius: 99px;
  background: linear-gradient(100deg, transparent 32%, rgba(255,255,255,.7) 50%, transparent 68%);
  background-size: 230% 100%; animation: hcBarflow 2.4s linear infinite; mix-blend-mode: screen; }
@keyframes hcBarflow { from { background-position: 190% 0; } to { background-position: -90% 0; } }
.hc .bk-ad .half.def2 .tf::before { animation-delay: 1.2s; }
.hc .bk-ad .half.atk2 .tf { background: linear-gradient(90deg,#7a1a06,#ff6a2a 60%,#ffd08a); box-shadow: 0 0 6px rgba(255,110,40,.6); }
.hc .bk-ad .half.def2 .tf { background: linear-gradient(90deg,#0a2a52,#2e8fe0 60%,#a8dcff); box-shadow: 0 0 6px rgba(70,160,255,.6); }
.hc .bk-ad .num { flex-shrink: 0; color: #fff3d6; width: 30px; text-align: right; }
/* 15 元素表 */
.hc .el-table { flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: 0; }
.hc .el-row { display: flex; align-items: center; gap: 6px; padding: 1.5px 0;
  font-size: .55rem; border-bottom: 1px dashed rgba(148,120,255,.14); }
.hc .el-row .slot { color: #8b7fb8; width: 52px; flex-shrink: 0; }
.hc .el-row .nm { color: #ded4f5; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc .el-row .rr { width: 34px; text-align: center; font-weight: 800; font-size: .48rem; border-radius: 3px; }
.hc .rr.c { color: #9ca3af; } .hc .rr.r { color: #60a5fa; } .hc .rr.e { color: #c084fc; }
.hc .rr.l { color: #fcd34d; } .hc .rr.m { color: #f87171; }
.hc .el-row .cd { color: #7ef2c0; width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
/* 元素单价列 (JB): 有价数据才渲染 */
.hc .el-row .pr { color: #f3d98a; width: 44px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
/* 首铸徽记 (内联于元素名后) */
.hc .el-row .fm { font-style: normal; color: #fcd34d; font-size: .44rem; font-weight: 800;
  margin-left: 3px; padding: 0 3px; border: 1px solid rgba(252,211,77,.5); border-radius: 3px; vertical-align: 1px; }
.hc .bk-lore { margin-top: 6px; color: #a396cc; font-size: .55rem; line-height: 1.65;
  border-left: 2px solid rgba(252,211,77,.4); padding-left: 8px; font-style: italic; }
.hc .bk-foot { margin-top: 8px; display: flex; align-items: stretch; justify-content: space-between; gap: 10px; }
.hc .bk-hashzone { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.hc .bk-hash { color: #6d6390; font-size: .48rem; letter-spacing: .05em; word-break: break-all; line-height: 1.5; }
.hc .bk-cond { color: #7ef2c0; font-size: .55rem; font-weight: 800; }
.hc .hc-qr { background: #fff; padding: 3px; border-radius: 5px; flex-shrink: 0; width: 56px; height: 56px; }
.hc .hc-qr img, .hc .hc-qr canvas { width: 50px !important; height: 50px !important; display: block; }

/* ---------- ⑳ 体感渲染稳定 (2026-09-13 ?v21, 自 box holo-box.css v25.1 上半段并入引擎; 配合 gyro.js v27 输出量化) ----------
   背景: 真机传感器 60-100Hz 直灌 --px/--py, l-flit×4 / l-frim / l-fspec / l-fbrush / l-fglow 每帧重算 → 频闪。
   这里只做"怎么渲染更稳", 不改视觉设计: live 态过渡从 .06s 拉到 .09s 吃掉帧间隙; will-change 提前分层避免每帧重光栅化整卡;
   四向受光图 opacity 过渡拉到 .18s 平滑掉 gyro 量化台阶。覆盖上方 ⓞ/①c 同名规则 (同特异度, 后写者胜)。
   box 侧 holo-box.css 上半段与本段重复, box 可在切到 ?v21 后删去。 */
/* ㊑ live 态: 连 transform 一起过渡倾角变量本身 (已注册 @property), 下游 calc 全部跟随平滑; will-change 提前分层 */
.hc .holo3d.live { transition: transform .09s linear, --px .09s linear, --py .09s linear, --hyp .09s linear,
  --mx .09s linear, --my .09s linear; will-change: transform; }
.hc .holo3d.live .layer img { transition: transform .09s linear; will-change: transform; }
/* 静态回中 (松手): 变量也随 transform 的 .5s 曲线回去, 不再一帧跳回 */
.hc .holo3d:not(.live) { transition: transform .5s cubic-bezier(.2,.8,.3,1), --px .5s cubic-bezier(.2,.8,.3,1),
  --py .5s cubic-bezier(.2,.8,.3,1), --hyp .5s cubic-bezier(.2,.8,.3,1), --mx .5s cubic-bezier(.2,.8,.3,1), --my .5s cubic-bezier(.2,.8,.3,1); }
.hc .holo3d.live .l-shine, .hc .holo3d.live .l-glare, .hc .holo3d.live .l-fspec { will-change: background-position, opacity; }
.hc .holo3d.live .l-flit { transition: opacity .18s linear; will-change: opacity; }
.hc .holo3d.live .l-fbrush, .hc .holo3d.live .l-frim { will-change: opacity; }
.hc .holo3d.live .unidentified .layer img { will-change: transform; }