/* ============================================================
 * css/skins.css — 皮肤特效层 + 皮肤面板（归属：skins 组）
 * 只写 .skin-fx* / .sk-* / .has-skin 前缀，绝不改 theme.css / battle.css / 别人的页样式。
 * 加载位置：index.html 中 css/screens/*.css 之后（要能覆盖卡面局部）。
 *
 * 结构：Skins.fxLayer() 产出
 *   .skin-fx.skin-fx-<fx>.sk-legend|sk-epic
 *     > i.sf-glow  氛围光（screen 混合，只染色不糊图）
 *     > i.sf-a / i.sf-b / i.sf-c   三层主体形状（渐变 + mask + keyframes）
 *     > svg.sf-svg                 仅 dragon：金色龙形气流（stroke-dashoffset 流动）
 *     > .sf-p > i.pt / i.mt        DOM 粒子（每颗带 --x --y --d --t --s --r --o）
 *     > i.sf-rim + i.sf-cnr×4      仅传说：流光描边 + 四角纹样
 * 宿主：.fm-card（阵容大卡 292×596）/ .card（C.card）/ .dp-icard（人物信息卡）/ .sk-stage（皮肤面板预览）
 *       宿主段落在文件末尾统一定位，特效本身全部用百分比，跟着容器缩放。
 * 性能：只用 transform / opacity / filter 做动画，粒子总数 ≤ 24；prefers-reduced-motion 时全部停。
 * ============================================================ */

/* ---------------- 0. 通用容器 ---------------- */
/* --travel = 粒子在本容器内的行程（宿主段落按卡面高度覆盖）；--orbit = 金符环绕半径 */
.skin-fx{position:absolute;left:0;right:0;top:0;bottom:0;z-index:5;pointer-events:none;overflow:hidden;border-radius:inherit;
  --travel:400px;--orbit:72px}
/* 注意：这里刻意不写 isolation/contain —— 那会新建层叠上下文，让 mix-blend-mode 只跟自己合成，
   墨雾就不再「压暗立绘」、火光也不再「照亮立绘」。裁切交给 overflow:hidden 即可。 */
.skin-fx i,.skin-fx .sf-p,.skin-fx .sf-svg{position:absolute;pointer-events:none}
.skin-fx>i.sf-glow,.skin-fx>i.sf-a,.skin-fx>i.sf-b,.skin-fx>i.sf-c{left:0;right:0;top:0;bottom:0;display:block}
.skin-fx .sf-p{left:0;right:0;top:0;bottom:0}
.skin-fx .sf-p .pt,.skin-fx .sf-p .mt{left:var(--x,50%);top:var(--y,auto);animation-duration:var(--d,4s);animation-delay:var(--t,0s);
  animation-iteration-count:infinite;animation-fill-mode:both;will-change:transform,opacity}
.skin-fx .sf-svg{left:0;right:0;top:2%;bottom:0;width:100%;height:96%}

/* 传说：流光描边 + 四角纹样 */
/* 环形流光：外层做「环」的遮罩 + overflow 裁切，真正旋转的是里面那块大方块（直接转外层会把矩形边转成斜线） */
.skin-fx .sf-rim{inset:2px;border-radius:inherit;overflow:hidden;padding:2.5px;
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 4px rgba(255,214,90,.75));opacity:.95}
.skin-fx .sf-rim::before{content:'';position:absolute;left:-60%;top:-60%;width:220%;height:220%;
  background:conic-gradient(from 0deg,transparent 0 8%,rgba(255,246,208,.95) 14%,rgba(242,194,69,.9) 20%,transparent 30%,
    transparent 55%,rgba(255,246,208,.9) 63%,rgba(242,194,69,.85) 70%,transparent 82%);
  animation:skRim 3.6s linear infinite}
@keyframes skRim{to{transform:rotate(360deg)}}
/* 角落纹样：金色包角直角 + 角珠（不用 repeating 斜纹，避免看成乱划的斜线） */
.skin-fx .sf-cnr{width:17%;height:8.5%;opacity:.92;
  background:
    linear-gradient(90deg,#fff8dc,#f2c245 45%,rgba(242,194,69,0)) left top/100% 2px no-repeat,
    linear-gradient(180deg,#fff8dc,#f2c245 45%,rgba(242,194,69,0)) left top/2px 100% no-repeat,
    linear-gradient(90deg,rgba(255,246,208,.85),rgba(242,194,69,0) 70%) left 5px top/60% 1px no-repeat,
    linear-gradient(180deg,rgba(255,246,208,.85),rgba(242,194,69,0) 70%) left top 5px/1px 60% no-repeat,
    radial-gradient(circle at 3px 3px,#fffbe6 0 1.6px,#f2c245 1.6px 3px,transparent 3.2px);
  animation:skCnr 2.8s ease-in-out infinite;filter:drop-shadow(0 0 3px rgba(255,214,90,.7))}
.skin-fx .sf-cnr.tl{left:3px;top:3px}
.skin-fx .sf-cnr.tr{right:3px;top:3px;transform:scaleX(-1)}
.skin-fx .sf-cnr.bl{left:3px;bottom:3px;transform:scaleY(-1)}
.skin-fx .sf-cnr.br{right:3px;bottom:3px;transform:scale(-1)}
@keyframes skCnr{0%,100%{opacity:.55}50%{opacity:1}}
.skin-fx.sk-legend .sf-glow{filter:saturate(1.15) brightness(1.08)}

/* ---------------- 1. ink 墨影 ---------------- */
/* 黑色墨雾自下而上翻涌（两层不同速率的径向斑块 + 遮罩），另有飘散墨点 */
.skin-fx-ink .sf-glow{background:linear-gradient(180deg,transparent 26%,rgba(16,10,6,.18) 62%,rgba(8,5,3,.44) 100%);mix-blend-mode:multiply}
.skin-fx-ink .sf-a,.skin-fx-ink .sf-b{
  background:
    radial-gradient(ellipse 28% 22% at 14% 74%,rgba(16,10,6,.72),transparent 70%),
    radial-gradient(ellipse 34% 26% at 52% 86%,rgba(24,14,8,.78),transparent 68%),
    radial-gradient(ellipse 26% 20% at 86% 76%,rgba(12,8,5,.7),transparent 70%),
    radial-gradient(ellipse 46% 30% at 38% 100%,rgba(6,4,2,.88),transparent 72%),
    radial-gradient(ellipse 20% 15% at 70% 58%,rgba(20,13,8,.5),transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,transparent 16%,rgba(0,0,0,.55) 44%,#000 74%);
  mask-image:linear-gradient(180deg,transparent 16%,rgba(0,0,0,.55) 44%,#000 74%);
  mix-blend-mode:multiply;filter:blur(4px)}
.skin-fx-ink .sf-a{animation:skInkA 7s ease-in-out infinite}
.skin-fx-ink .sf-b{animation:skInkB 9.5s ease-in-out infinite;opacity:.72;transform:scaleX(-1)}
/* 墨里翻出的灰白飞白，压在深色立绘上也看得见 */
.skin-fx-ink .sf-c{
  background:
    radial-gradient(ellipse 34% 10% at 26% 62%,rgba(230,224,212,.55),transparent 72%),
    radial-gradient(ellipse 28% 8% at 72% 76%,rgba(216,209,196,.46),transparent 74%),
    radial-gradient(ellipse 40% 12% at 50% 92%,rgba(204,196,182,.38),transparent 74%);
  mix-blend-mode:screen;filter:blur(5px);animation:skInkC 6.4s ease-in-out infinite}
@keyframes skInkA{0%,100%{transform:translateY(8%) scale(1.02)}50%{transform:translateY(-9%) scale(1.16)}}
@keyframes skInkB{0%,100%{transform:scaleX(-1) translateY(2%) scale(1.08)}50%{transform:scaleX(-1) translateY(-14%) scale(1.2)}}
@keyframes skInkC{0%,100%{opacity:.3;transform:translateY(4%) scale(1)}50%{opacity:.85;transform:translateY(-8%) scale(1.1)}}
.skin-fx-ink .pt{bottom:-6%;width:calc(8px*var(--s,1));height:calc(8px*var(--s,1));border-radius:52% 48% 55% 45%/48% 55% 45% 52%;
  background:radial-gradient(circle at 35% 30%,rgba(96,78,58,.95),rgba(8,5,3,.98) 72%);
  box-shadow:0 0 calc(4px*var(--s,1)) rgba(0,0,0,.5);
  filter:blur(.5px);animation-name:skInkP;animation-timing-function:ease-in}
@keyframes skInkP{
  0%{transform:translate(0,0) scale(.5);opacity:0}
  12%{opacity:.95}
  60%{transform:translate(calc(var(--r,0deg)/6*1px),calc(-.55*var(--travel))) scale(1)}
  100%{transform:translate(calc(var(--r,0deg)/3*1px),calc(-1*var(--travel))) scale(1.6);opacity:0}}

/* ---------------- 2. flame 烈焰 ---------------- */
/* 底部橙红火舌舔舐（多层径向渐变 + 波浪 mask 抖动）+ 上升火星 */
.skin-fx-flame .sf-glow{background:radial-gradient(ellipse 90% 46% at 50% 104%,rgba(255,140,30,.55),rgba(216,50,31,.22) 45%,transparent 74%);
  mix-blend-mode:screen;animation:skFlGlow 1.4s ease-in-out infinite}
@keyframes skFlGlow{0%,100%{opacity:.72}50%{opacity:1}}
.skin-fx-flame .sf-a,.skin-fx-flame .sf-b,.skin-fx-flame .sf-c{mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,transparent 8%,rgba(0,0,0,.55) 34%,#000 62%);
  mask-image:linear-gradient(180deg,transparent 8%,rgba(0,0,0,.55) 34%,#000 62%)}
.skin-fx-flame .sf-a{
  background:
    radial-gradient(ellipse 20% 46% at 14% 100%,#fff2b0 0 10%,#ffb020 34%,#ff5a10 60%,rgba(180,30,6,0) 82%),
    radial-gradient(ellipse 24% 58% at 38% 102%,#fff6cf 0 9%,#ffc23a 30%,#ff6a12 58%,rgba(180,30,6,0) 84%),
    radial-gradient(ellipse 21% 50% at 63% 100%,#fff2b0 0 10%,#ffb020 32%,#ff5010 60%,rgba(180,30,6,0) 82%),
    radial-gradient(ellipse 19% 42% at 87% 101%,#ffe89a 0 10%,#ff9c1a 34%,#e03a08 62%,rgba(180,30,6,0) 84%);
  animation:skFlA .9s ease-in-out infinite alternate;filter:blur(1.5px)}
.skin-fx-flame .sf-b{
  background:
    radial-gradient(ellipse 13% 34% at 26% 100%,#fffbe0 0 12%,#ffcf4a 36%,rgba(255,110,20,0) 78%),
    radial-gradient(ellipse 15% 40% at 51% 101%,#fffbe0 0 12%,#ffd75a 36%,rgba(255,110,20,0) 78%),
    radial-gradient(ellipse 12% 30% at 75% 100%,#fffbe0 0 12%,#ffcf4a 36%,rgba(255,110,20,0) 78%);
  animation:skFlB .66s ease-in-out infinite alternate;opacity:.95}
.skin-fx-flame .sf-c{background:radial-gradient(ellipse 72% 30% at 50% 104%,rgba(255,80,14,.85),transparent 74%);
  animation:skFlC 1.1s ease-in-out infinite alternate;filter:blur(6px)}
@keyframes skFlA{from{transform:scaleY(.9) translateY(3%)}to{transform:scaleY(1.24) translateY(-6%)}}
@keyframes skFlB{from{transform:scaleY(1.02) scaleX(1.06)}to{transform:scaleY(1.42) scaleX(.92)}}
@keyframes skFlC{from{opacity:.5}to{opacity:.95}}
.skin-fx-flame .pt{bottom:2%;width:calc(5px*var(--s,1));height:calc(5px*var(--s,1));border-radius:50%;
  background:radial-gradient(circle,#fff8d0 0 30%,#ffb020 60%,rgba(255,90,10,0) 100%);
  box-shadow:0 0 calc(5px*var(--s,1)) rgba(255,170,40,.9);
  animation-name:skFlP;animation-timing-function:ease-out}
@keyframes skFlP{
  0%{transform:translate(0,0) scale(.5);opacity:0}
  10%{opacity:1}
  70%{opacity:.9}
  100%{transform:translate(calc(var(--r,0deg)/2.5*1px),calc(-.62*var(--travel))) scale(.2);opacity:0}}

/* ---------------- 3. frost 冰霜 ---------------- */
/* 边缘冰晶生长（conic 尖刺 + mask 只留四周）+ 飘落雪花 + 冷雾 */
.skin-fx-frost .sf-glow{background:radial-gradient(ellipse 90% 80% at 50% 45%,rgba(150,225,255,.16),transparent 68%),
  linear-gradient(180deg,rgba(120,200,255,.2),transparent 40%);mix-blend-mode:screen}
.skin-fx-frost .sf-a{
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,rgba(196,240,255,.98) 0deg 2.2deg,transparent 2.2deg 8deg);
  -webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,transparent 74%,#000 96%);
  mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,transparent 74%,#000 96%);
  mix-blend-mode:screen;animation:skFrA 6s ease-in-out infinite;filter:drop-shadow(0 0 3px rgba(160,225,255,.8))}
.skin-fx-frost .sf-b{
  background:
    linear-gradient(140deg,rgba(226,250,255,.95) 0 1.4px,transparent 1.4px 8px),
    linear-gradient(40deg,rgba(206,244,255,.85) 0 1.4px,transparent 1.4px 10px),
    linear-gradient(90deg,rgba(236,252,255,.7) 0 1.2px,transparent 1.2px 14px);
  -webkit-mask-image:radial-gradient(ellipse 66% 62% at 50% 52%,transparent 56%,#000 88%);
  mask-image:radial-gradient(ellipse 66% 62% at 50% 52%,transparent 56%,#000 88%);
  mix-blend-mode:screen;opacity:.8;animation:skFrB 8s ease-in-out infinite}
.skin-fx-frost .sf-c{background:
    linear-gradient(180deg,rgba(190,235,255,.34),transparent 26%,transparent 60%,rgba(170,225,255,.46)),
    radial-gradient(circle at 0% 0%,rgba(235,250,255,.75) 0 4%,transparent 16%),
    radial-gradient(circle at 100% 0%,rgba(235,250,255,.7) 0 4%,transparent 16%),
    radial-gradient(circle at 0% 100%,rgba(235,250,255,.7) 0 5%,transparent 18%),
    radial-gradient(circle at 100% 100%,rgba(235,250,255,.75) 0 5%,transparent 18%);
  mix-blend-mode:screen;filter:blur(4px);animation:skFrC 5.2s ease-in-out infinite}
@keyframes skFrA{0%,100%{opacity:.62;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@keyframes skFrB{0%,100%{opacity:.5}50%{opacity:.95}}
@keyframes skFrC{0%,100%{opacity:.45;transform:translateY(0)}50%{opacity:.85;transform:translateY(-2%)}}
.skin-fx-frost .pt{top:-6%;width:calc(7px*var(--s,1));height:calc(7px*var(--s,1));
  background:
    linear-gradient(0deg,transparent 44%,#fff 44% 56%,transparent 56%),
    linear-gradient(60deg,transparent 44%,#eaf9ff 44% 56%,transparent 56%),
    linear-gradient(120deg,transparent 44%,#eaf9ff 44% 56%,transparent 56%);
  filter:drop-shadow(0 0 3px rgba(150,225,255,1)) drop-shadow(0 0 6px rgba(90,180,255,.6));
  animation-name:skFrP;animation-timing-function:linear}
@keyframes skFrP{
  0%{transform:translate(0,0) rotate(0);opacity:0}
  8%{opacity:.95}
  50%{transform:translate(9px,calc(.55*var(--travel))) rotate(180deg)}
  90%{opacity:.9}
  100%{transform:translate(-7px,calc(1.06*var(--travel))) rotate(360deg);opacity:0}}

/* ---------------- 4. thunder 雷电 ---------------- */
/* 不定时紫白闪电划过（clip-path 折线，间歇播放）+ 电弧噼啪 + 瞬间高光 */
.skin-fx-thunder .sf-glow{background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(176,76,255,.28),transparent 70%);
  mix-blend-mode:screen;animation:skThGlow 2.2s ease-in-out infinite}
@keyframes skThGlow{0%,60%,100%{opacity:.45}66%{opacity:1}72%{opacity:.55}80%{opacity:.95}88%{opacity:.5}}
.skin-fx-thunder .sf-a{
  background:linear-gradient(180deg,#ffffff,#e6c8ff 35%,#b04cff 70%,rgba(120,40,220,0));
  clip-path:polygon(46% 0%,58% 0%,50% 30%,64% 28%,44% 68%,52% 44%,38% 46%,52% 22%,40% 24%);
  filter:drop-shadow(0 0 6px rgba(200,140,255,.95)) drop-shadow(0 0 14px rgba(150,80,255,.6));
  mix-blend-mode:screen;animation:skThA 2.2s steps(1,end) infinite}
.skin-fx-thunder .sf-b{
  background:linear-gradient(180deg,#ffffff,#d9b8ff 40%,rgba(140,60,230,0));
  clip-path:polygon(22% 6%,31% 4%,26% 34%,38% 32%,18% 78%,26% 50%,13% 52%,25% 28%);
  filter:drop-shadow(0 0 5px rgba(210,160,255,.9));transform:scale(.9) translateX(30%);
  mix-blend-mode:screen;animation:skThB 2.2s steps(1,end) infinite;animation-delay:.35s}
.skin-fx-thunder .sf-c{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(200,160,255,.4) 42%,transparent 72%);
  mix-blend-mode:screen;animation:skThC 2.2s ease-out infinite}
@keyframes skThA{0%,54%,100%{opacity:.16}56%{opacity:1}60%{opacity:.2}62%{opacity:.95}68%{opacity:.16}}
@keyframes skThB{0%,34%,100%{opacity:.12}36%{opacity:.95}40%{opacity:.12}42%{opacity:.85}47%{opacity:.12}}
@keyframes skThC{0%,54%,100%{opacity:0}57%{opacity:.8}63%{opacity:0}70%{opacity:.5}76%{opacity:0}}
.skin-fx-thunder .pt{width:calc(20px*var(--s,1));height:calc(2px*var(--s,1));border-radius:2px;
  transform:rotate(var(--r,0deg));transform-origin:50% 50%;
  background:linear-gradient(90deg,transparent,#fff 30%,#d7b0ff 60%,transparent);
  box-shadow:0 0 calc(6px*var(--s,1)) rgba(190,130,255,.95);
  animation-name:skThP;animation-timing-function:steps(1,end)}
@keyframes skThP{0%,26%,100%{opacity:0}30%{opacity:1}36%{opacity:0}58%{opacity:.9}64%{opacity:0}82%{opacity:.7}88%{opacity:0}}

/* ---------------- 5. petals 花瓣 ---------------- */
/* 粉色花瓣旋转飘落 + 柔光 */
.skin-fx-petals .sf-glow{background:radial-gradient(ellipse 78% 62% at 50% 42%,rgba(255,190,215,.24),transparent 70%),
  radial-gradient(ellipse 50% 30% at 50% 8%,rgba(255,235,245,.3),transparent 72%);mix-blend-mode:screen;
  animation:skPeGlow 5s ease-in-out infinite}
@keyframes skPeGlow{0%,100%{opacity:.65}50%{opacity:1}}
.skin-fx-petals .sf-a{background:
    radial-gradient(circle at 22% 26%,rgba(255,220,235,.5) 0 3%,transparent 4%),
    radial-gradient(circle at 74% 18%,rgba(255,230,240,.45) 0 2.4%,transparent 3.4%),
    radial-gradient(circle at 58% 62%,rgba(255,215,232,.4) 0 3.2%,transparent 4.2%),
    radial-gradient(circle at 30% 74%,rgba(255,235,245,.4) 0 2.2%,transparent 3.2%);
  mix-blend-mode:screen;filter:blur(2px);animation:skPeA 7s ease-in-out infinite}
.skin-fx-petals .sf-b{background:conic-gradient(from 210deg at 50% 40%,transparent 0 40%,rgba(255,225,240,.22) 50%,transparent 60%);
  mix-blend-mode:screen;animation:skPeB 12s linear infinite}
.skin-fx-petals .sf-c{display:none}
@keyframes skPeA{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:.95;transform:translateY(-2%)}}
@keyframes skPeB{to{transform:rotate(360deg)}}
.skin-fx-petals .pt{top:-8%;width:calc(9px*var(--s,1));height:calc(7px*var(--s,1));
  border-radius:100% 0 100% 0;
  background:linear-gradient(135deg,#fff2f7,#ffb6d0 55%,#f07aa6);
  box-shadow:0 0 3px rgba(255,180,210,.7);
  animation-name:skPeP;animation-timing-function:linear}
@keyframes skPeP{
  0%{transform:translate(0,0) rotate(var(--r,0deg));opacity:0}
  8%{opacity:1}
  25%{transform:translate(16px,calc(.25*var(--travel))) rotate(calc(var(--r,0deg) + 220deg))}
  55%{transform:translate(-14px,calc(.6*var(--travel))) rotate(calc(var(--r,0deg) + 520deg))}
  85%{opacity:.95}
  100%{transform:translate(12px,calc(1.08*var(--travel))) rotate(calc(var(--r,0deg) + 900deg));opacity:0}}

/* ---------------- 6. goldrune 金符 ---------------- */
/* 金色梵文/符文环绕旋转 + 金光呼吸 */
.skin-fx-goldrune .sf-glow{background:radial-gradient(ellipse 66% 50% at 50% 46%,rgba(255,214,90,.3),rgba(184,134,11,.12) 52%,transparent 74%);
  mix-blend-mode:screen;animation:skGrGlow 3.4s ease-in-out infinite}
@keyframes skGrGlow{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}
.skin-fx-goldrune .sf-a,.skin-fx-goldrune .sf-b{border-radius:50%;left:8%;right:8%;top:18%;bottom:26%;
  mix-blend-mode:screen}
.skin-fx-goldrune .sf-a{background:repeating-conic-gradient(from 0deg,rgba(255,242,190,.98) 0deg 5deg,transparent 5deg 13deg);
  -webkit-mask:radial-gradient(closest-side,transparent 0 82%,#000 86% 98%,transparent 100%);
  mask:radial-gradient(closest-side,transparent 0 82%,#000 86% 98%,transparent 100%);
  animation:skGrSpin 16s linear infinite;filter:drop-shadow(0 0 5px rgba(255,206,80,.95))}
.skin-fx-goldrune .sf-b{background:repeating-conic-gradient(from 12deg,rgba(255,214,90,.95) 0deg 9deg,transparent 9deg 27deg);
  -webkit-mask:radial-gradient(closest-side,transparent 0 78%,#000 84% 98%,transparent 100%);
  mask:radial-gradient(closest-side,transparent 0 78%,#000 84% 98%,transparent 100%);
  transform:scale(.72);animation:skGrSpinR 22s linear infinite;opacity:.9;filter:drop-shadow(0 0 4px rgba(255,190,50,.8))}
.skin-fx-goldrune .sf-c{left:14%;right:14%;top:24%;bottom:34%;border-radius:50%;
  border:1.5px solid rgba(255,230,150,.75);box-shadow:0 0 10px rgba(255,206,80,.6),inset 0 0 14px rgba(255,214,90,.45);
  mix-blend-mode:screen;animation:skGrRing 4.2s ease-in-out infinite}
@keyframes skGrSpin{to{transform:rotate(360deg)}}
@keyframes skGrSpinR{to{transform:scale(.78) rotate(-360deg)}}
@keyframes skGrRing{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.95;transform:scale(1.06)}}
.skin-fx-goldrune .sf-p{left:50%;top:46%;right:auto;bottom:auto;width:0;height:0}
.skin-fx-goldrune .pt{left:0;top:0;font-family:var(--font-brush,serif);font-size:var(--gsz,15px);font-style:normal;line-height:1;
  color:#fff8dc;text-shadow:0 0 4px rgba(255,214,90,1),0 0 10px rgba(255,160,20,.9),0 1px 2px rgba(90,40,0,.9);opacity:var(--o,.9);
  transform-origin:0 0;animation-name:skGrP;animation-timing-function:linear}
@keyframes skGrP{
  from{transform:rotate(var(--r,0deg)) translateX(var(--orbit)) rotate(calc(-1*var(--r,0deg))) scale(var(--s,1))}
  to{transform:rotate(calc(var(--r,0deg) + 360deg)) translateX(var(--orbit)) rotate(calc(-1*var(--r,0deg) - 360deg)) scale(var(--s,1))}}

/* ---------------- 7. starfall 星辰 ---------------- */
/* 星点闪烁 + 流星划过 + 星环 */
.skin-fx-starfall .sf-glow{background:radial-gradient(ellipse 80% 66% at 50% 40%,rgba(140,170,255,.22),transparent 70%),
  linear-gradient(180deg,rgba(20,16,50,.28),transparent 46%);mix-blend-mode:screen}
.skin-fx-starfall .sf-a{left:10%;right:10%;top:18%;bottom:26%;border-radius:50%;
  border:1px solid rgba(190,210,255,.6);box-shadow:0 0 10px rgba(150,180,255,.55),inset 0 0 18px rgba(140,170,255,.3);
  mix-blend-mode:screen;animation:skStRing 14s linear infinite}
.skin-fx-starfall .sf-b{left:16%;right:16%;top:26%;bottom:34%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(220,230,255,.85) 0deg 1deg,transparent 1deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 0 74%,#000 76%);mask:radial-gradient(circle,transparent 0 74%,#000 76%);
  mix-blend-mode:screen;animation:skStRingR 9s linear infinite}
.skin-fx-starfall .sf-c{background:radial-gradient(circle at 50% 34%,rgba(255,255,255,.28),transparent 34%);
  mix-blend-mode:screen;animation:skStPulse 3.6s ease-in-out infinite}
@keyframes skStRing{to{transform:rotate(360deg)}}
@keyframes skStRingR{to{transform:rotate(-360deg)}}
@keyframes skStPulse{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:.9;transform:scale(1.05)}}
.skin-fx-starfall .pt{width:calc(4px*var(--s,1));height:calc(4px*var(--s,1));
  background:
    radial-gradient(circle,#fff 0 22%,rgba(190,215,255,.5) 45%,transparent 70%),
    linear-gradient(0deg,transparent 46%,#fff 46% 54%,transparent 54%),
    linear-gradient(90deg,transparent 46%,#fff 46% 54%,transparent 54%);
  filter:drop-shadow(0 0 3px rgba(200,220,255,.95));
  animation-name:skStP;animation-timing-function:ease-in-out}
@keyframes skStP{0%,100%{opacity:.1;transform:scale(.55) rotate(0)}50%{opacity:1;transform:scale(1.4) rotate(45deg)}}
.skin-fx-starfall .mt{width:calc(64px*var(--s,1));height:calc(2px*var(--s,1));border-radius:2px;transform-origin:100% 50%;
  background:linear-gradient(90deg,transparent,rgba(190,215,255,.35) 40%,#fff);
  filter:drop-shadow(0 0 4px rgba(180,210,255,.9));
  animation-name:skStM;animation-timing-function:cubic-bezier(.3,0,.7,1)}
@keyframes skStM{
  0%{transform:rotate(28deg) translate(0,0) scaleX(0);opacity:0}
  8%{opacity:1;transform:rotate(28deg) translate(-10px,18px) scaleX(1)}
  46%{opacity:.95}
  60%{transform:rotate(28deg) translate(-150px,90px) scaleX(1);opacity:0}
  100%{transform:rotate(28deg) translate(-150px,90px) scaleX(0);opacity:0}}

/* ---------------- 8. dragon 龙气 ---------------- */
/* 金色龙形气流盘旋：SVG path + stroke-dashoffset 流动，外加金雾与浮尘 */
.skin-fx-dragon .sf-glow{background:radial-gradient(ellipse 70% 60% at 50% 52%,rgba(255,200,70,.24),transparent 72%);
  mix-blend-mode:screen;animation:skDgGlow 3.8s ease-in-out infinite}
@keyframes skDgGlow{0%,100%{opacity:.55}50%{opacity:1}}
.skin-fx-dragon .sf-a{background:
    radial-gradient(ellipse 40% 22% at 30% 74%,rgba(255,214,90,.3),transparent 70%),
    radial-gradient(ellipse 36% 20% at 70% 40%,rgba(255,236,170,.26),transparent 70%);
  mix-blend-mode:screen;filter:blur(5px);animation:skDgA 8s ease-in-out infinite}
.skin-fx-dragon .sf-b,.skin-fx-dragon .sf-c{display:none}
@keyframes skDgA{0%,100%{transform:translateY(2%) scale(1)}50%{transform:translateY(-3%) scale(1.06)}}
.skin-fx-dragon .sf-svg{mix-blend-mode:screen;filter:drop-shadow(0 0 5px rgba(255,196,60,.85))}
/* dg1 = 常驻的整条龙身（虚线极长，等于实线，靠透明度当底气流）；dg2/dg3 = 沿身流动的高光 */
.skin-fx-dragon .dg1{stroke-dasharray:none;opacity:.42;animation:skDgBreath 3.8s ease-in-out infinite}
.skin-fx-dragon .dg2{stroke-dasharray:150 380;opacity:1;animation:skDgFlow 3.2s linear infinite}
.skin-fx-dragon .dg3{stroke-dasharray:26 70;opacity:.85;animation:skDgFlow2 2.2s linear infinite}
@keyframes skDgFlow{from{stroke-dashoffset:530}to{stroke-dashoffset:0}}
@keyframes skDgFlow2{from{stroke-dashoffset:96}to{stroke-dashoffset:0}}
@keyframes skDgBreath{0%,100%{opacity:.3}50%{opacity:.6}}
.skin-fx-dragon .pt{width:calc(4px*var(--s,1));height:calc(4px*var(--s,1));border-radius:50%;
  background:radial-gradient(circle,#fff6cf 0 30%,rgba(255,196,60,.7) 60%,transparent 75%);
  box-shadow:0 0 calc(5px*var(--s,1)) rgba(255,200,70,.8);
  animation-name:skDgP;animation-timing-function:ease-in-out}
@keyframes skDgP{
  0%{transform:translate(0,0) scale(.4);opacity:0}
  20%{opacity:.95}
  100%{transform:translate(10px,calc(-.32*var(--travel))) scale(1.1);opacity:0}}

/* ---------------- 9. blood 血煞 ---------------- */
/* 暗红血雾 + 血滴上浮 + 边缘赤芒 */
.skin-fx-blood .sf-glow{background:radial-gradient(ellipse 84% 60% at 50% 78%,rgba(140,10,10,.4),transparent 72%);
  mix-blend-mode:multiply;animation:skBlGlow 4.4s ease-in-out infinite}
@keyframes skBlGlow{0%,100%{opacity:.65}50%{opacity:1}}
.skin-fx-blood .sf-a{background:
    radial-gradient(ellipse 30% 22% at 22% 78%,rgba(150,14,14,.75),transparent 68%),
    radial-gradient(ellipse 34% 24% at 58% 88%,rgba(110,8,8,.75),transparent 68%),
    radial-gradient(ellipse 26% 20% at 84% 74%,rgba(160,20,20,.65),transparent 68%);
  -webkit-mask-image:linear-gradient(180deg,transparent 14%,#000 62%);mask-image:linear-gradient(180deg,transparent 14%,#000 62%);
  mix-blend-mode:multiply;filter:blur(4px);animation:skBlA 6.5s ease-in-out infinite}
.skin-fx-blood .sf-b{
  box-shadow:inset 0 0 22px 6px rgba(255,40,40,.75),inset 0 0 54px 16px rgba(160,0,0,.55);
  mix-blend-mode:screen;animation:skBlB 2.6s ease-in-out infinite}
.skin-fx-blood .sf-c{background:radial-gradient(ellipse 60% 40% at 50% 44%,rgba(255,40,40,.16),transparent 66%);
  mix-blend-mode:screen;animation:skBlC 3.3s ease-in-out infinite}
@keyframes skBlA{0%,100%{transform:translateY(3%) scale(1.02)}50%{transform:translateY(-4%) scale(1.1)}}
@keyframes skBlB{0%,100%{opacity:.42}50%{opacity:.95}}
@keyframes skBlC{0%,100%{opacity:.35;transform:scale(.98)}50%{opacity:.8;transform:scale(1.05)}}
.skin-fx-blood .pt{bottom:4%;width:calc(5px*var(--s,1));height:calc(8px*var(--s,1));border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 35% 30%,#ff6a6a 0 18%,#c21414 55%,#5a0303 100%);
  box-shadow:0 0 calc(5px*var(--s,1)) rgba(220,30,30,.7);
  animation-name:skBlP;animation-timing-function:ease-in-out}
@keyframes skBlP{
  0%{transform:translate(0,0) scale(.4);opacity:0}
  14%{opacity:1}
  100%{transform:translate(calc(var(--s,1)*7px),calc(-.72*var(--travel))) scale(1.05);opacity:0}}

/* ---------------- 10. poison 剧毒 ---------------- */
/* 绿色毒雾翻滚 + 气泡 + 幽绿脉动 */
.skin-fx-poison .sf-glow{background:radial-gradient(ellipse 88% 56% at 50% 88%,rgba(60,190,70,.36),transparent 72%);
  mix-blend-mode:screen;animation:skPoGlow 3s ease-in-out infinite}
@keyframes skPoGlow{0%,100%{opacity:.5}50%{opacity:1}}
.skin-fx-poison .sf-a,.skin-fx-poison .sf-b{
  background:
    radial-gradient(ellipse 28% 20% at 20% 84%,rgba(80,210,90,.6),transparent 66%),
    radial-gradient(ellipse 32% 22% at 50% 92%,rgba(40,170,60,.65),transparent 66%),
    radial-gradient(ellipse 26% 18% at 80% 86%,rgba(110,220,100,.55),transparent 66%);
  -webkit-mask-image:linear-gradient(180deg,transparent 22%,#000 66%);mask-image:linear-gradient(180deg,transparent 22%,#000 66%);
  mix-blend-mode:screen;filter:blur(4px)}
.skin-fx-poison .sf-a{animation:skPoA 6.2s ease-in-out infinite}
.skin-fx-poison .sf-b{animation:skPoB 8.4s ease-in-out infinite;opacity:.7;transform:scaleX(-1)}
.skin-fx-poison .sf-c{background:radial-gradient(ellipse 56% 40% at 50% 58%,rgba(150,255,140,.2),transparent 68%);
  mix-blend-mode:screen;animation:skPoC 2.4s ease-in-out infinite}
@keyframes skPoA{0%,100%{transform:translateY(4%) scale(1.02)}50%{transform:translateY(-6%) scale(1.14)}}
@keyframes skPoB{0%,100%{transform:scaleX(-1) translateY(0) scale(1.04)}50%{transform:scaleX(-1) translateY(-9%) scale(1.18)}}
@keyframes skPoC{0%,100%{opacity:.3}50%{opacity:.85}}
.skin-fx-poison .pt{bottom:3%;width:calc(7px*var(--s,1));height:calc(7px*var(--s,1));border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(240,255,220,.95) 0 14%,rgba(120,230,110,.55) 42%,rgba(30,140,40,.25) 72%,transparent 78%);
  box-shadow:inset 0 0 3px rgba(255,255,255,.7),0 0 calc(5px*var(--s,1)) rgba(90,220,90,.7);
  animation-name:skPoP;animation-timing-function:ease-in}
@keyframes skPoP{
  0%{transform:translate(0,0) scale(.35);opacity:0}
  12%{opacity:.95}
  78%{opacity:.9}
  92%{transform:translate(calc(var(--s,1)*6px),calc(-.66*var(--travel))) scale(1.25);opacity:.8}
  100%{transform:translate(calc(var(--s,1)*6px),calc(-.7*var(--travel))) scale(1.7);opacity:0}}

/* ---------------- 11. 宿主定位 ---------------- */
/* 阵容大卡 .fm-card（292×596，立绘 22~434，底部信息条 172）：特效只铺立绘区，压在卡框之下 */
.fm-card .skin-fx{top:5px;left:5px;right:5px;bottom:166px;border-radius:8px;z-index:4;--travel:430px;--orbit:74px;--gsz:15px}
.fm-card.has-skin .portrait .fm-por{filter:drop-shadow(0 8px 12px rgba(50,30,6,.55))}
/* C.card 通用大卡（300×440） */
.card .skin-fx{top:4px;left:4px;right:4px;bottom:150px;border-radius:8px;z-index:4;--travel:292px;--orbit:60px;--gsz:13px}
/* 人物信息弹窗的小卡（200×300） */
.dp-icard .skin-fx{left:4px;right:4px;top:4px;bottom:70px;border-radius:8px;z-index:4;--travel:232px;--orbit:46px;--gsz:11px}
/* 皮肤面板预览台（236×330） */
.sk-stage .skin-fx{inset:0;border-radius:10px;z-index:4;--travel:336px;--orbit:64px;--gsz:14px}
/* 皮肤卡缩略：不放特效层（只放立绘），避免一屏几十个动画层 */
.sk-card .skin-fx{display:none}

/* 传说卡框：比史诗多一层流光描边（.sf-rim 已在层内）+ 外框金气 */
.fm-card.skin-rank-legend .frame,.card.skin-rank-legend .card-frame{
  box-shadow:0 0 0 1px rgba(255,246,208,.55),0 0 14px 2px rgba(255,206,80,.45)}
.fm-card.skin-rank-epic .frame,.card.skin-rank-epic .card-frame{
  box-shadow:0 0 0 1px rgba(226,196,255,.5),0 0 10px 1px rgba(160,90,240,.35)}

/* ============================================================
 * 12. 皮肤面板 .sk-modal
 * ============================================================ */
.sk-modal .modal-body{padding:0}
.sk-panel{width:100%;padding:10px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:9px}

.sk-stage{position:relative;width:236px;height:330px;border-radius:10px;overflow:hidden;flex:none;
  background:var(--tex-paper),radial-gradient(ellipse at 50% 34%,#f9ebc2 0%,#f0d692 46%,#dcbc7c 100%);
  box-shadow:0 0 0 2px #b8945a,0 0 0 4px #3a1d0c,0 4px 12px rgba(0,0,0,.45)}
.sk-stage .sk-halo{position:absolute;left:50%;top:44%;width:250px;height:250px;margin:-125px 0 0 -125px;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,240,190,.85) 0%,rgba(255,214,110,.4) 38%,transparent 68%)}
.sk-stage .portrait{position:absolute;left:0;right:0;top:0;bottom:0;z-index:2}
.sk-stage .portrait img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(0 6px 10px rgba(60,40,10,.5))}
.sk-stage .sk-frame{position:absolute;inset:4px;z-index:6;border-radius:7px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,240,190,.55),inset 0 0 22px rgba(70,40,10,.35)}
.sk-stage .sk-nm{position:absolute;left:8px;top:8px;z-index:7;writing-mode:vertical-rl;font-family:var(--font-brush,serif);
  font-size:25px;letter-spacing:3px;color:#1a0f08;
  text-shadow:-1.4px -1.4px 0 rgba(255,250,235,.92),1.4px -1.4px 0 rgba(255,250,235,.92),-1.4px 1.4px 0 rgba(255,250,235,.92),1.4px 1.4px 0 rgba(255,250,235,.92),0 3px 5px rgba(0,0,0,.4)}
.sk-stage .sk-rank{position:absolute;right:8px;top:8px;z-index:7;padding:2px 8px;border-radius:3px;
  font-family:var(--font-brush,serif);font-size:15px;letter-spacing:2px;color:#fff}
.sk-rank-legend{background:linear-gradient(180deg,#ffd75a,#b8860b);color:#3a1d0c !important;
  box-shadow:0 0 0 1px #5a3800,0 0 10px rgba(255,206,80,.75);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.sk-rank-epic{background:linear-gradient(180deg,#b06cff,#5b1fa8);box-shadow:0 0 0 1px #2a0a4a,0 0 8px rgba(155,89,214,.6);text-shadow:0 1px 0 #2a0a4a}
.sk-rank-base{background:linear-gradient(180deg,#c9a96e,#8c7355);box-shadow:0 0 0 1px #5a4326}
.sk-stage .sk-fxtag{position:absolute;right:8px;top:34px;z-index:7;padding:1px 7px;border-radius:3px;font-size:11px;
  color:#ffe9a3;background:rgba(30,16,6,.72);box-shadow:0 0 0 1px rgba(242,194,69,.5)}
.sk-stage .sk-on,.sk-stage .sk-lock{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:7;
  padding:2px 12px;border-radius:12px;font-family:var(--font-brush,serif);font-size:14px;letter-spacing:2px;white-space:nowrap}
.sk-stage .sk-on{color:#3a1d0c;background:linear-gradient(180deg,#ffe9a3,#f2c245);box-shadow:0 0 0 1px #5a3800,0 0 10px rgba(255,206,80,.7)}
.sk-stage .sk-lock{color:#ffd9d9;background:rgba(60,10,8,.8);box-shadow:0 0 0 1px rgba(216,50,31,.7)}

.sk-meta{width:100%;text-align:center}
.sk-meta .sk-bonus{font-family:var(--font-body,serif);font-size:13.5px;font-weight:700;color:#7a1e12;letter-spacing:.5px}
.sk-meta .sk-desc{margin-top:4px;font-size:12px;line-height:1.55;color:var(--ink-soft,#5b4630);padding:0 4px}

.sk-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;width:100%;min-height:36px}
.sk-actions .btn{min-width:96px}
.sk-actions .sk-tip{font-size:12px;color:var(--ink-soft,#5b4630)}
.sk-cost{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.sk-cost .c{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-body,serif);font-size:13px;font-weight:700;color:var(--ink,#2b1d12)}
.sk-cost .c svg{width:18px;height:18px}
.sk-cost .c small{font-weight:400;font-size:10.5px;color:var(--ink-soft,#5b4630)}
.sk-cost .c.lack{color:#c0261b}
.sk-cost .c.lack small{color:#c0261b}

.sk-list{display:flex;gap:8px;width:100%;overflow-x:auto;overflow-y:hidden;padding:4px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sk-list::-webkit-scrollbar{display:none}
.sk-card{position:relative;flex:none;width:92px;padding:4px 4px 6px;border-radius:7px;cursor:pointer;transition:transform .12s;
  background:var(--tex-paper),linear-gradient(180deg,#e8d3a3,#d2b481);
  box-shadow:inset 0 1px 0 rgba(255,247,214,.8),0 0 0 1px #a98a55,0 2px 4px rgba(0,0,0,.3)}
.sk-card:active{transform:scale(.96)}
.sk-card.sk-legend{box-shadow:inset 0 1px 0 rgba(255,247,214,.8),0 0 0 2px #f2c245,0 0 8px rgba(255,206,80,.55),0 2px 4px rgba(0,0,0,.3)}
.sk-card.sk-epic{box-shadow:inset 0 1px 0 rgba(255,247,214,.8),0 0 0 2px #9b59d6,0 0 7px rgba(155,89,214,.5),0 2px 4px rgba(0,0,0,.3)}
.sk-card.sel{outline:2px solid #d8321f;outline-offset:1px}
.sk-card.locked .sk-card-por{filter:grayscale(.75) brightness(.72)}
.sk-card-por{position:relative;width:100%;height:82px;border-radius:5px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%,#f3e6c4,#c9a96e 70%)}
.sk-card-por .portrait{position:absolute;inset:0}
.sk-card-por .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.sk-card-nm{margin-top:3px;font-family:var(--font-brush,serif);font-size:13px;line-height:1.15;color:var(--ink,#2b1d12);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-card-tag{margin:2px auto 0;width:fit-content;padding:0 6px;border-radius:3px;font-size:10.5px;color:#fff;line-height:15px}
.sk-card-bn{margin-top:2px;font-size:9.5px;line-height:1.25;color:#7a1e12;text-align:center;height:24px;overflow:hidden}
.sk-card-on{position:absolute;right:-3px;top:-3px;width:18px;height:18px;border-radius:50%;font-style:normal;font-size:12px;
  line-height:18px;text-align:center;color:#3a1d0c;background:linear-gradient(180deg,#ffe9a3,#f2c245);box-shadow:0 0 0 1px #5a3800}
.sk-card-lock{position:absolute;left:2px;top:2px;padding:0 5px;border-radius:3px;font-style:normal;font-size:10px;line-height:15px;
  color:#ffe9a3;background:rgba(30,16,6,.82);box-shadow:0 0 0 1px rgba(242,194,69,.45)}
.sk-card-base .sk-card-por .portrait img{object-fit:cover}

.sk-none .sk-stage{margin-bottom:6px}
.sk-empty{text-align:center;font-family:var(--font-brush,serif);font-size:19px;color:var(--ink,#2b1d12);letter-spacing:2px}
.sk-empty small{display:block;margin-top:4px;font-family:var(--font-body,serif);font-size:12px;letter-spacing:0;color:var(--ink-soft,#5b4630)}

/* ---------------- 13. 降级 ---------------- */
@media (prefers-reduced-motion: reduce){
  .skin-fx *,.skin-fx{animation:none !important}
}