/* ================= 储君模式：潜龙、继位、决死演出 =================
   潜龙：内奸亮明身份成为野心家；继位：储君继承主公之位；决死：刺客舍命一击（逻辑见 js/ui/chujun-fx.js）。
   继位、决死复用潜龙的外壳（.ql-overlay、背景推镜、文字排版），只换意象和配色，写在文件后半。
   以下是潜龙。
   时间轴按 3.8 秒写，--ql-k 按动画速度等比缩放：
   0–0.6s「内」字徽章在黑幕中亮起 → 0.6s 蓝色裂光斜劈、两半飞散、闪白 →
   0.95s 黑幕向两侧拉开露出背景 → 1.15s「野」字徽章落下 → 1.35s「潜龙」升起 → 1.7s 名字与「内奸→野心家」。
   只动 transform / opacity。 */
.ql-overlay{--k:var(--ql-k,1);--blue:#4aa8ff;--blue2:#bfe6ff;--blood:#c3132c;
  position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;margin:0;padding:0;border:0;max-width:none;max-height:none;
  overflow:hidden;z-index:2147483647;background:#020208;color:#fff;isolation:isolate;animation:qlLife var(--ql-life) both}
.ql-overlay::backdrop{background:transparent}
@keyframes qlLife{0%{opacity:0}4%,90%{opacity:1}100%{opacity:0}}

/* ---------- 背景 ---------- */
.ql-bg{position:absolute;inset:-4%;background:#0c0a18 42% 30%/cover no-repeat;
  filter:saturate(1.08) contrast(1.06) brightness(.8);will-change:transform,opacity;
  animation:qlBg calc(var(--k)*2900ms) calc(var(--k)*900ms) cubic-bezier(.2,.7,.25,1) both}
@keyframes qlBg{from{opacity:0;transform:scale(1.22) translateX(2%)}22%{opacity:1}to{opacity:1;transform:scale(1.03) translateX(0)}}
/* 冷蓝压左上、血红托右下，跟两种徽章的颜色呼应 */
.ql-tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(115deg,#0b1d5acc 0,#24306f66 38%,transparent 58%,#5c0b1a99 100%);
  animation:qlFadeIn calc(var(--k)*700ms) calc(var(--k)*900ms) both}
.ql-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 34%,#02020ae6 100%),linear-gradient(transparent 70%,#02020ad9)}
@keyframes qlFadeIn{from{opacity:0}to{opacity:1}}

/* ---------- 鬼火 ---------- */
.ql-wisps{position:absolute;left:-4%;right:-4%;bottom:-6%;height:42%;pointer-events:none;mix-blend-mode:screen;
  animation:qlRise calc(var(--k)*900ms) calc(var(--k)*1000ms) cubic-bezier(.2,.8,.3,1) both}
.ql-wisps i{position:absolute;bottom:0;left:var(--x);width:24%;height:var(--h);border-radius:50% 50% 40% 40%;transform-origin:50% 100%;
  background:radial-gradient(ellipse at 50% 100%,#e8f6ffcc 0,#5fb4ff99 18%,#1f4dff55 44%,#1f4dff00 70%);
  animation:qlWisp 900ms ease-in-out var(--d) infinite alternate}
@keyframes qlRise{from{transform:translateY(60%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes qlWisp{from{transform:scaleY(.82) scaleX(1.04);opacity:.55}to{transform:scaleY(1.12) scaleX(.94);opacity:.95}}

/* ---------- 两扇黑幕 ---------- */
.ql-curtain{position:absolute;top:0;bottom:0;width:50.5%;z-index:3;background:#020208;will-change:transform;
  animation:qlCurtain calc(var(--k)*680ms) calc(var(--k)*950ms) cubic-bezier(.65,0,.25,1) both}
.ql-curtain-l{left:0;--to:-104%}
.ql-curtain-r{right:0;--to:104%}
/* 合拢时看不出接缝；一拉开，内侧边缘才亮起一道蓝光 */
.ql-curtain::after{content:"";position:absolute;top:0;bottom:0;width:3px;opacity:0;
  background:#9fd2ff;box-shadow:0 0 14px #4aa8ff,0 0 36px #1f5bff;
  animation:qlFadeIn calc(var(--k)*160ms) calc(var(--k)*960ms) both}
.ql-curtain-l::after{right:0}.ql-curtain-r::after{left:0}
@keyframes qlCurtain{to{transform:translateX(var(--to))}}

/* ---------- 「内」字徽章被劈开 ---------- */
.ql-mask{position:absolute;left:50%;top:46%;width:min(34vmin,280px);aspect-ratio:1;margin:0;z-index:4;transform:translate(-50%,-50%);pointer-events:none}
.ql-halo{position:absolute;inset:-40%;border-radius:50%;
  background:radial-gradient(circle,#9b5cff66 0,#5b3a8640 35%,transparent 66%);
  animation:qlHalo calc(var(--k)*1100ms) both}
@keyframes qlHalo{0%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1)}55%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:scale(1.5)}}
/* 两半各裁一块，裁切不动，只把整块往外推 */
.ql-half{position:absolute;inset:0;will-change:transform,opacity}
.ql-half i{position:absolute;inset:0;
  background:url('../assets/ui/identity-emblems-v2.webp?v=b91fcd3f') no-repeat 50% 50%/500% 140%;
  filter:drop-shadow(0 4px 10px #000)}
.ql-half-a{clip-path:polygon(-10% -10%,110% -10%,110% 36%,-10% 64%);
  animation:qlAppear calc(var(--k)*600ms) cubic-bezier(.2,1.2,.4,1) both,qlSplitA calc(var(--k)*700ms) calc(var(--k)*620ms) cubic-bezier(.3,0,.2,1) forwards}
.ql-half-b{clip-path:polygon(-10% 64%,110% 36%,110% 110%,-10% 110%);
  animation:qlAppear calc(var(--k)*600ms) cubic-bezier(.2,1.2,.4,1) both,qlSplitB calc(var(--k)*700ms) calc(var(--k)*620ms) cubic-bezier(.3,0,.2,1) forwards}
@keyframes qlAppear{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes qlSplitA{from{opacity:1;transform:none}to{opacity:0;transform:translate(-38%,-30%) rotate(-20deg) scale(1.05)}}
@keyframes qlSplitB{from{opacity:1;transform:none}to{opacity:0;transform:translate(38%,30%) rotate(16deg) scale(1.05)}}
/* 裂光沿两半的接缝（左 64%、右 36%，约 15 度）一闪而过 */
.ql-crack{position:absolute;left:-45%;right:-45%;top:50%;height:4px;margin-top:-2px;border-radius:2px;transform-origin:50% 50%;
  background:linear-gradient(90deg,transparent,#bfe6ff 18%,#fff 50%,#bfe6ff 82%,transparent);
  box-shadow:0 0 12px #4aa8ff,0 0 34px #1f5bff;
  animation:qlCrack calc(var(--k)*620ms) calc(var(--k)*480ms) cubic-bezier(.5,0,.2,1) both}
@keyframes qlCrack{0%{opacity:0;transform:rotate(-15.6deg) scaleX(0)}25%{opacity:1;transform:rotate(-15.6deg) scaleX(1)}100%{opacity:0;transform:rotate(-15.6deg) scaleX(1.15) scaleY(.4)}}
.ql-flash{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(circle at 50% 46%,#ffffff,#9fd2ff 40%,#1f5bff 100%);
  animation:qlFlash calc(var(--k)*420ms) calc(var(--k)*600ms) ease-out both}
@keyframes qlFlash{0%{opacity:0}16%{opacity:.5}100%{opacity:0}}

/* ---------- 彼岸花瓣 ---------- */
.ql-petals{position:absolute;inset:0;z-index:6;pointer-events:none}
.ql-petals i{position:absolute;top:-6%;left:var(--x);width:var(--s);height:calc(var(--s)*1.9);border-radius:80% 0 80% 0;
  background:linear-gradient(160deg,#ff6a78,#c3132c 55%,#5c0010);opacity:0;will-change:transform,opacity;
  animation:qlPetal var(--t) linear calc(var(--k)*900ms + var(--d)) both}
@keyframes qlPetal{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:.95}80%{opacity:.8}100%{opacity:0;transform:translate(var(--dx),112vh) rotate(var(--r))}}

/* ---------- 「野」字徽章 + 潜龙 ---------- */
.ql-copy{position:absolute;right:6vw;top:56%;z-index:7;display:flex;align-items:center;gap:clamp(10px,2vw,30px);transform:translateY(-50%)}
.ql-seal{position:relative;flex:none;width:clamp(96px,17vmin,190px);aspect-ratio:1;
  animation:qlSeal calc(var(--k)*560ms) calc(var(--k)*1150ms) cubic-bezier(.2,1.5,.4,1) both}
.ql-seal i{position:absolute;inset:0;background:url('../assets/ui/identity-ye.webp?v=6a174746') center/contain no-repeat;filter:drop-shadow(0 6px 12px #000)}
.ql-seal-fire{position:absolute;inset:-34%;border-radius:50%;
  background:radial-gradient(circle,#bfe6ffaa 0,#4aa8ff77 26%,#1f4dff33 46%,transparent 68%);
  animation:qlSealFire 1100ms ease-in-out calc(var(--k)*1300ms) infinite alternate both}
@keyframes qlSeal{0%{opacity:0;transform:scale(2.6) rotate(-14deg)}60%{opacity:1}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes qlSealFire{from{opacity:.55;transform:scale(.88)}to{opacity:1;transform:scale(1.08)}}
.ql-words{display:flex;flex-direction:column;align-items:flex-start}
.ql-kicker{font-size:clamp(12px,1.35vw,19px);letter-spacing:.5em;color:var(--blue2);text-shadow:0 0 12px var(--blue),0 2px 4px #000;
  animation:qlWords calc(var(--k)*700ms) calc(var(--k)*1250ms) both}
.ql-title{white-space:nowrap;margin:2px 0 4px;filter:drop-shadow(0 0 20px #2f7dff) drop-shadow(0 6px 3px #000c)}
.ql-title span{display:inline-block;font:900 clamp(64px,9.5vw,148px)/1.05 STKaiti,KaiTi,serif;letter-spacing:.05em;padding:0 .03em;
  background:linear-gradient(170deg,#ffffff 10%,#d4efff 36%,#4a8dff 64%,#e9f7ff 92%);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:qlRiseWord calc(var(--k)*700ms) cubic-bezier(.16,1,.3,1) both}
.ql-title span:nth-child(1){animation-delay:calc(var(--k)*1350ms)}.ql-title span:nth-child(2){animation-delay:calc(var(--k)*1500ms)}
@keyframes qlRiseWord{0%{opacity:0;transform:translateY(42%) scale(.92)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes qlWords{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ql-name{display:flex;align-items:center;gap:.6em;font-size:clamp(14px,1.6vw,22px);letter-spacing:.3em;text-shadow:0 2px 6px #000;
  animation:qlWords calc(var(--k)*600ms) calc(var(--k)*1700ms) both}
.ql-name span{letter-spacing:.16em}
.ql-from{position:relative;padding:2px 8px;font-size:.72em;border:1px solid #a37fd4;color:#e6d6ff;background:#5b3a8699}
/* 「内奸」被一笔划掉 */
.ql-from::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:2px;margin-top:-1px;background:#ff5a6a;box-shadow:0 0 6px #ff2a40;
  transform-origin:0 50%;animation:qlStrike calc(var(--k)*300ms) calc(var(--k)*2000ms) ease-out both}
@keyframes qlStrike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ql-arrow{color:var(--blue2);opacity:.8}
.ql-to{padding:2px 9px;font-size:.82em;font-weight:700;border:1px solid #6cc0ff;color:#fff;background:linear-gradient(90deg,#1f47d6cc,#0c1f6ecc);
  box-shadow:0 0 14px #2f7dff99;animation:qlPop calc(var(--k)*420ms) calc(var(--k)*2150ms) cubic-bezier(.2,1.6,.4,1) both}
@keyframes qlPop{from{opacity:0;transform:scale(1.8)}to{opacity:1;transform:none}}

/* 竖屏、窄屏：文字挪到下方居中 */
@media(max-aspect-ratio:1/1),(max-width:600px){
  .ql-copy{left:50%;right:auto;top:74%;transform:translate(-50%,-50%);flex-direction:column;gap:6px}
  .ql-words{align-items:center}
  .ql-seal{width:clamp(72px,16vmin,120px)}
  .ql-kicker{letter-spacing:.3em}
  .ql-bg{background-position:38% 30%}
}
/* 触屏：WebKit 在这些机器上逐帧在 CPU 上重算滤镜和混合模式（见 junshi.css 的同一段），全去掉 */
@media(any-pointer:coarse){
  .ql-tint,.ql-wisps{mix-blend-mode:normal}
  .ql-tint{opacity:.75}
  .ql-wisps{opacity:.8}
  .ql-title{filter:none}
  .ql-title span{text-shadow:none}
  .ql-half i,.ql-seal i{filter:none}
}
/* ================= 继位：盖下玉玺 =================
   0–0.5s「储」字徽章在暗场中亮起 → 0.45s「主」字徽章从天而降，0.85s 重重盖下：金色冲击波、闪光、震屏，
   「储」被盖掉 → 背景从金光里显出、背后光芒缓转、上下金边黑幕合拢 → 1.25s 中间的徽章收起，
   右侧「主」字徽章落定 → 1.4s「继位」落下 → 1.8s 名字与「储君→主公」。
   背景（assets/art/limited/dengji.webp）里皇帝的冠顶贴着图片上沿，头部约在横向 25%–44%、纵向 0–33%：
   背景只铺在上下两条黑幕之间、贴顶对齐，推镜以头顶为缩放中心，任何屏幕比例下头都完整露出；
   玉玺和文字放在右侧，不挡脸（tests/chujun-ui.cjs 会量头部在屏幕上的位置）。 */
.dj-overlay{--bar:9vh;--head-x:34%;--bg-x:var(--head-x);--zoom-x:var(--head-x)}
.dj-overlay{--gold:#ffd77a;--gold2:#fff0b8;background:#080503}
.dj-shake{position:absolute;inset:0;animation:djShake calc(var(--k)*380ms) calc(var(--k)*850ms) both}
@keyframes djShake{0%,100%{transform:none}18%{transform:translate(-8px,6px)}36%{transform:translate(7px,-5px)}54%{transform:translate(-5px,3px)}72%{transform:translate(3px,-2px)}}
.dj-bg{inset:var(--bar) 0;background-position:var(--bg-x) 0;transform-origin:var(--zoom-x) 0;
  filter:saturate(1.05) contrast(1.05) brightness(.86);
  animation:djBg calc(var(--k)*2950ms) calc(var(--k)*850ms) cubic-bezier(.2,.7,.25,1) both}
@keyframes djBg{from{opacity:0;transform:scale(1.18)}12%{opacity:1}to{opacity:1;transform:scale(1.03)}}
.dj-tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(90deg,transparent 48%,#140603b3 100%),linear-gradient(180deg,transparent 58%,#2a0806cc 100%);
  animation:qlFadeIn calc(var(--k)*500ms) calc(var(--k)*850ms) both}
.dj-vignette{background:radial-gradient(ellipse at var(--head-x) 30%,transparent 42%,#080402d0 100%)}
/* 背后的光芒：一张提前画好的放射纹，只转它、只调透明度 */
.dj-rays{position:absolute;left:var(--stamp-x,64%);top:46%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;pointer-events:none;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg,#ffd77a2e 0 4deg,transparent 4deg 15deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,#0006 16%,transparent 38%);mask-image:radial-gradient(circle,#000 0,#0006 16%,transparent 38%);
  will-change:transform,opacity;
  animation:djRaysIn calc(var(--k)*1500ms) calc(var(--k)*850ms) ease-out both,djSpin calc(var(--k)*3000ms) calc(var(--k)*800ms) linear both}
@keyframes djRaysIn{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@keyframes djSpin{from{transform:rotate(0)}to{transform:rotate(36deg)}}
/* 金粉往上飘 */
.dj-motes{position:absolute;inset:0;z-index:5;pointer-events:none}
.dj-motes i{position:absolute;bottom:-2%;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,#fffbe8 0,#ffd77a 45%,#ffd77a00 72%);
  animation:djMote var(--t) linear calc(var(--k)*900ms + var(--d)) both}
@keyframes djMote{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}75%{opacity:.8}100%{opacity:0;transform:translate(var(--dx),-78vh)}}

/* ---------- 中间：玉玺盖下 ---------- */
.dj-stamp{position:absolute;left:var(--stamp-x,64%);top:46%;width:min(32vmin,260px);aspect-ratio:1;z-index:6;transform:translate(-50%,-50%);pointer-events:none}
.dj-glow{position:absolute;inset:-45%;border-radius:50%;background:radial-gradient(circle,#ff6a3a55 0,#c0391b33 34%,transparent 66%);
  animation:djGlow calc(var(--k)*1500ms) both}
@keyframes djGlow{0%{opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1)}56%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(1.6)}}
.dj-stamp>i{position:absolute;inset:0;will-change:transform,opacity}
.dj-chu{background:url('../assets/ui/identity-chu.webp?v=820f72b8') center/contain no-repeat;filter:drop-shadow(0 4px 10px #000);
  animation:djChu calc(var(--k)*900ms) both}
@keyframes djChu{0%{opacity:0;transform:scale(.7)}50%{opacity:1;transform:scale(1)}93%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.92)}}
/* 「主」字徽章：越落越快，盖下后一弹，停一会儿再收起 */
.dj-zhu{background:url('../assets/ui/identity-emblems-v2.webp?v=b91fcd3f') no-repeat 0% 50%/500% 140%;filter:drop-shadow(0 6px 14px #000);
  animation:djDrop calc(var(--k)*400ms) calc(var(--k)*450ms) cubic-bezier(.55,0,1,.45) both,
    djSettle calc(var(--k)*260ms) calc(var(--k)*850ms) ease-out forwards,
    djLeave calc(var(--k)*380ms) calc(var(--k)*1250ms) cubic-bezier(.5,0,.75,0) forwards}
@keyframes djDrop{0%{opacity:0;transform:translateY(-62vh) scale(1.9)}35%{opacity:1}100%{opacity:1;transform:none}}
@keyframes djSettle{0%{transform:scale(.9,.86)}55%{transform:scale(1.07)}100%{transform:none}}
@keyframes djLeave{from{opacity:1;transform:none}to{opacity:0;transform:scale(.55)}}
.dj-ring{position:absolute;inset:0;border-radius:50%;border:3px solid #ffe7a0;box-shadow:0 0 24px #ffb84e,inset 0 0 18px #ffb84e;opacity:0;will-change:transform,opacity;
  animation:djRing calc(var(--k)*700ms) calc(var(--k)*850ms) cubic-bezier(.2,.7,.3,1) both}
.dj-ring-2{border-width:2px;animation-delay:calc(var(--k)*960ms);animation-duration:calc(var(--k)*900ms)}
@keyframes djRing{0%{opacity:0;transform:scale(.6)}10%{opacity:1}100%{opacity:0;transform:scale(3.2)}}
.dj-flash{position:absolute;inset:0;z-index:9;pointer-events:none;background:radial-gradient(circle at var(--stamp-x,64%) 46%,#fffdf0,#ffd77a 42%,#b4651a 100%);
  animation:qlFlash calc(var(--k)*520ms) calc(var(--k)*830ms) ease-out both}

/* ---------- 上下金边黑幕 ---------- */
.dj-bar{position:absolute;left:0;right:0;height:var(--bar);z-index:7;background:#050302;will-change:transform}
.dj-bar-top{top:0;box-shadow:0 1px 0 #e8c86a99,0 0 22px #e8c86a33;animation:djBarTop calc(var(--k)*520ms) calc(var(--k)*850ms) cubic-bezier(.2,.8,.3,1) both}
.dj-bar-bottom{bottom:0;box-shadow:0 -1px 0 #e8c86a99,0 0 22px #e8c86a33;animation:djBarBottom calc(var(--k)*520ms) calc(var(--k)*850ms) cubic-bezier(.2,.8,.3,1) both}
@keyframes djBarTop{from{transform:translateY(-102%)}to{transform:none}}
@keyframes djBarBottom{from{transform:translateY(102%)}to{transform:none}}

/* ---------- 右侧：「主」字徽章 + 继位 ---------- */
/* 文字压在右下（背景右侧和底部压暗了），离开头部和手里的玉玺 */
.dj-copy{top:66%;right:4vw;z-index:8}
.dj-seal{animation-delay:calc(var(--k)*1300ms)}
.dj-seal i{background:url('../assets/ui/identity-emblems-v2.webp?v=b91fcd3f') no-repeat 0% 50%/500% 140%}
.dj-seal-fire{background:radial-gradient(circle,#fff0b8aa 0,#ffb84e77 26%,#c0391b33 46%,transparent 68%);animation-delay:calc(var(--k)*1450ms)}
.dj-kicker{color:#ffe7b0;text-shadow:0 0 12px #ff9a2e,0 2px 4px #000;animation-delay:calc(var(--k)*1350ms)}
.dj-title{filter:drop-shadow(0 0 20px #ff9a2e) drop-shadow(0 6px 3px #000c)}
.dj-title span{background-image:linear-gradient(168deg,#fffbe8 12%,#ffe08a 40%,#d08a1e 66%,#fff0b8 92%);animation-name:djInk}
.dj-title span:nth-child(1){animation-delay:calc(var(--k)*1400ms)}.dj-title span:nth-child(2){animation-delay:calc(var(--k)*1550ms)}
@keyframes djInk{0%{opacity:0;transform:scale(1.7)}55%{opacity:1}100%{opacity:1;transform:none}}
.dj-name{animation-delay:calc(var(--k)*1800ms)}
.dj-from{position:relative;padding:2px 8px;font-size:.72em;letter-spacing:.16em;border:1px solid #f2b45c;color:#ffe7c2;background:#7a1a0c99}
.dj-from::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:2px;margin-top:-1px;background:#ffd77a;box-shadow:0 0 6px #ffb84e;
  transform-origin:0 50%;animation:qlStrike calc(var(--k)*300ms) calc(var(--k)*2100ms) ease-out both}
.dj-arrow{color:var(--gold2)}
.dj-to{padding:2px 9px;font-size:.82em;font-weight:700;letter-spacing:.16em;border:1px solid #f0d78a;color:#fff;background:linear-gradient(90deg,#c9a227,#8a6a14);
  box-shadow:0 0 14px #ffcf6a99;animation:qlPop calc(var(--k)*420ms) calc(var(--k)*2250ms) cubic-bezier(.2,1.6,.4,1) both}
/* 竖屏、窄屏：背景按高度铺满，横向只看得到三分之一左右。取景位置 27% 正好让头部中心（图宽 34.5%）
   对准屏幕中线，推镜也以中线为轴，头才不会被推出左右边；头在上半屏，玉玺回到正中，文字压在下方 */
@media(max-aspect-ratio:1/1),(max-width:600px){
  .dj-overlay{--stamp-x:50%;--bg-x:27%;--zoom-x:50%;--head-x:50%}
  .dj-copy{top:76%;right:auto}
}
@media(any-pointer:coarse){
  .dj-tint,.dj-rays{mix-blend-mode:normal}
  .dj-tint{opacity:.8}
  .dj-title{filter:none}
  .dj-stamp>i,.dj-seal i{filter:none}
}
/* ================= 决死：图穷匕见 =================
   0–0.55s「刺」字徽章在黑暗中裹着碧焰亮起 → 0.46s 一道寒光从左往右斜斩过屏幕 → 0.7s 闪光、
   徽章迎面冲出，黑暗沿刀口先错开一下、再上下分开，露出背景，画面一震 → 1.15s 左下「刺」字徽章落定 →
   1.4s「决死」斩落 → 1.75s 名字与「刺客」「一去不还」。
   背景（assets/art/limited/cisha.webp）：刺客的兜帽约在横向 42%–59%、纵向 5%–33%，皇帝的头约在 74%–82%；
   背景贴顶铺、推镜以兜帽上方为中心，超宽屏切掉的是脚下；左下是刺客的黑斗篷，文字压在那里，不挡两个人的头。
   刀口：一个转了 -12° 的大方块（150vmax，任何屏幕比例都盖得满），上下两半是纯色块，
   刀光是方块中线上的一条横线——角度跟屏幕比例无关，裂口和刀光始终对得上。只动 transform / opacity。 */
.cs-overlay{--bg-x:50%;--zoom-x:52%;background:#020605}
.cs-shake{position:absolute;inset:0;animation:djShake calc(var(--k)*360ms) calc(var(--k)*720ms) both}
.cs-bg{inset:0;background-position:var(--bg-x) 0;transform-origin:var(--zoom-x) 0;filter:none;
  animation:csBg calc(var(--k)*2950ms) calc(var(--k)*700ms) cubic-bezier(.2,.7,.25,1) both}
@keyframes csBg{from{opacity:0;transform:scale(1.2) translateX(-1.5%)}14%{opacity:1}to{opacity:1;transform:scale(1.04)}}
/* 月光的青压左边，皇袍的红留在右边 */
.cs-tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(100deg,#062a1fcc 0,#0b2b3366 36%,transparent 60%,#3a060e55 100%);
  animation:qlFadeIn calc(var(--k)*600ms) calc(var(--k)*720ms) both}
.cs-vignette{background:linear-gradient(90deg,#020605b3 0,transparent 44%),radial-gradient(ellipse at 55% 30%,transparent 40%,#020605d9 100%),linear-gradient(transparent 58%,#020605cc)}
/* 碧焰余烬往上飘 */
.cs-embers{position:absolute;inset:0;z-index:2;pointer-events:none}
.cs-embers i{position:absolute;bottom:-2%;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,#eafff2 0,#5dffa8 45%,#5dffa800 72%);
  animation:djMote var(--t) linear calc(var(--k)*900ms + var(--d)) both}

/* ---------- 刀口 ---------- */
.cs-cut{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;z-index:3;pointer-events:none;transform:rotate(-12deg)}
.cs-half{position:absolute;left:0;right:0;height:50%;background:#020605;will-change:transform}
.cs-half-a{top:0;animation:csSplitA calc(var(--k)*700ms) calc(var(--k)*700ms) cubic-bezier(.6,0,.25,1) both}
.cs-half-b{bottom:0;animation:csSplitB calc(var(--k)*700ms) calc(var(--k)*700ms) cubic-bezier(.6,0,.25,1) both}
/* 先沿刀口错开一截，再上下分开 */
@keyframes csSplitA{0%{transform:none}28%{transform:translate(-2.5%,-1%)}100%{transform:translate(-7%,-104%)}}
@keyframes csSplitB{0%{transform:none}28%{transform:translate(2.5%,1%)}100%{transform:translate(7%,104%)}}
/* 刀口两侧的碧光，合拢时看不见，分开时才亮 */
.cs-half::after{content:"";position:absolute;left:0;right:0;height:2px;opacity:0;background:#9effc8;box-shadow:0 0 12px #3fe08a,0 0 30px #12a656;
  animation:qlFadeIn calc(var(--k)*140ms) calc(var(--k)*700ms) both}
.cs-half-a::after{bottom:0}.cs-half-b::after{top:0}
.cs-blade{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;transform-origin:0 50%;will-change:transform,opacity;
  background:linear-gradient(90deg,transparent 18%,#c8ffe0 34%,#fff 56%,#9effc8 70%,transparent 84%);box-shadow:0 0 12px #5dffa8,0 0 36px #12a656;
  animation:csBlade calc(var(--k)*560ms) calc(var(--k)*460ms) cubic-bezier(.7,0,.2,1) both}
@keyframes csBlade{0%{opacity:1;transform:scaleX(0)}42%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1) scaleY(.3)}}
.cs-flash{position:absolute;inset:0;z-index:9;pointer-events:none;background:radial-gradient(circle at 50% 50%,#ffffff,#b8ffd6 40%,#0d7a3d 100%);
  animation:qlFlash calc(var(--k)*420ms) calc(var(--k)*680ms) ease-out both}

/* ---------- 黑暗里的「刺」字徽章：亮起，刀光过后迎面冲出 ---------- */
.cs-mark{position:absolute;left:50%;top:46%;width:min(32vmin,260px);aspect-ratio:1;z-index:4;transform:translate(-50%,-50%);pointer-events:none}
.cs-halo{position:absolute;inset:-40%;border-radius:50%;background:radial-gradient(circle,#2fd27a59 0,#0d7a3d33 36%,transparent 66%);
  animation:qlHalo calc(var(--k)*1100ms) both}
.cs-mark i{position:absolute;inset:0;background:url('../assets/ui/identity-ci.webp?v=c753e274') center/contain no-repeat;filter:drop-shadow(0 4px 10px #000);will-change:transform,opacity;
  animation:qlAppear calc(var(--k)*560ms) cubic-bezier(.2,1.2,.4,1) both,csMarkOut calc(var(--k)*460ms) calc(var(--k)*700ms) cubic-bezier(.5,0,.8,.4) forwards}
@keyframes csMarkOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(2.6)}}

/* ---------- 左下：「刺」字徽章 + 决死 ---------- */
.cs-copy{left:5vw;right:auto;top:68%;z-index:7}
.cs-seal{animation-delay:calc(var(--k)*1150ms)}
.cs-seal i{background-image:url('../assets/ui/identity-ci.webp?v=c753e274')}
.cs-seal-fire{background:radial-gradient(circle,#d9ffe8aa 0,#3fe08a77 26%,#0d7a3d33 46%,transparent 68%);animation-delay:calc(var(--k)*1300ms)}
.cs-kicker{color:#d4ffe2;text-shadow:0 0 12px #2fd27a,0 2px 4px #000;animation-delay:calc(var(--k)*1300ms)}
.cs-title{filter:drop-shadow(0 0 18px #19c46a) drop-shadow(0 6px 3px #000c)}
.cs-title span{background-image:linear-gradient(170deg,#ffffff 10%,#dcffe9 36%,#2fbf6a 64%,#f0fff5 92%);animation-name:csSlash}
.cs-title span:nth-child(1){animation-delay:calc(var(--k)*1400ms)}.cs-title span:nth-child(2){animation-delay:calc(var(--k)*1530ms)}
@keyframes csSlash{0%{opacity:0;transform:translateX(-26%) skewX(-16deg) scale(1.2)}55%{opacity:1}100%{opacity:1;transform:none}}
.cs-name{animation-delay:calc(var(--k)*1750ms)}
.cs-to{padding:2px 9px;font-size:.82em;font-weight:700;letter-spacing:.16em;border:1px solid #d9b860;color:#fff;background:linear-gradient(90deg,#1f8a4ccc,#0b3d22cc);
  box-shadow:0 0 14px #2fd27a99;animation:qlPop calc(var(--k)*420ms) calc(var(--k)*2100ms) cubic-bezier(.2,1.6,.4,1) both}
.cs-fate{font-size:.72em;letter-spacing:.2em;color:#ffb0a8;animation:qlWords calc(var(--k)*500ms) calc(var(--k)*2350ms) both}
/* 竖屏、窄屏：背景按高度铺满，横向只看得到四分之一多。取景 52% 让兜帽整个露出、右边带一线皇袍；
   推镜以兜帽左缘附近为轴，起手放大时兜帽不会被推出左边；文字压在下方居中 */
@media(max-aspect-ratio:1/1),(max-width:600px){
  .cs-overlay{--bg-x:52%;--zoom-x:18%}
  .cs-copy{left:50%;top:76%}
}
@media(any-pointer:coarse){
  .cs-tint{mix-blend-mode:normal;opacity:.75}
  .cs-title{filter:none}
  .cs-mark i,.cs-seal i{filter:none}
}
@media(prefers-reduced-motion:reduce){
  .ql-overlay *{animation:none!important}
  .ql-curtain,.ql-mask,.ql-flash,.ql-petals,.dj-stamp,.dj-flash,.dj-motes,.dj-rays,.cs-cut,.cs-mark,.cs-flash,.cs-embers{display:none}
}