/* ================= 兵势篇·势周瑜 =================
   展示牌、雄姿选路弹窗、雄姿全屏演出、立绘燃烧替换（逻辑见 js/ui/junshi-fx.js） */

/* ---------- 展示牌 ---------- */
.js-show-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
/* 挟征亮出的一排：牌是从牌堆飞进来的，不放入场缩放（被出牌区清掉后原样挂回去也不重放） */
#playZone .js-reveal .card{animation:none}

/* ---------- 雄姿：选路弹窗 ---------- */
#modal.xiongzi-modal .modal-box{width:min(880px,96vw);max-width:96vw;box-sizing:border-box;padding:22px 24px;
  background:radial-gradient(ellipse at 12% -10%,#5a1d0a88,transparent 55%),radial-gradient(ellipse at 88% -10%,#0b2d5288,transparent 55%),#0e1318f5;
  border:1px solid #b08d5a55;box-shadow:0 22px 80px #000c,inset 0 1px #f5dba325}
#modal.xiongzi-modal .modal-title{font-family:STKaiti,KaiTi,serif;font-size:24px;letter-spacing:.4em;color:#f3dfb0;text-align:center}
#modal.xiongzi-modal .modal-body{display:block;max-height:min(74vh,calc(100dvh - 150px));overflow:auto}
.xz-intro{font-size:13px;line-height:1.75;color:#cbc3b1;text-align:center;margin:0 auto 16px;max-width:640px;letter-spacing:.03em}
.xz-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.xz-route{--c:#ff5a1f;--c2:#ffc783;--glow:#ff5a1f55;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:14px;
  min-height:250px;padding:18px 18px 14px;box-sizing:border-box;border-radius:10px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  background:linear-gradient(165deg,#3b1409,#120805 72%);cursor:pointer;outline:none;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.xz-route-shui{--c:#2385ff;--c2:#94e2ff;--glow:#2a8cff55;background:linear-gradient(165deg,#082842,#050c15 72%)}
.xz-route:hover,.xz-route:focus-visible{transform:translateY(-3px);border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 12px 44px var(--glow)}
.xz-route:active{transform:translateY(0)}
/* 卡片底部一直在动：火是一排跳动的焰头，水是来回推的浪 */
.xz-route-fx{position:absolute;inset:auto 0 0 0;height:60%;z-index:-1;pointer-events:none;opacity:.85}
.xz-route-huo .xz-route-fx{background:
  radial-gradient(ellipse 22% 70% at 15% 112%,#ffcf6a 0,#ff6a1f 38%,transparent 72%),
  radial-gradient(ellipse 18% 85% at 42% 115%,#fff0a8 0,#ff8a2a 34%,transparent 70%),
  radial-gradient(ellipse 24% 75% at 70% 112%,#ffb347 0,#ff3d0a 40%,transparent 72%),
  radial-gradient(ellipse 16% 60% at 92% 110%,#ffd98a 0,#ff5a1f 38%,transparent 70%);
  filter:blur(6px);mix-blend-mode:screen;transform-origin:50% 100%;animation:xzCardFlame 1.1s ease-in-out infinite alternate}
.xz-route-shui .xz-route-fx{height:46%;background:
  radial-gradient(ellipse 30% 40% at 20% 100%,#57c8ff88,transparent 70%),
  radial-gradient(ellipse 34% 46% at 70% 104%,#2a7dff99,transparent 72%),
  repeating-radial-gradient(ellipse 40px 16px at 0 100%,transparent 0 10px,#8fe0ff33 11px 13px,transparent 14px 22px);
  background-size:100% 100%,100% 100%,80px 40px;filter:blur(1px);mix-blend-mode:screen;animation:xzCardWave 2.4s linear infinite}
@keyframes xzCardFlame{0%{transform:scaleY(.86) scaleX(1.02);opacity:.72}100%{transform:scaleY(1.08) scaleX(.98);opacity:1}}
@keyframes xzCardWave{from{background-position:0 0,0 0,0 100%}to{background-position:0 0,0 0,80px 100%}}
.xz-route-head{display:flex;align-items:center;gap:14px}
.xz-seal{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font:900 30px/1 STKaiti,KaiTi,serif;color:#fff;
  background:radial-gradient(circle at 35% 30%,var(--c2),var(--c) 58%,#0008);box-shadow:0 0 22px var(--glow),inset 0 0 0 2px #fff3}
.xz-route-title{display:flex;flex-direction:column;gap:4px;min-width:0}
.xz-route-title strong{font:900 26px/1.15 STKaiti,KaiTi,serif;letter-spacing:.18em;color:#fff3dc}
.xz-route-shui .xz-route-title strong{color:#e8f8ff}
.xz-route-title span{font-size:12px;letter-spacing:.14em;color:var(--c2)}
.xz-route-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.xz-route-lines li{display:flex;gap:10px;font-size:12.5px;line-height:1.55;color:#ddd6ca}
.xz-route-lines b{flex:none;font-family:STKaiti,KaiTi,serif;font-size:14px;letter-spacing:.08em;color:var(--c2)}
.xz-route-go{margin-top:auto;padding:9px 0;border-radius:6px;text-align:center;font-weight:700;font-size:14px;letter-spacing:.4em;color:#fff;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 85%,transparent) 22%,color-mix(in srgb,var(--c) 85%,transparent) 78%,transparent);
  text-shadow:0 1px 3px #0009}
#modalFoot .xz-skip{min-width:140px}
@media(max-width:640px){
  .xz-routes{grid-template-columns:1fr;gap:10px}
  .xz-route{min-height:0;padding:14px 14px 12px;gap:10px}
  .xz-seal{width:44px;height:44px;font-size:24px}.xz-route-title strong{font-size:21px}
  #modal.xiongzi-modal .modal-box{padding:14px}
}
/* 手机横屏只有三四百像素高：去掉引言、缩小字号，两张卡并排一屏放下 */
@media(max-height:520px){
  #modal.xiongzi-modal .modal-box{padding:10px 14px}
  #modal.xiongzi-modal .modal-title{font-size:18px}
  #modal.xiongzi-modal .modal-body{max-height:calc(100dvh - 110px)}
  .xz-intro{display:none}
  .xz-routes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .xz-route{min-height:0;padding:10px 12px;gap:6px}
  .xz-seal{width:36px;height:36px;font-size:20px}.xz-route-title strong{font-size:18px}.xz-route-title span{font-size:11px}
  .xz-route-lines{gap:3px}.xz-route-lines li{font-size:11px;line-height:1.4;gap:6px}.xz-route-lines b{font-size:12px}
  .xz-route-go{padding:5px 0;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.xz-route-fx{animation:none}}

/* ---------- 雄姿：全屏演出 ---------- */
.xz-overlay{--xz-c:#ff5a1f;--xz-c2:#ffd08c;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:#050302;color:#fff;isolation:isolate;animation:xzLife var(--xz-life) both}
.xz-overlay::backdrop{background:transparent}
.xz-shui{--xz-c:#2a8cff;--xz-c2:#b4ecff;background:#01050b}
.xz-zi{--xz-c:#8b35c8;--xz-c2:#e7bbff;background:#090412}
.xz-jin{--xz-c:#e9ad38;--xz-c2:#fff0a8;background:#130d03}
.xz-jin .xz-bg{background-position:center 38%;filter:saturate(1.12) contrast(1.06) brightness(.84)}
.xz-jin .xz-tint{background:linear-gradient(110deg,#40250044,#ad772844 55%,#1b100466)}
.xz-jin .xz-title span{background-image:linear-gradient(168deg,#fffdef 12%,#ffe291 42%,#cf8c20 66%,#fff2b3 92%)}
.xz-jin .xz-flames i{background:radial-gradient(ellipse at 50% 100%,#fffce5 0,#ffe495 16%,#eeb746 42%,#b8760000 70%)}
@media(max-aspect-ratio:3/4){.xz-jin .xz-bg{background-position:30% 38%}}
.xz-zi .xz-bg{filter:saturate(1.25) contrast(1.1) brightness(.78);background-position:center 42%}
.xz-zi .xz-tint{background:linear-gradient(110deg,#17072488,#5d168baa 55%,#14052277);mix-blend-mode:multiply}
.xz-zi .xz-vignette{background:radial-gradient(ellipse at 50% 42%,transparent 28%,#08020fe8 100%)}
.xz-zi .xz-flames i{background:radial-gradient(ellipse at 50% 100%,#f6d8ff 0,#aa54e5 20%,#65149d 45%,#27043b00 72%)}
.xz-zi .xz-title span{background-image:linear-gradient(168deg,#fff6ff 12%,#e4b2ff 42%,#9a4fd0 68%,#edd2ff 92%)}
.xz-bg{position:absolute;inset:-4%;background:#1a0f08 center 46%/cover no-repeat;will-change:transform;animation:xzZoom var(--xz-life) cubic-bezier(.2,.7,.25,1) both}
.xz-huo .xz-bg{filter:saturate(1.35) contrast(1.08)}
.xz-shui .xz-bg{filter:saturate(.45) brightness(.9) contrast(1.1)}
.xz-tint{position:absolute;inset:0;pointer-events:none}
.xz-huo .xz-tint{background:radial-gradient(ellipse 90% 60% at 50% 105%,#ff4b12b0,transparent 70%),linear-gradient(#ff7a1a22,#ff3d0a33);mix-blend-mode:screen}
.xz-shui .xz-tint{background:linear-gradient(160deg,#0b3474,#0a78b0);mix-blend-mode:color;opacity:.8}
.xz-shui .xz-vignette{background:radial-gradient(ellipse at 50% 42%,transparent 38%,#010814d9 100%),radial-gradient(ellipse 90% 50% at 50% 110%,#2aa6ff55,transparent 70%)}
.xz-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 38%,#0a0300e0 100%)}
/* 剑身上一道寒光扫过去 */
.xz-glint{position:absolute;left:0;right:0;top:36%;height:26%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(97deg,transparent 42%,#ffffff00 45%,#fffbe8d0 50%,#ffffff00 55%,transparent 58%) 130% 0/260% 100% no-repeat;
  -webkit-mask-image:linear-gradient(transparent,#000 38%,#000 62%,transparent);mask-image:linear-gradient(transparent,#000 38%,#000 62%,transparent);
  animation:xzGlint 1000ms 260ms cubic-bezier(.5,0,.3,1) both}
.xz-shui .xz-glint{background-image:linear-gradient(97deg,transparent 42%,#ffffff00 45%,#e6fbffd8 50%,#ffffff00 55%,transparent 58%)}
/* 火：底部一排焰舌，糊开以后叠成一片火海 */
.xz-flames{position:absolute;left:-6%;right:-6%;bottom:-8%;height:48%;pointer-events:none;filter:blur(16px);mix-blend-mode:screen;animation:xzRise 900ms cubic-bezier(.2,.8,.3,1) both}
.xz-flames i{position:absolute;bottom:0;width:22%;height:100%;border-radius:50% 50% 38% 38%;transform-origin:50% 100%;
  background:radial-gradient(ellipse at 50% 100%,#fff4b8 0,#ffb347 16%,#ff5a1f 42%,#ff3d0a00 70%);animation:xzFlame 780ms ease-in-out infinite alternate}
.xz-flames i:nth-child(1){left:-4%;height:80%;animation-delay:-120ms}.xz-flames i:nth-child(2){left:11%;height:104%;animation-duration:640ms}
.xz-flames i:nth-child(3){left:26%;height:88%;animation-delay:-300ms}.xz-flames i:nth-child(4){left:40%;height:112%;animation-duration:900ms}
.xz-flames i:nth-child(5){left:55%;height:92%;animation-delay:-500ms}.xz-flames i:nth-child(6){left:70%;height:106%;animation-duration:700ms}
.xz-flames i:nth-child(7){left:85%;height:84%;animation-delay:-220ms}
/* 水：三层浪各推各的速度，前浪最亮最快 */
.xz-waves{position:absolute;left:0;right:0;bottom:-2%;height:40%;pointer-events:none;animation:xzRise 1000ms cubic-bezier(.2,.8,.3,1) both}
.xz-wave{position:absolute;left:0;right:0;bottom:0;background-repeat:repeat-x;background-size:520px 100%;animation:xzWave 3.2s linear infinite}
.xz-wave-0{height:100%;opacity:.9;filter:blur(2.5px);animation-duration:4.6s}
.xz-wave-1{height:80%;opacity:.9;filter:blur(1px);animation-duration:3.1s;animation-direction:reverse}
.xz-wave-2{height:60%;opacity:.92;animation-duration:2.1s}
.xz-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.xz-bar{position:absolute;left:0;right:0;height:10vh;background:#000;z-index:3;box-shadow:0 0 30px #000}
.xz-bar-top{top:0;animation:xzBarTop 520ms cubic-bezier(.2,.8,.3,1) both}
.xz-bar-bottom{bottom:0;animation:xzBarBottom 520ms cubic-bezier(.2,.8,.3,1) both}
.xz-copy{position:absolute;left:50%;top:73%;z-index:4;text-align:center;transform:translate(-50%,-50%);animation:xzShake 340ms 640ms both}
.xz-kicker{font-size:clamp(12px,1.35vw,19px);letter-spacing:.55em;padding-left:.55em;color:var(--xz-c2);text-shadow:0 0 12px var(--xz-c),0 2px 4px #000;
  animation:xzWords 700ms 1050ms both}
.xz-title{white-space:nowrap;filter:drop-shadow(0 0 22px var(--xz-c)) drop-shadow(0 6px 3px #000c)}
.xz-title span{display:inline-block;font:900 clamp(64px,10vw,156px)/1.05 STKaiti,KaiTi,serif;letter-spacing:.06em;padding:0 .04em;
  background:linear-gradient(168deg,#fffbe8 12%,#ffd57e 42%,#ff7a2a 66%,#ffe2a3 92%);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:xzInk 760ms cubic-bezier(.16,1,.3,1) both}
.xz-shui .xz-title span{background-image:linear-gradient(168deg,#ffffff 12%,#c6f1ff 42%,#3ea3ff 66%,#e2f8ff 92%)}
.xz-title span:nth-child(1){animation-delay:600ms}.xz-title span:nth-child(2){animation-delay:760ms}
.xz-stroke{display:block;width:min(560px,70vw);height:30px;margin:-6px auto 0;overflow:visible}
.xz-stroke path{fill:none;stroke:var(--xz-c2);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:640;stroke-dashoffset:640;filter:drop-shadow(0 0 6px var(--xz-c));
  animation:xzStroke 620ms 920ms cubic-bezier(.6,0,.2,1) forwards}
.xz-name{margin-top:10px;font-size:clamp(14px,1.6vw,22px);letter-spacing:.42em;padding-left:.42em;text-shadow:0 2px 6px #000;animation:xzWords 700ms 1200ms both}
.xz-name span{display:inline-block;margin-left:.9em;padding:3px 9px;font-size:11px;letter-spacing:.24em;border:1px solid var(--xz-c2);color:var(--xz-c2);vertical-align:middle}
.xz-burst{position:absolute;left:50%;top:72%;width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;pointer-events:none;z-index:3;
  background:radial-gradient(circle,#fff 0,var(--xz-c) 12%,transparent 46%);mix-blend-mode:screen;animation:xzBurst 900ms 560ms ease-out both}
.xz-flash{position:absolute;inset:0;background:#fff;pointer-events:none;z-index:5;animation:xzFlash 420ms 600ms ease-out both}
@keyframes xzLife{0%{opacity:0}6%,88%{opacity:1}100%{opacity:0}}
@keyframes xzZoom{from{transform:scale(1.16) translateY(1.5%)}to{transform:scale(1.02) translateY(0)}}
@keyframes xzGlint{from{background-position:130% 0}to{background-position:-30% 0}}
@keyframes xzRise{from{transform:translateY(70%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes xzFlame{0%{transform:scaleY(.82) scaleX(1.04) skewX(-3deg);opacity:.75}100%{transform:scaleY(1.1) scaleX(.94) skewX(3deg);opacity:1}}
@keyframes xzWave{from{background-position-x:0}to{background-position-x:-520px}}
@keyframes xzBarTop{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes xzBarBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes xzInk{0%{opacity:0;transform:scale(1.6) translateY(-8%);filter:blur(16px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}
@keyframes xzStroke{to{stroke-dashoffset:0}}
@keyframes xzWords{from{opacity:0;transform:translateY(14px);letter-spacing:.9em}to{opacity:1;transform:translateY(0)}}
@keyframes xzBurst{0%{opacity:0;transform:scale(.2)}30%{opacity:.85}100%{opacity:0;transform:scale(1.1)}}
@keyframes xzFlash{0%{opacity:0}18%{opacity:.42}100%{opacity:0}}
@keyframes xzShake{0%,100%{transform:translate(-50%,-50%)}20%{transform:translate(calc(-50% - 7px),calc(-50% + 4px))}40%{transform:translate(calc(-50% + 6px),calc(-50% - 5px))}
  60%{transform:translate(calc(-50% - 4px),calc(-50% + 3px))}80%{transform:translate(calc(-50% + 3px),calc(-50% - 2px))}}
/* 触屏设备（iPad、手机）：WebKit 在这些机器上的模糊滤镜是逐帧在 CPU 上重算的——
   糊开的火海、落笔时的模糊大字、叠在整屏上的混合模式，让演出只剩十几帧（iPad 实测每帧 60～85ms）。
   火海改用更宽、互相叠着的柔边焰舌，大字只缩放淡入，光晕留一层 */
@media(any-pointer:coarse){
  .xz-flames{filter:none;mix-blend-mode:normal;opacity:.9}
  .xz-flames i{width:30%;margin-left:-4%}
  .xz-title{filter:drop-shadow(0 0 18px var(--xz-c))}
  .xz-title span{animation-name:xzInkLite}
  .xz-burst,.xz-glint{mix-blend-mode:normal}
  .xz-burst{opacity:.8}
}
@keyframes xzInkLite{0%{opacity:0;transform:scale(1.6) translateY(-8%)}55%{opacity:1}100%{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:600px){.xz-copy{top:70%}.xz-kicker{letter-spacing:.3em;padding-left:.3em}.xz-name{letter-spacing:.25em}}
@media(prefers-reduced-motion:reduce){
  .xz-overlay *{animation:none!important}
  .xz-stroke path{stroke-dashoffset:0}.xz-flash,.xz-burst,.xz-glint{display:none}
}

/* ---------- 立绘从下往上烧尽 ---------- */
.xzf{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
#selfGeneral .xzf{border-radius:8px}
/* 遮罩、光晕都是三倍高的长条，由 js 只改 transform 往上挪（见 junshi-fx.js 的 shiForm） */
.xzf-old{position:absolute;left:0;right:0;top:0;height:300%;will-change:transform;
  -webkit-mask-image:var(--xzf-mask);mask-image:var(--xzf-mask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.xzf-img{position:absolute;left:0;right:0;top:0;height:33.3334%;will-change:transform}
.xzf-img svg{width:100%;height:100%;display:block}
/* 焰边是提前画好的 canvas（见 junshi-fx.js 的 burnGlow），按 SVG 坐标的比例画，这里拉伸到整条 */
.xzf-glow{position:absolute;left:0;top:0;width:100%;height:300%;will-change:transform;animation:xzfFlicker 150ms steps(2) infinite alternate}
.xzf-canvas{position:absolute;inset:0;width:100%;height:100%}
@keyframes xzfFlicker{from{opacity:.86}to{opacity:1}}
/* 光框只包立绘那一块（座位本身比立绘高，底下还留着判定区的位置） */
.xzf-burning-huo :is(.s-art){box-shadow:0 0 0 2px #ff6a2a,0 0 26px #ff4b12b0}
.xzf-burning-shui :is(.s-art){box-shadow:0 0 0 2px #3b9bff,0 0 26px #1f6dffb0}
.xzf-burning-zi :is(.s-art){box-shadow:0 0 0 2px #ac65d9,0 0 26px #7b29b0b0}
.xzf-burning-jin :is(.s-art){box-shadow:0 0 0 2px #ffdd72,0 0 26px #e9a324b0}
.xzf-reborn :is(.s-portrait,.gc-portrait){animation:xzfShine 900ms ease-out}
/* 烧完后立绘框外的亮边和光晕：单独一层（见 junshi-fx.js 的 rebornHalo），只淡透明度，不重画立绘 */
.xzf-halo{position:absolute;pointer-events:none;animation:xzfHalo 900ms linear both}
.xzf-halo-huo{box-shadow:0 0 0 3px #ffd38a,0 0 46px #ff5a1f}
.xzf-halo-shui{box-shadow:0 0 0 3px #bdefff,0 0 46px #2a8cff}
.xzf-halo-zi{box-shadow:0 0 0 3px #ead0ff,0 0 46px #9a40d0}
.xzf-halo-jin{box-shadow:0 0 0 3px #fff0af,0 0 46px #eeb746}
/* 原来亮边、光晕是一边变淡一边收拢（ease-out），这里只能淡：透明度取 (1-进度)²，看起来收得一样快 */
@keyframes xzfHalo{0%{opacity:1}10%{opacity:.705}20%{opacity:.478}30%{opacity:.308}40%{opacity:.184}50%{opacity:.099}60%{opacity:.046}70%{opacity:.017}80%{opacity:.004}90%{opacity:.000}100%{opacity:.000}}
@keyframes xzfShine{0%{filter:brightness(1.9) saturate(1.3)}100%{filter:none}}
@media(prefers-reduced-motion:reduce){.xzf-glow,.xzf-reborn :is(.s-portrait,.gc-portrait){animation:none}.xzf-halo{display:none}}