/* ============================================================
 * css/screens/formation.css — 阵容页专属样式（归属：formation 组）
 * 画布 448×780（内容区）：.fm-strip-wrap 100 + .fm-body 636 + .fm-foot 44
 * 只用 theme.css 的变量 / 纹理与通用组件类（.btn .seal .stat-seal .bar .avatar .slot .list-row .kv .modal-*），不改 theme.css / screens.css。
 * 段落：1 根容器 2 顶部阵位条 3 主阵（槽位列 + 大卡）4 布阵条 5 底栏 6 七星阵 7 弹窗
 *   文件末段「极致打磨（美术总监补丁 · 2026-09-08）」只覆盖本页 .fm-*：
 *   a 外框 13.5px 多层浮雕（品质配色 + 高光线 + 墨线 + 框顶红宝石 .gem）
 *   b 卡面底 = 金色光晕 + 水墨云 + 门派纹样 .sect（纯 CSS，缓慢自转）+ 暗角 .vignette
 *   c 立绘呼吸浮动 + 底部投影 .pshadow   d 甲级流动金边 .rim / 觉醒紫金粒子 .motes
 *   e 星级闪光   f 名字·称号·印章   g 缘分金光点   h 槽位金框   i 阵位头像条星数小行
 *   .rim 用 mask-composite 做环形遮罩，外面套了 @supports，浏览器不支持时整块不显示、无副作用。
 * ============================================================ */

/* ---------- 1. 根容器 ---------- */
.fm-root{position:relative;width:448px;height:780px;display:flex;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 30% at 50% 22%,rgba(255,250,235,.45),transparent 70%),
    var(--tex-paper),radial-gradient(ellipse at 50% 30%,#f3e6c4 0%,#e8d3a3 60%,#d9bf8a 100%)}
.fm-root::before{content:'';position:absolute;left:0;right:0;bottom:0;height:300px;pointer-events:none;z-index:0;
  background:url("../../assets/bg/ink_landscape.webp") center bottom / 448px auto no-repeat;opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%);mask-image:linear-gradient(180deg,transparent,#000 45%)}
.fm-root::after{content:'';position:absolute;left:0;right:0;bottom:44px;height:60px;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,transparent,rgba(58,29,12,.18))}

/* ---------- 2. 顶部阵位条 ---------- */
.fm-strip-wrap{position:relative;z-index:2;flex:none;height:100px;display:flex;align-items:stretch;
  background:var(--tex-wood),linear-gradient(180deg,#4a2a12 0%,#33190a 60%,#2a1608 100%);
  box-shadow:inset 0 1px 0 rgba(255,220,150,.25),inset 0 -2px 0 #1a0c04,0 3px 6px rgba(0,0,0,.45)}
.fm-strip-wrap::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;background:linear-gradient(90deg,#7a4f00,var(--gold) 20%,#fff0b3 50%,var(--gold) 80%,#7a4f00)}
.fm-strip{flex:1 1 auto;min-width:0;display:flex;align-items:flex-start;gap:8px;padding:9px 8px 0 8px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fm-strip::-webkit-scrollbar{display:none}
.fm-side{flex:none;width:82px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 4px;
  background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%)}
.fm-side .btn.btn-v{width:34px;height:84px;padding:6px 0;font-size:19px;letter-spacing:6px;text-indent:6px;border-radius:6px}
.fm-side .btn.btn-v.on{filter:brightness(1.15) saturate(1.2);box-shadow:0 0 0 2px #fff0b3,0 0 12px 3px rgba(255,210,80,.7),inset 0 -3px 0 rgba(0,0,0,.4)}

.fm-cell{position:relative;flex:none;width:76px;height:84px;cursor:pointer;transition:transform .12s;-webkit-tap-highlight-color:transparent}
.fm-cell:active{transform:scale(.95)}
.fm-cell-box{position:relative;width:76px;height:76px;border-radius:7px;overflow:hidden;
  background:var(--qbg,radial-gradient(circle at 50% 40%,#f3e6c4,#c9a96e 60%,#8c7355));
  box-shadow:0 0 0 2px var(--qc,#c9a96e),0 0 0 3px #1a0c04,0 0 0 4px rgba(242,194,69,.35),inset 0 0 10px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.6)}
.fm-cell-box::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:7px;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 35%,transparent 70%,rgba(0,0,0,.25))}
.fm-cell .fm-av{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block;position:relative;z-index:1}
.fm-cell .fm-av.missing{display:none}
.fm-cell .pm{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-family:var(--font-brush);font-size:26px;color:#3a1d0c;text-shadow:0 1px 0 rgba(255,245,220,.8)}
.fm-cell-box.fm-missing .pm{display:flex}
.fm-cell .nm{position:absolute;left:0;right:0;bottom:0;z-index:2;height:18px;line-height:18px;text-align:center;font-family:var(--font-brush);font-size:13px;letter-spacing:1px;color:#ffe9a3;
  background:linear-gradient(180deg,rgba(20,10,4,.35),rgba(20,10,4,.82));text-shadow:0 1px 0 #000}
.fm-cell .lv{position:absolute;left:-2px;top:-2px;z-index:3;min-width:22px;height:16px;padding:0 4px;border-radius:0 0 6px 0;font-family:var(--font-body);font-size:10px;font-weight:700;line-height:16px;text-align:center;color:#ffe9a3;
  background:linear-gradient(180deg,#4a2410,#1a0c04);box-shadow:0 0 0 1px #f2c245;text-shadow:0 1px 0 #000}
.fm-cell .no{position:absolute;right:-3px;top:-6px;z-index:3;width:16px;height:16px;border-radius:50%;font-family:var(--font-body);font-size:10px;font-weight:700;line-height:16px;text-align:center;color:#5a2b00;
  background:radial-gradient(circle at 35% 30%,#fff6cf,#f2c245 50%,#b8860b);box-shadow:0 0 0 1px #5a3800}
.fm-cell .gems{position:absolute;left:8px;right:8px;bottom:-1px;height:8px;z-index:4;pointer-events:none;
  background:
    radial-gradient(circle at 15% 50%,#ffb0a0 0,#d8321f 30%,#7a150a 55%,transparent 60%),
    radial-gradient(circle at 50% 50%,#ffb0a0 0,#d8321f 30%,#7a150a 55%,transparent 60%),
    radial-gradient(circle at 85% 50%,#ffb0a0 0,#d8321f 30%,#7a150a 55%,transparent 60%)}
.fm-cell.selected .fm-cell-box{box-shadow:0 0 0 2px #fff0b3,0 0 0 4px #f2c245,0 0 14px 4px rgba(255,210,80,.75),inset 0 0 10px rgba(0,0,0,.25);animation:fmSelPulse 1.6s ease-in-out infinite}
@keyframes fmSelPulse{0%,100%{box-shadow:0 0 0 2px #fff0b3,0 0 0 4px #f2c245,0 0 12px 3px rgba(255,210,80,.65)}50%{box-shadow:0 0 0 2px #fff6d5,0 0 0 4px #ffd75a,0 0 18px 6px rgba(255,220,100,.95)}}
.fm-cell.swap .fm-cell-box{box-shadow:0 0 0 2px #fff,0 0 0 4px #d8321f,0 0 16px 4px rgba(216,50,31,.8);animation:none}
.fm-cell.swap::after{content:'换';position:absolute;left:50%;top:26px;transform:translateX(-50%) rotate(-8deg);z-index:5;width:30px;height:30px;line-height:30px;border-radius:50%;text-align:center;font-family:var(--font-brush);font-size:20px;color:#fff6e6;
  background:radial-gradient(circle at 40% 35%,#e8523a,#c22f1f 45%,#8f1d13);box-shadow:0 0 0 1.5px #fff0c8,0 0 0 3px #a8261b,0 2px 4px rgba(0,0,0,.6)}
.fm-cell.empty .fm-cell-box{background:radial-gradient(circle at 50% 45%,rgba(120,80,30,.35),rgba(30,15,5,.6) 80%);box-shadow:inset 0 0 0 2px rgba(242,194,69,.45),0 0 0 2px #1a0c04,inset 0 0 12px rgba(0,0,0,.6)}
.fm-cell.empty .plus{position:absolute;left:0;right:0;top:8px;text-align:center;font-family:var(--font-brush);font-size:40px;line-height:1;color:rgba(255,233,163,.85);text-shadow:0 1px 0 #000,0 0 6px rgba(255,220,120,.4)}
.fm-cell.empty .lk,.fm-cell.locked .lk{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:11px;color:#e8d3a3;text-shadow:0 1px 0 #000}
.fm-cell.locked{cursor:default}
.fm-cell.locked .fm-cell-box{display:flex;align-items:flex-start;justify-content:center;padding-top:10px;background:radial-gradient(circle at 50% 40%,#3a2a1a,#150b04 85%);box-shadow:inset 0 0 0 2px rgba(120,90,50,.5),0 0 0 2px #0e0805,inset 0 0 12px rgba(0,0,0,.7)}
.fm-cell.locked .fm-cell-box svg{opacity:.75;filter:drop-shadow(0 1px 1px #000)}
.fm-cell.locked .no{filter:grayscale(1) brightness(.8)}
.fm-strip.arrange .fm-cell:not(.locked) .fm-cell-box{cursor:grab}
.fm-strip.arrange .fm-cell:not(.locked):not(.swap) .fm-cell-box::after{background:linear-gradient(180deg,rgba(216,50,31,.18),rgba(216,50,31,.28))}

/* ---------- 3. 主阵：槽位列 + 大卡 ---------- */
.fm-body{position:relative;z-index:1;flex:1 1 auto;min-height:0;overflow:hidden}
.fm-main{display:flex;align-items:flex-start;justify-content:center;gap:4px;width:448px;padding:10px 0 0}
.fm-col{flex:none;width:74px;height:596px;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;padding:6px 0}

.fm-slot{position:relative;width:74px;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .1s;-webkit-tap-highlight-color:transparent}
.fm-slot:active{transform:scale(.94)}
.fm-slot .box{position:relative;width:62px;height:62px;display:flex;align-items:center;justify-content:center}
.fm-slot .box > svg.ico{width:62px;height:62px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.fm-slot .tier{position:absolute;right:-5px;top:-5px;z-index:3;width:19px;height:19px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:var(--font-brush);font-size:13px;line-height:1;color:#fff3c2;
  background:linear-gradient(180deg,#e0523a,#a8261b 60%,#6e140c);box-shadow:0 0 0 1px #3f0a06,0 1px 2px rgba(0,0,0,.6);text-shadow:0 1px 0 #3f0a06}
.fm-slot .tier.q-乙{background:linear-gradient(180deg,#c9a2ee,#7b3fb5 60%,#48206e)}
.fm-slot .tier.q-丙{background:linear-gradient(180deg,#9cc4f7,#2f6fb5 60%,#173d6b)}
.fm-slot .tier.q-丁{background:linear-gradient(180deg,#a4dba3,#3f8f5a 60%,#215c34)}
.fm-slot .lv{position:absolute;left:-4px;bottom:-3px;z-index:3;min-width:20px;height:16px;padding:0 5px;border-radius:8px;font-family:var(--font-body);font-size:10px;font-weight:700;line-height:16px;text-align:center;color:#ffe9a3;
  background:linear-gradient(180deg,#4a2410,#1a0c04);box-shadow:0 0 0 1px #f2c245;text-shadow:0 1px 0 #000;white-space:nowrap}
.fm-slot .bd{position:absolute;left:-5px;top:-5px;z-index:3;width:18px;height:18px;border-radius:50%;font-family:var(--font-brush);font-size:11px;line-height:18px;text-align:center;color:#5a2b00;
  background:radial-gradient(circle at 35% 30%,#fff6cf,#f2c245 50%,#b8860b);box-shadow:0 0 0 1px #5a3800,0 1px 2px rgba(0,0,0,.5)}
.fm-slot .nm{margin-top:4px;width:78px;font-size:11px;line-height:1.15;text-align:center;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;text-shadow:0 1px 0 rgba(255,245,220,.75)}
.fm-slot .nm.q-甲{color:#8a5a00}.fm-slot .nm.q-乙{color:#5c2d8e}.fm-slot .nm.q-丙{color:#1d4f9e}.fm-slot .nm.q-丁{color:#2a6e2e}
.fm-slot.empty .box{border-radius:8px;background:rgba(43,29,18,.1);box-shadow:inset 0 0 0 2px rgba(90,60,20,.5),inset 0 0 12px rgba(0,0,0,.18)}
.fm-slot.empty .lab{writing-mode:vertical-rl;font-family:var(--font-brush);font-size:15px;letter-spacing:2px;color:rgba(90,60,20,.8)}
.fm-slot.empty .plus{position:absolute;right:4px;bottom:0;font-family:var(--font-brush);font-size:20px;line-height:1;color:rgba(168,38,27,.75)}
.fm-slot.empty .nm{color:var(--ink-faint)}
.fm-slot.locked .box{border-radius:8px;background:radial-gradient(circle at 50% 40%,#3a2a1a,#150b04 85%);box-shadow:inset 0 0 0 2px rgba(120,90,50,.45),0 0 0 1px #0e0805,inset 0 0 12px rgba(0,0,0,.7);flex-direction:column;gap:2px}
.fm-slot.locked .box svg{width:26px;height:26px;opacity:.8}
.fm-slot.locked .lab{font-family:var(--font-brush);font-size:13px;color:#c9a96e;letter-spacing:1px}
.fm-slot.locked .nm{color:var(--ink-faint)}
.fm-slot.func .box{border-radius:8px;background:radial-gradient(circle at 50% 35%,#5a3a1a,#2a1608 75%);box-shadow:0 0 0 2px #f2c245,0 0 0 3px #3a1d0c,inset 0 0 10px rgba(0,0,0,.7),0 2px 3px rgba(0,0,0,.5)}
.fm-slot.func .box svg{width:44px;height:44px;filter:drop-shadow(0 0 6px rgba(255,220,120,.55))}
.fm-slot.func .bd{width:auto;padding:0 5px;border-radius:9px;font-family:var(--font-body);font-size:10px;font-weight:700;left:auto;right:-6px;top:-6px}
.fm-slot.meridian .box{background:radial-gradient(circle at 50% 35%,#1e3a5a,#0b1626 75%);box-shadow:0 0 0 2px #7fb2ea,0 0 0 3px #173d6b,inset 0 0 10px rgba(0,0,0,.7),0 2px 3px rgba(0,0,0,.5)}
.fm-slot.meridian .box svg{filter:drop-shadow(0 0 8px rgba(120,200,255,.8))}
.fm-slot.meridian .nm{color:#1d4f9e}
.fm-slot.talent .box::after{content:'';position:absolute;inset:-3px;border-radius:10px;pointer-events:none;box-shadow:0 0 10px 2px rgba(180,120,255,.55)}

/* 大卡 292×596（对照 t009 / t016） */
.fm-card{position:relative;flex:none;width:292px;height:596px;border-radius:12px;overflow:hidden;color:var(--ink);
  background:var(--tex-paper),linear-gradient(180deg,#f9ebc2 0%,#f2d992 38%,#eac970 100%);
  box-shadow:0 0 0 3px var(--qc,#f2c245),0 0 0 5px #4a2a10,0 0 0 7px var(--qc2,#b8860b),0 0 0 8px #2a1608,0 10px 22px rgba(0,0,0,.6);
  transform-origin:50% 50%}
.fm-card.flip{animation:fmFlip .22s ease-out both}
@keyframes fmFlip{0%{transform:perspective(900px) rotateY(-75deg) scale(.96);opacity:.25}60%{opacity:1}100%{transform:none;opacity:1}}
.fm-card .halo{position:absolute;left:50%;top:210px;width:300px;height:300px;margin-left:-150px;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,252,220,1) 0%,rgba(255,228,130,.75) 28%,rgba(255,210,90,.25) 52%,rgba(255,210,90,0) 70%);animation:fmHalo 4s ease-in-out infinite}
@keyframes fmHalo{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.fm-card .rays{position:absolute;left:50%;top:210px;width:360px;height:360px;margin:-30px 0 0 -180px;z-index:1;pointer-events:none;opacity:.7;
  background:conic-gradient(from 0deg,rgba(255,245,200,0) 0deg,rgba(255,245,200,.7) 10deg,rgba(255,245,200,0) 20deg,rgba(255,245,200,0) 45deg,rgba(255,245,200,.6) 55deg,rgba(255,245,200,0) 65deg,rgba(255,245,200,0) 90deg,rgba(255,245,200,.7) 100deg,rgba(255,245,200,0) 110deg,rgba(255,245,200,0) 135deg,rgba(255,245,200,.6) 145deg,rgba(255,245,200,0) 155deg,rgba(255,245,200,0) 180deg,rgba(255,245,200,.7) 190deg,rgba(255,245,200,0) 200deg,rgba(255,245,200,0) 225deg,rgba(255,245,200,.6) 235deg,rgba(255,245,200,0) 245deg,rgba(255,245,200,0) 270deg,rgba(255,245,200,.7) 280deg,rgba(255,245,200,0) 290deg,rgba(255,245,200,0) 315deg,rgba(255,245,200,.6) 325deg,rgba(255,245,200,0) 335deg);
  -webkit-mask-image:radial-gradient(circle,#000 15%,transparent 62%);mask-image:radial-gradient(circle,#000 15%,transparent 62%);animation:fmSpin 36s linear infinite}
@keyframes fmSpin{to{transform:rotate(360deg)}}
.fm-card .ink{position:absolute;left:0;right:0;top:250px;height:180px;z-index:1;pointer-events:none;opacity:.5;
  background:
    radial-gradient(ellipse 42% 55% at 12% 100%,rgba(70,50,30,.95),transparent 70%),
    radial-gradient(ellipse 28% 40% at 36% 100%,rgba(70,50,30,.55),transparent 70%),
    radial-gradient(ellipse 30% 30% at 58% 96%,rgba(70,50,30,.45),transparent 70%),
    radial-gradient(ellipse 46% 60% at 86% 100%,rgba(70,50,30,.9),transparent 70%),
    radial-gradient(ellipse 60% 12% at 50% 30%,rgba(90,70,40,.25),transparent 70%)}
.fm-card .portrait{position:absolute;left:0;right:0;top:22px;height:412px;z-index:2;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.fm-card .portrait .fm-por{height:408px;width:auto;max-width:280px;object-fit:contain;object-position:50% 100%;display:block;
  -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,#000 84%,transparent 100%);
  filter:drop-shadow(0 6px 10px rgba(60,40,10,.45))}
.fm-card .portrait .fm-por.missing{display:none}
.fm-card .frame{position:absolute;inset:5px;border-radius:8px;pointer-events:none;z-index:6;
  border:2px solid rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--qc2,#b8860b),inset 0 0 0 2px rgba(255,255,255,.35),inset 0 0 26px rgba(120,80,10,.18);
  background:var(--tex-cloud) left 10px top -2px / 100px 34px no-repeat,var(--tex-cloud) right 10px bottom -2px / 100px 34px no-repeat}
.fm-card .corner{position:absolute;width:26px;height:26px;z-index:8;pointer-events:none;background:var(--corner-tl) center / 26px 26px no-repeat;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.fm-card .corner.tl{left:2px;top:2px}
.fm-card .corner.tr{right:2px;top:2px;background-image:var(--corner-tr)}
.fm-card .corner.bl{left:2px;bottom:2px;background-image:var(--corner-bl)}
.fm-card .corner.br{right:2px;bottom:2px;background-image:var(--corner-br)}
.fm-card .stars{position:absolute;left:0;right:0;top:9px;display:flex;justify-content:center;gap:1px;z-index:7;pointer-events:none}
.fm-card .stars svg{width:21px;height:21px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.55))}
.fm-card .help{position:absolute;left:12px;top:11px;z-index:9;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-brush);font-size:19px;color:#7a1e12;cursor:pointer;
  background:radial-gradient(circle at 40% 32%,#fff6cf,#f2c245 50%,#c98a12);box-shadow:0 0 0 1.5px #5a3800,inset 0 -2px 3px rgba(120,70,0,.5),0 1px 2px rgba(0,0,0,.5);text-shadow:0 1px 0 rgba(255,245,210,.8)}
.fm-card .help:active{transform:scale(.92)}
.fm-card .title{position:absolute;right:16px;top:0;z-index:8;padding:12px 4px 16px;pointer-events:none;
  background:linear-gradient(90deg,#8f1d13,#c8331f 45%,#a8261b 60%,#6e140c);box-shadow:inset 0 0 0 1px rgba(255,214,120,.6),inset 2px 0 0 rgba(255,200,150,.25),0 2px 5px rgba(0,0,0,.55);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),50% 100%,0 calc(100% - 9px))}
.fm-card .title span{display:block;writing-mode:vertical-rl;font-family:var(--font-brush);font-size:21px;line-height:1;letter-spacing:4px;color:#ffe9a3;text-shadow:0 1px 0 #3f0a06,0 0 4px rgba(0,0,0,.4)}
.fm-card .name{position:absolute;left:16px;top:44px;z-index:7;writing-mode:vertical-rl;font-family:var(--font-brush);font-size:48px;line-height:1;letter-spacing:4px;color:#1a0f08;pointer-events:none;
  text-shadow:-1.5px -1.5px 0 rgba(255,250,235,.92),1.5px -1.5px 0 rgba(255,250,235,.92),-1.5px 1.5px 0 rgba(255,250,235,.92),1.5px 1.5px 0 rgba(255,250,235,.92),0 3px 5px rgba(0,0,0,.45)}
.fm-card .qseal{position:absolute;left:18px;top:296px;z-index:8;display:flex;flex-direction:column;align-items:center;gap:6px}
.fm-card .qseal .seal.lg{width:40px;height:40px;font-size:27px}
.fm-card .qseal .awk{font-family:var(--font-brush);font-size:12px;color:#fff;padding:1px 5px;border-radius:3px;background:linear-gradient(180deg,#b04cff,#4c1a8f);box-shadow:0 0 0 1px #2a0a4a;letter-spacing:1px}
.fm-card .icons{position:absolute;right:14px;top:290px;z-index:8;display:flex;flex-direction:column;gap:7px;align-items:center}
.fm-card .icons .ci{position:relative;width:36px;height:36px;border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s;
  background:radial-gradient(circle at 40% 32%,#fff6cf,#f2c245 55%,#b8860b);box-shadow:0 0 0 1.5px #5a3800,inset 0 -2px 3px rgba(120,70,0,.5),0 1px 3px rgba(0,0,0,.5)}
.fm-card .icons .ci svg{width:27px;height:27px}
.fm-card .icons .ci:active{transform:scale(.92)}
.fm-card .icons .ci.dim{filter:grayscale(1) brightness(.78)}
.fm-card .icons .ci .dot{position:absolute;right:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a6a,#d8321f 60%,#7a150a);box-shadow:0 0 0 1px #fff}
.fm-card .info{position:absolute;left:0;right:0;bottom:0;height:172px;z-index:7;padding:8px 12px 6px 12px;
  background:linear-gradient(180deg,rgba(243,230,196,0) 0%,rgba(243,230,196,.88) 10%,rgba(246,234,204,.96) 100%)}
.fm-card .lvrow{display:flex;align-items:center;gap:8px;height:24px}
.fm-card .lvrow .lv{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px 4px 11px 4px;background:var(--bg-red);color:#fff;font-family:var(--font-body);font-weight:700;font-size:15px;cursor:pointer;
  box-shadow:0 0 0 1px #3f0a06,inset 0 1px 0 rgba(255,200,150,.45),0 1px 2px rgba(0,0,0,.4);text-shadow:0 1px 0 #6e140c}
.fm-card .lvrow .lv small{font-size:11px;margin-left:5px;color:#ffe08a;font-weight:700}
.fm-card .lvrow .bar{flex:1 1 auto;height:14px}
.fm-card .lvrow .bar .txt{font-size:10px}
.fm-card .stats{display:flex;justify-content:space-between;align-items:center;margin-top:7px;padding:0 2px;font-family:var(--font-body);font-size:12.5px;font-weight:700;color:var(--ink)}
.fm-card .stats .st{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.fm-card .stats .st .stat-seal{width:18px;height:18px;font-size:12px}
.fm-card .fates{position:relative;display:flex;align-items:flex-start;gap:6px;margin-top:8px;min-height:74px}
.fm-card .fates .role{flex:none;width:34px;height:34px;margin-top:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-brush);font-size:21px;color:#f3e6c4;transform:rotate(-6deg);
  background:radial-gradient(circle at 40% 35%,#4a3a2a,#2b1d12 60%,#0e0805);box-shadow:0 0 0 1.5px #d9bf8a,0 0 0 3px #2b1d12,0 2px 3px rgba(0,0,0,.5);text-shadow:0 1px 0 #000}
.fm-card .fates .role.atk{background:radial-gradient(circle at 40% 35%,#e8523a,#c22f1f 45%,#8f1d13);box-shadow:0 0 0 1.5px #fff0c8,0 0 0 3px #a8261b,0 2px 3px rgba(0,0,0,.5)}
.fm-card .fates .role.def{background:radial-gradient(circle at 40% 35%,#6aa5e8,#2f6fb5 60%,#173d6b);box-shadow:0 0 0 1.5px #d8ecff,0 0 0 3px #2f6fb5,0 2px 3px rgba(0,0,0,.5)}
.fm-card .fates .role.hp{background:radial-gradient(circle at 40% 35%,#7ed08f,#3f8f5a 60%,#215c34);box-shadow:0 0 0 1.5px #e0ffe6,0 0 0 3px #2f7a48,0 2px 3px rgba(0,0,0,.5)}
.fm-card .fates .role.mp{background:radial-gradient(circle at 40% 35%,#b58ae0,#7b3fb5 60%,#48206e);box-shadow:0 0 0 1.5px #efe0ff,0 0 0 3px #6b32a8,0 2px 3px rgba(0,0,0,.5)}
.fm-card .fates .list{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:1px 6px;font-size:11.5px;line-height:1.45;cursor:pointer;padding-top:2px}
.fm-card .fates .f{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#8c7355}
.fm-card .fates .f::before{content:'◆';font-size:9px;margin-right:2px;vertical-align:1px}
.fm-card .fates .f.on{color:#a8620a;font-weight:700;text-shadow:0 1px 0 rgba(255,245,210,.7)}
.fm-card .fates .f.none{grid-column:1 / -1;color:var(--ink-faint)}
.fm-card .fates .f.none::before{content:'—'}
.fm-card .fates .skin.btn{flex:none;min-width:0;width:46px;height:46px;margin-top:2px;padding:3px;font-size:15px;line-height:1.1;letter-spacing:0;text-indent:0;white-space:normal;border-radius:6px}
.fm-card .fates .skin.btn::before,.fm-card .fates .skin.btn::after{display:none}
/* 品质变体 */
.fm-card-乙{background:var(--tex-paper),linear-gradient(180deg,#f5ecd4 0%,#e9dcc0 40%,#ddcaa0 100%)}
.fm-card-乙 .halo{background:radial-gradient(circle,rgba(248,240,255,1) 0%,rgba(205,165,250,.7) 28%,rgba(160,100,230,.25) 52%,rgba(160,100,230,0) 70%)}
.fm-card-丙{background:var(--tex-paper),linear-gradient(180deg,#f5ecd4 0%,#e9dcc0 40%,#ddcaa0 100%)}
.fm-card-丙 .halo{background:radial-gradient(circle,rgba(240,248,255,1) 0%,rgba(150,200,255,.7) 28%,rgba(70,140,240,.25) 52%,rgba(70,140,240,0) 70%)}
.fm-card-丁{background:var(--tex-paper),linear-gradient(180deg,#f5ecd4 0%,#e9dcc0 40%,#ddcaa0 100%)}
.fm-card-丁 .halo{background:radial-gradient(circle,rgba(242,255,240,1) 0%,rgba(160,230,170,.7) 28%,rgba(60,175,80,.25) 52%,rgba(60,175,80,0) 70%)}
/* 空卡 */
.fm-card.empty .halo{opacity:.5}
.fm-card.empty .tip{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.fm-card.empty .tip .big{font-family:var(--font-brush);font-size:44px;letter-spacing:8px;color:var(--ink);opacity:.8;text-shadow:0 2px 0 rgba(255,250,235,.8)}

/* ---------- 4. 布阵条 ---------- */
.fm-arrange-bar{position:absolute;left:8px;right:8px;bottom:8px;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:8px;height:40px;padding:0 6px 0 12px;border-radius:7px;
  background:var(--tex-wood),linear-gradient(180deg,#8f1d13,#5a0d06);color:#ffe9a3;font-family:var(--font-brush);font-size:16px;letter-spacing:1px;text-shadow:0 1px 0 #000;
  box-shadow:0 0 0 1px #3f0a06,inset 0 1px 0 rgba(255,214,120,.5),0 4px 10px rgba(0,0,0,.55);animation:fmDrop .2s ease-out both}
@keyframes fmDrop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* ---------- 5. 底栏：主阵 / 七星阵 切换 + 总战力 + 己势 ---------- */
.fm-foot{position:relative;z-index:2;flex:none;height:44px;display:flex;align-items:center;gap:6px;padding:0 8px;
  background:var(--tex-wood),linear-gradient(180deg,#4a2a12 0%,#33190a 60%,#2a1608 100%);box-shadow:inset 0 1px 0 rgba(255,220,150,.25),inset 0 -2px 0 #1a0c04,0 -3px 6px rgba(0,0,0,.35)}
.fm-foot::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#7a4f00,var(--gold) 20%,#fff0b3 50%,var(--gold) 80%,#7a4f00)}
.fm-tabs{display:inline-flex;flex:none;border-radius:15px;overflow:hidden;box-shadow:0 0 0 1px #5a3800,0 1px 2px rgba(0,0,0,.5)}
.fm-tabs .t{padding:0 11px;height:28px;line-height:28px;font-family:var(--font-brush);font-size:17px;letter-spacing:1px;color:#7a1e12;background:var(--bg-gold);cursor:pointer;text-shadow:0 1px 0 rgba(255,245,210,.7)}
.fm-tabs .t.active{background:var(--bg-red);color:#ffe08a;text-shadow:0 1px 0 #3f0a06;box-shadow:inset 0 0 0 1px rgba(255,214,120,.45)}
.fm-power{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;height:30px;border-radius:15px;cursor:pointer;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55));box-shadow:inset 0 1px 3px rgba(0,0,0,.7),0 0 0 1px rgba(242,194,69,.5)}
.fm-power .k{font-family:var(--font-brush);font-size:17px;color:#ffe9a3;text-shadow:0 1px 0 #000;letter-spacing:1px}
.fm-power .v{font-family:var(--font-body);font-size:15px;font-weight:700;color:#fff3c2;text-shadow:0 1px 0 #000,0 0 6px rgba(255,210,80,.5);font-variant-numeric:tabular-nums}
.fm-power.qi .v{color:#ffb0a0}

/* ---------- 6. 七星阵 ---------- */
.fm-support{position:relative;height:636px;display:flex;flex-direction:column}
.fm-dipper{position:relative;flex:none;overflow:hidden;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.08) 0,transparent 2px),radial-gradient(circle at 72% 12%,rgba(255,255,255,.1) 0,transparent 2px),
    radial-gradient(circle at 40% 80%,rgba(255,255,255,.08) 0,transparent 2px),radial-gradient(circle at 92% 58%,rgba(255,255,255,.08) 0,transparent 2px),
    radial-gradient(circle at 8% 70%,rgba(255,255,255,.07) 0,transparent 1.5px),radial-gradient(circle at 56% 44%,rgba(255,255,255,.06) 0,transparent 1.5px),
    radial-gradient(ellipse 80% 70% at 50% 40%,rgba(60,50,110,.55),transparent 75%),
    var(--tex-noise),linear-gradient(180deg,#0b0d1f 0%,#141a3a 55%,#1b1230 100%);
  box-shadow:inset 0 0 0 3px #5a3800,inset 0 0 0 5px #f2c245,inset 0 0 0 6px #2a1608,inset 0 0 60px rgba(0,0,0,.7),0 4px 10px rgba(0,0,0,.5)}
.fm-dipper .fm-sky{position:absolute;left:0;top:0;pointer-events:none}
.fm-dipper .fm-sky .line-glow{fill:none;stroke:#ffe08a;stroke-width:6;stroke-opacity:.35;stroke-linecap:round;stroke-linejoin:round}
.fm-dipper .fm-sky .line{fill:none;stroke:#fff3c2;stroke-width:1.6;stroke-dasharray:6 8;stroke-linecap:round;stroke-linejoin:round;animation:fmDash 3s linear infinite}
@keyframes fmDash{to{stroke-dashoffset:-56}}
.fm-dipper .fm-sky .dotc{fill:#fff8e0;filter:url(#fmGlow)}
.fm-dipper-title{position:absolute;left:14px;bottom:10px;z-index:3;pointer-events:none}
.fm-dipper-title span{display:block;font-family:var(--font-brush);font-size:30px;letter-spacing:6px;color:#ffe08a;text-shadow:0 0 10px rgba(255,220,120,.7),0 2px 0 #3a1d0c}
.fm-dipper-title small{display:block;font-size:11px;color:#c9bfa0;letter-spacing:.5px;text-shadow:0 1px 0 #000}
.fm-token{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px 0 6px;border-radius:13px;font-size:12px;font-weight:700;color:#ffe9a3;cursor:pointer;
  background:linear-gradient(180deg,#4a2410,#1a0c04);box-shadow:0 0 0 1px #f2c245;text-shadow:0 1px 0 #000}
.fm-star{position:absolute;z-index:4;width:84px;transform:translate(-50%,-50%);text-align:center;cursor:pointer;transition:transform .12s}
.fm-star:active{transform:translate(-50%,-50%) scale(.94)}
.fm-star .orb{position:relative;width:62px;height:62px;margin:0 auto;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#3a3060,#141230 80%);
  box-shadow:0 0 0 2px #f2c245,0 0 0 4px #2a1608,0 0 16px 3px rgba(255,220,120,.45),inset 0 0 12px rgba(0,0,0,.6);animation:fmTwinkle 3s ease-in-out infinite}
@keyframes fmTwinkle{0%,100%{box-shadow:0 0 0 2px #f2c245,0 0 0 4px #2a1608,0 0 14px 3px rgba(255,220,120,.4),inset 0 0 12px rgba(0,0,0,.6)}50%{box-shadow:0 0 0 2px #fff0b3,0 0 0 4px #2a1608,0 0 24px 6px rgba(255,230,140,.8),inset 0 0 12px rgba(0,0,0,.6)}}
.fm-star .orb .fm-av{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.fm-star .orb .fm-av.missing{display:none}
.fm-star .orb .glyph{font-size:30px;color:#fff3c2;text-shadow:0 0 12px #ffe08a,0 0 4px #fff}
.fm-star .orb .lv{position:absolute;left:0;right:0;bottom:0;height:15px;line-height:15px;font-family:var(--font-body);font-size:10px;font-weight:700;color:#ffe9a3;background:rgba(20,10,4,.7);text-shadow:0 1px 0 #000}
.fm-star .orb .lk{position:absolute;left:0;right:0;bottom:4px;font-size:10px;color:#c9bfa0;text-shadow:0 1px 0 #000}
.fm-star .lab{margin-top:4px;line-height:1.2}
.fm-star .lab b{display:block;font-family:var(--font-brush);font-size:17px;letter-spacing:2px;color:#ffe08a;text-shadow:0 0 8px rgba(255,220,120,.6),0 1px 0 #000;font-weight:400}
.fm-star .lab span{display:block;font-size:11px;color:#e8d3a3;text-shadow:0 1px 0 #000;white-space:nowrap}
.fm-star.filled .orb{background:var(--qbg)}
.fm-star.locked .orb{background:radial-gradient(circle at 50% 40%,#2a2a3a,#0a0a14 80%);box-shadow:0 0 0 2px #6b5a3a,0 0 0 4px #1a0c04,inset 0 0 12px rgba(0,0,0,.8);animation:none;flex-direction:column;gap:0}
.fm-star.locked .orb svg{opacity:.7}
.fm-star.locked .lab b{color:#a89a7a;text-shadow:0 1px 0 #000}
.fm-star.selected .orb{box-shadow:0 0 0 2px #fff,0 0 0 4px #d8321f,0 0 20px 6px rgba(216,50,31,.8)}
.fm-sup-panel{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px 10px 10px;-webkit-overflow-scrolling:touch}
.fm-sup-panel .hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:6px 0 4px;padding:0 4px;font-family:var(--font-brush);font-size:20px;letter-spacing:2px;color:var(--ink)}
.fm-sup-panel .hd .tot{font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:0;color:#a8620a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-sup-panel .bd{padding:4px 8px;border-radius:5px;background:var(--bg-paper-light);box-shadow:inset 0 0 0 1px #b8945a,inset 0 0 10px rgba(120,80,30,.2)}
.fm-sup-panel .bd .r{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dashed rgba(90,60,20,.3);font-size:12.5px;color:var(--ink-soft)}
.fm-sup-panel .bd .r:last-child{border-bottom:0}
.fm-sup-panel .bd .r .k{flex:none;font-weight:700;color:var(--ink)}
.fm-sup-panel .bd .r .v{text-align:right;min-width:0}
.fm-sup-panel .bd .r.on .k,.fm-sup-panel .bd .r.on .v{color:#a8620a;font-weight:700}
.fm-sup-panel .bd .none{padding:8px 0;text-align:center;color:var(--ink-faint);font-size:13px}

/* ---------- 7. 弹窗 ---------- */
.fm-modal .modal-body{padding:10px}
.fm-modal .modal-body.no-pad{padding:0}
.fm-modal .btn.btn-sm{min-width:64px}
.fm-pick-cur{display:flex;align-items:center;gap:10px;margin:8px 8px 4px;padding:8px 10px;border-radius:6px;background:var(--tex-paper),linear-gradient(180deg,#e2cb95,#d4b77e);box-shadow:inset 0 1px 0 #fff3cf,inset 0 0 0 1px #b8945a}
.fm-pick-cur.empty{display:block}
.fm-pick-cur .t{font-family:var(--font-brush);font-size:20px;color:var(--ink);letter-spacing:1px}
.fm-pick-cur .t small{font-family:var(--font-body);font-size:12px;letter-spacing:0;color:var(--ink-soft);margin-left:4px}
.fm-pick-cur .t.q-甲{color:#8a5a00}.fm-pick-cur .t.q-乙{color:#5c2d8e}.fm-pick-cur .t.q-丙{color:#1d4f9e}.fm-pick-cur .t.q-丁{color:#2a6e2e}
.fm-pick-cur .s{font-size:12px;color:var(--ink-soft);line-height:1.4;margin-top:2px}
.fm-pick-cur .slot{width:60px}
.fm-pick-list{padding:2px 2px 8px}
.fm-pick-list .list-row .avatar .nm{display:none}
.fm-pick-row{position:relative;display:flex;align-items:center;gap:10px;min-height:70px;margin:6px 6px 0;padding:7px 10px 7px 10px;border-radius:7px;color:#f3e6c4;cursor:pointer;
  background:var(--tex-wood),linear-gradient(180deg,#8a4f22 0%,#6b3a16 25%,#5a2d10 70%,#4a2410 100%);
  border:1px solid #2a1608;box-shadow:inset 0 1px 0 rgba(255,220,150,.28),inset 0 -3px 4px rgba(0,0,0,.35),0 2px 3px rgba(0,0,0,.5)}
.fm-pick-row:active{filter:brightness(.93)}
.fm-pick-row.empty{background:var(--tex-paper),linear-gradient(180deg,#e2cb95,#d4b77e);color:var(--ink);border-color:#b8945a}
.fm-pick-row .slot{width:60px;flex:none}
.fm-pick-row .t{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;font-size:15px;font-weight:700;color:#ffe9a3;text-shadow:0 1px 0 #000;line-height:1.3}
.fm-pick-row .t b.q-甲{color:#ffd75a}.fm-pick-row .t b.q-乙{color:#d9b8ff}.fm-pick-row .t b.q-丙{color:#a8cfff}.fm-pick-row .t b.q-丁{color:#b8f0b8}
.fm-pick-row .t small{font-size:11px;font-weight:400;color:#e8d3a3}
.fm-pick-row .tag{font-size:10px;font-weight:400;padding:0 5px;border-radius:3px;background:rgba(242,194,69,.25);color:#ffe9a3;box-shadow:0 0 0 1px rgba(242,194,69,.6)}
.fm-pick-row .tag.red{background:rgba(216,50,31,.5);box-shadow:0 0 0 1px #ffb0a0}
.fm-pick-row .s{font-size:12px;color:#e8d3a3;text-shadow:0 1px 0 rgba(0,0,0,.6);margin-top:2px;line-height:1.35}
.fm-pick-row.empty .t{color:var(--ink);text-shadow:none}
.fm-pick-row.empty .s{color:var(--ink-soft);text-shadow:none}
.fm-pick-row .s .up{color:#9dffb0;font-weight:700}
.fm-pick-row .s .down{color:#ff9d8a;font-weight:700}
.fm-pick-row .own{display:block;font-size:11px;color:#ffc9b8;margin-top:1px;text-shadow:0 1px 0 #000}
.fm-pick-row .col{display:flex;flex-direction:column;gap:4px;flex:none}
.fm-pick-row > .btn{flex:none}
.fm-pick-list .list-row .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-info .top{display:flex;align-items:center;gap:12px;padding:4px 0 8px;border-bottom:2px solid rgba(90,60,20,.25);margin-bottom:6px}
.fm-info .top .slot{width:60px}
.fm-info .top .avatar .nm{display:none}
.fm-info .t{display:flex;align-items:center;gap:6px;font-family:var(--font-brush);font-size:22px;color:var(--ink);letter-spacing:1px}
.fm-info .t.q-甲{color:#8a5a00}.fm-info .t.q-乙{color:#5c2d8e}.fm-info .t.q-丙{color:#1d4f9e}.fm-info .t.q-丁{color:#2a6e2e}
.fm-info .s{font-size:12px;color:var(--ink-soft);line-height:1.5}
.fm-info .s.up{color:var(--jade);font-weight:700}
.fm-info .s b.red,.fm-info .red{color:var(--red-bright)}
.fm-info .desc{margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.fm-info .cost{margin-top:8px;padding:6px 8px;border-radius:4px;background:rgba(43,29,18,.08);font-size:12px;line-height:1.6;color:var(--ink)}
.fm-set{margin-top:8px;padding:8px 10px;border:6px solid transparent;border-radius:8px;color:#e6ffd0;
  background:linear-gradient(rgba(20,30,15,.88),rgba(20,30,15,.88)) padding-box,repeating-linear-gradient(180deg,#8fbf5a 0 22px,#4f7d2c 22px 26px) border-box;box-shadow:inset 0 0 12px rgba(0,0,0,.7)}
.fm-set .hd{font-family:var(--font-brush);font-size:17px;color:#ffe08a;letter-spacing:1px;margin-bottom:4px}
.fm-set .pcs{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:#9fb08a;margin-bottom:6px}
.fm-set .pcs.col{flex-direction:column;gap:2px}
.fm-set .pcs span.on{color:#7ed08f;font-weight:700}
.fm-set .ef{position:relative;font-size:12px;color:#9fb08a;padding:3px 0;line-height:1.4}
.fm-set .ef.on{color:#7ed08f}
.fm-set .ef i{position:absolute;right:0;top:2px;font-style:normal;font-size:11px;padding:0 6px;border-radius:3px;background:linear-gradient(180deg,#e0523a,#a8261b);color:#ffe9a3;transform:rotate(6deg);box-shadow:0 0 0 1px #3f0a06}
.fm-refine .hd{margin:2px 6px 8px;font-family:var(--font-brush);font-size:19px;color:var(--ink);letter-spacing:1px}
.fm-refine .hd b{color:var(--red);font-size:24px;margin:0 4px}
.fm-refine .hd small{display:block;font-family:var(--font-body);font-size:11px;letter-spacing:0;color:var(--ink-soft);line-height:1.4}
.fm-fates .fm-fate{padding:8px 6px;border-bottom:1px dashed rgba(90,60,20,.35);color:var(--ink-faint)}
.fm-fates .fm-fate:last-child{border-bottom:0}
.fm-fates .fm-fate .t{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px}
.fm-fates .fm-fate .t b{font-family:var(--font-brush);font-size:19px;letter-spacing:1px;color:#8c7355}
.fm-fates .fm-fate.on .t b{color:#a8620a}
.fm-fates .fm-fate .t .k{font-size:10px;padding:0 5px;border-radius:3px;background:rgba(90,60,20,.15);color:var(--ink-soft)}
.fm-fates .fm-fate .t .k.awk{background:linear-gradient(180deg,#b04cff,#4c1a8f);color:#fff}
.fm-fates .fm-fate .t .b{margin-left:auto;font-weight:700;color:#9a8a70}
.fm-fates .fm-fate.on .t .b{color:var(--red-bright)}
.fm-fates .fm-fate .d{font-size:12px;line-height:1.45;margin-top:2px}
.fm-fates .fm-fate.on .d{color:var(--ink-soft)}
.fm-fates .fm-fate .n{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:3px;font-size:12px}
.fm-fates .fm-fate .n span.ok{color:var(--jade);font-weight:700}
.fm-skin{text-align:center}
.fm-skin .stage{position:relative;height:420px;margin:0 auto;border-radius:10px;overflow:hidden;background:var(--tex-paper),linear-gradient(180deg,#f9ebc2 0%,#f2d992 45%,#eac970 100%);
  box-shadow:0 0 0 3px var(--qc,#f2c245),0 0 0 5px #4a2a10,inset 0 0 30px rgba(120,80,10,.25)}
.fm-skin .stage .halo{position:absolute;left:50%;top:50%;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,252,220,1) 0%,rgba(255,228,130,.75) 28%,rgba(255,210,90,0) 68%);animation:fmHalo 4s ease-in-out infinite}
.fm-skin .stage .fm-por{position:relative;height:400px;width:auto;max-width:100%;margin:10px auto 0;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(60,40,10,.45))}
.fm-skin .stage .fm-por.missing{display:none}
.fm-skin .stage .nm{position:absolute;left:14px;top:16px;writing-mode:vertical-rl;font-family:var(--font-brush);font-size:40px;letter-spacing:4px;color:#1a0f08;text-shadow:-1.5px -1.5px 0 rgba(255,250,235,.92),1.5px -1.5px 0 rgba(255,250,235,.92),-1.5px 1.5px 0 rgba(255,250,235,.92),1.5px 1.5px 0 rgba(255,250,235,.92),0 3px 5px rgba(0,0,0,.45)}
.fm-skin .opts{display:flex;gap:10px;justify-content:center;margin-top:12px}
.fm-skin .opt{flex:1 1 0;padding:6px 8px;border-radius:6px;background:var(--tex-paper),linear-gradient(180deg,#e2cb95,#d4b77e);box-shadow:inset 0 1px 0 #fff3cf,inset 0 0 0 1px #b8945a}
.fm-skin .opt b{display:block;font-family:var(--font-brush);font-size:18px;color:var(--ink);font-weight:400;letter-spacing:1px}
.fm-skin .opt span{font-size:11px;color:var(--ink-soft)}
.fm-skin .opt.on{box-shadow:inset 0 1px 0 #fff3cf,0 0 0 2px #f2c245,0 0 8px rgba(255,210,80,.6)}
.fm-skin .opt.off{filter:grayscale(.6);opacity:.75}
.fm-skin .desc{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--ink-soft);text-align:left}
.fm-overview{padding:6px 6px 8px}
.fm-ov-row{display:flex;align-items:center;gap:8px;margin:6px 0 0;padding:6px 8px;border-radius:7px;color:#f3e6c4;
  background:var(--tex-wood),linear-gradient(180deg,#8a4f22 0%,#6b3a16 25%,#5a2d10 70%,#4a2410 100%);border:1px solid #2a1608;box-shadow:inset 0 1px 0 rgba(255,220,150,.28),0 2px 3px rgba(0,0,0,.5)}
.fm-ov-row .who{position:relative;flex:none;width:58px;display:flex;flex-direction:column;align-items:center}
.fm-ov-row .who .avatar .nm{display:none}
.fm-ov-row .who .no{position:absolute;left:0;top:-4px;width:16px;height:16px;border-radius:50%;font-family:var(--font-body);font-size:10px;font-weight:700;line-height:16px;text-align:center;color:#5a2b00;background:radial-gradient(circle at 35% 30%,#fff6cf,#f2c245 50%,#b8860b);box-shadow:0 0 0 1px #5a3800;z-index:4}
.fm-ov-row .who .nm{margin-top:3px;font-family:var(--font-brush);font-size:14px;color:#ffe9a3;text-shadow:0 1px 0 #000;white-space:nowrap}
.fm-ov-row .sks{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.fm-ov-row .sk{display:flex;align-items:center;gap:6px;min-height:28px;padding:1px 4px;border-radius:4px;cursor:pointer}
.fm-ov-row .sk:hover{background:rgba(255,255,255,.06)}
.fm-ov-row .sk .ic{flex:none;width:34px;height:34px}
.fm-ov-row .sk .ic svg{width:34px;height:34px}
.fm-ov-row .sk b{display:block;font-size:13px;color:#ffe9a3;text-shadow:0 1px 0 #000;line-height:1.2}
.fm-ov-row .sk b.q-甲{color:#ffd75a}.fm-ov-row .sk b.q-乙{color:#d9b8ff}.fm-ov-row .sk b.q-丙{color:#a8cfff}.fm-ov-row .sk b.q-丁{color:#b8f0b8}
.fm-ov-row .sk span{display:block;font-size:10.5px;color:#e8d3a3;text-shadow:0 1px 0 rgba(0,0,0,.6);line-height:1.2}
.fm-ov-row .sk.talent b{color:#e5cffb}
.fm-ov-row .sk.none{font-size:12px;color:#c9a96e;padding-left:8px}
.fm-ov-row .sk.none i{font-style:normal;color:#ffe08a;margin-left:4px}
.fm-help p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--ink)}
.fm-help p b{color:var(--red)}

/* =====================================================================
 * 极致打磨（美术总监补丁 · 2026-09-08）— 对照 docs/ref/t009.png / t016.png
 * 只覆盖本页 .fm-* 类；删除本段即回到原样。
 * 段落：a 外框多层浮雕 b 卡面底（金晕/水墨云/门派纹） c 立绘呼吸+投影
 *       d 甲级流动金边 / 觉醒紫金粒子 e 星级闪光 f 名字·称号·印章 g 缘分金光点 h 槽位
 * ===================================================================== */

/* ---------- a. 外框：按品质多层浮雕（渐变 + 内阴影 + 高光线 + 四角包角） ---------- */
.fm-card{--qcL:#fffaf0;--qcM:#f0bd3a;--qcD:#8a5f10;--qcK:#3a1d0c;
  box-shadow:
    0 0 0 2.5px var(--qcM),
    0 0 0 4.5px var(--qcD),
    0 0 0 6px #1e0e04,
    0 10px 22px rgba(0,0,0,.62),
    0 0 26px rgba(255,200,90,.22)}
.fm-card-乙{--qcL:#fbf0ff;--qcM:#b073e8;--qcD:#4a2270;--qcK:#251036}
.fm-card-丙{--qcL:#eef6ff;--qcM:#5d9dfa;--qcD:#17427f;--qcK:#0d2445}
.fm-card-丁{--qcL:#f1fff0;--qcM:#6cc770;--qcD:#22622a;--qcK:#122f14}
.fm-card-乙{box-shadow:0 0 0 2.5px var(--qcM),0 0 0 4.5px var(--qcD),0 0 0 6px #150920,0 10px 22px rgba(0,0,0,.62),0 0 24px rgba(170,100,240,.25)}
.fm-card-丙{box-shadow:0 0 0 2.5px var(--qcM),0 0 0 4.5px var(--qcD),0 0 0 6px #07172b,0 10px 22px rgba(0,0,0,.62),0 0 24px rgba(80,150,255,.25)}
.fm-card-丁{box-shadow:0 0 0 2.5px var(--qcM),0 0 0 4.5px var(--qcD),0 0 0 6px #0a1c0c,0 10px 22px rgba(0,0,0,.62),0 0 24px rgba(90,200,110,.22)}
/* 内框：七层套色环（高光 → 亮金 → 暗金 → 高光线 → 亮金 → 暗金 → 墨线）+ 内阴影，模拟 12px 浮雕金框 */
.fm-card .frame{inset:0;border-radius:12px;border:0;background:none;
  box-shadow:
    inset 0 0 0 1.2px rgba(255,252,235,.9),
    inset 0 0 0 5px var(--qcM),
    inset 0 0 0 7px var(--qcD),
    inset 0 0 0 8px rgba(255,250,225,.95),
    inset 0 0 0 11px var(--qcM),
    inset 0 0 0 12.5px var(--qcD),
    inset 0 0 0 13.5px rgba(38,20,4,.92),
    inset 0 0 30px rgba(110,72,10,.2),
    inset 0 16px 28px rgba(255,252,235,.18)}
/* 框上受光/落影 + 雕花云纹（只在 12px 带宽内可见） */
.fm-card .frame::after{content:'';position:absolute;inset:0;border-radius:12px;pointer-events:none;
  background:
    var(--tex-cloud) left 30px top 1px / 92px 12px repeat-x,
    var(--tex-cloud) left 30px bottom 1px / 92px 12px repeat-x,
    linear-gradient(180deg,rgba(255,255,255,.45) 0,rgba(255,255,255,.14) 5px,rgba(255,255,255,0) 13.5px,
      rgba(0,0,0,0) calc(100% - 13.5px),rgba(0,0,0,.08) calc(100% - 5px),rgba(0,0,0,.18) 100%);
  opacity:.85}
/* 内层宣纸面的压边线 */
.fm-card .frame::before{content:'';position:absolute;inset:13.5px;border-radius:4px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,250,225,.4),inset 0 0 0 1px rgba(58,32,4,.35),inset 0 4px 12px rgba(90,58,10,.14)}
/* 框顶正中红宝石 */
.fm-card .gem{position:absolute;left:50%;top:-1px;width:19px;height:19px;margin-left:-9.5px;z-index:10;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#ffb49a,#e8523a 38%,#c22f1f 62%,#6e140c 100%);
  box-shadow:0 0 0 2px #f2c245,0 0 0 3.5px #7a4f00,0 2px 4px rgba(0,0,0,.55),inset 0 -3px 4px rgba(0,0,0,.35)}
.fm-card .gem::after{content:'';position:absolute;left:4px;top:3px;width:6px;height:4px;border-radius:50%;background:rgba(255,255,255,.75)}
.fm-card-乙 .gem,.fm-card-丙 .gem,.fm-card-丁 .gem{box-shadow:0 0 0 2px var(--qcM),0 0 0 3.5px var(--qcD),0 2px 4px rgba(0,0,0,.55),inset 0 -3px 4px rgba(0,0,0,.35)}
.fm-card .corner{width:30px;height:30px;background-size:30px 30px;left:8px;top:8px}
.fm-card .corner.tr{left:auto;right:8px;top:8px}
.fm-card .corner.bl{left:8px;top:auto;bottom:8px}
.fm-card .corner.br{left:auto;right:8px;top:auto;bottom:8px}

/* ---------- b. 卡面底：金色光晕 + 水墨云 + 若隐若现门派纹样 ---------- */
.fm-card{background:
  radial-gradient(ellipse 58% 26% at 50% 24%,rgba(255,250,214,.7),rgba(255,240,180,0) 74%),
  var(--tex-paper),linear-gradient(180deg,#fbeeb8 0%,#f6dd94 30%,#efcd75 60%,#e5bd5d 100%)}
.fm-card-乙{background:radial-gradient(ellipse 58% 26% at 50% 24%,rgba(250,238,255,.72),rgba(255,240,180,0) 74%),var(--tex-paper),linear-gradient(180deg,#faecbe 0%,#f3dc9c 30%,#ead085 60%,#dfc06e 100%)}
.fm-card-丙{background:radial-gradient(ellipse 58% 26% at 50% 24%,rgba(238,247,255,.72),rgba(255,240,180,0) 74%),var(--tex-paper),linear-gradient(180deg,#faecbe 0%,#f3dc9c 30%,#ead085 60%,#dfc06e 100%)}
.fm-card-丁{background:radial-gradient(ellipse 58% 26% at 50% 24%,rgba(240,255,238,.72),rgba(255,240,180,0) 74%),var(--tex-paper),linear-gradient(180deg,#faecbe 0%,#f3dc9c 30%,#ead085 60%,#dfc06e 100%)}
/* 卡面四周暗角：让立绘从底纹里"立"出来 */
.fm-card .vignette{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:12px;
  background:radial-gradient(ellipse 70% 56% at 50% 42%,rgba(0,0,0,0) 46%,rgba(150,104,30,.12) 76%,rgba(122,80,18,.26) 100%)}
.fm-card .halo{top:150px;width:340px;height:340px;margin-left:-170px;
  background:radial-gradient(circle,rgba(255,253,232,1) 0%,rgba(255,236,158,.85) 22%,rgba(255,214,92,.42) 44%,rgba(255,200,70,.14) 62%,rgba(255,200,70,0) 74%)}
.fm-card-乙 .halo{background:radial-gradient(circle,rgba(255,252,238,1) 0%,rgba(255,235,175,.8) 20%,rgba(206,150,240,.34) 44%,rgba(160,100,225,.12) 62%,rgba(160,100,225,0) 74%)}
.fm-card-丙 .halo{background:radial-gradient(circle,rgba(255,252,238,1) 0%,rgba(255,235,175,.8) 20%,rgba(126,178,250,.34) 44%,rgba(70,140,240,.12) 62%,rgba(70,140,240,0) 74%)}
.fm-card-丁 .halo{background:radial-gradient(circle,rgba(255,252,238,1) 0%,rgba(255,235,175,.8) 20%,rgba(126,214,140,.34) 44%,rgba(70,180,90,.12) 62%,rgba(70,180,90,0) 74%)}
.fm-card .rays{top:150px;opacity:.62}
/* 门派纹样：同心环 + 辐射细纹，极缓自转，若隐若现 */
.fm-card .sect{position:absolute;left:50%;top:118px;width:246px;height:246px;margin-left:-123px;z-index:1;pointer-events:none;opacity:.105;
  background:
    repeating-conic-gradient(from 0deg,rgba(112,72,16,.95) 0deg 2.2deg,transparent 2.2deg 15deg),
    radial-gradient(circle,transparent 25%,rgba(112,72,16,.9) 26%,transparent 28%),
    radial-gradient(circle,transparent 40%,rgba(112,72,16,.75) 41%,transparent 43%),
    radial-gradient(circle,transparent 56%,rgba(112,72,16,.65) 57%,transparent 59%),
    radial-gradient(circle,transparent 70%,rgba(112,72,16,.5) 71%,transparent 73%);
  -webkit-mask-image:radial-gradient(circle,#000 24%,rgba(0,0,0,.45) 52%,transparent 74%);
  mask-image:radial-gradient(circle,#000 24%,rgba(0,0,0,.45) 52%,transparent 74%);
  animation:fmSect 110s linear infinite}
@keyframes fmSect{to{transform:rotate(-360deg)}}
/* 水墨云：底部墨韵更浓，上缘加一道淡云带 */
.fm-card .ink{top:224px;height:200px;opacity:.44;
  background:
    radial-gradient(ellipse 40% 46% at 8% 92%,rgba(86,60,26,.95),transparent 70%),
    radial-gradient(ellipse 24% 32% at 30% 96%,rgba(86,60,26,.62),transparent 70%),
    radial-gradient(ellipse 28% 24% at 54% 90%,rgba(86,60,26,.5),transparent 70%),
    radial-gradient(ellipse 44% 50% at 92% 94%,rgba(86,60,26,.92),transparent 70%),
    radial-gradient(ellipse 30% 20% at 72% 78%,rgba(70,52,30,.4),transparent 72%),
    radial-gradient(ellipse 22% 16% at 22% 70%,rgba(70,52,30,.3),transparent 72%),
    radial-gradient(ellipse 62% 10% at 50% 18%,rgba(94,70,38,.24),transparent 72%)}
.fm-card::after{content:'';position:absolute;left:0;right:0;top:52px;height:86px;z-index:1;pointer-events:none;opacity:.3;
  background:var(--tex-cloud) center / 190px 60px repeat-x;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}

/* ---------- c. 立绘：轻微呼吸浮动 + 底部投影 ---------- */
.fm-card .portrait .fm-por{animation:fmBreathe 5.4s ease-in-out infinite;
  filter:drop-shadow(0 8px 12px rgba(60,40,10,.42)) drop-shadow(0 0 14px rgba(255,235,170,.32))}
.fm-card .portrait .pshadow{position:absolute;left:50%;bottom:12px;width:186px;height:26px;margin-left:-93px;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse,rgba(72,46,10,.4),rgba(72,46,10,.16) 52%,rgba(72,46,10,0) 74%);
  animation:fmShadow 5.4s ease-in-out infinite}
@keyframes fmBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.006)}}
@keyframes fmShadow{0%,100%{transform:scaleX(1);opacity:.85}50%{transform:scaleX(.92);opacity:.6}}

/* ---------- d. 甲级流动金边 / 觉醒紫金粒子 ---------- */
.fm-card .rim,.fm-card .motes{display:none;position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:12px}
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .fm-card-甲 .rim,.fm-card.awk .rim{display:block;padding:3.5px;
    background:conic-gradient(from var(--fmRim,0deg),
      rgba(255,246,205,0) 0deg,rgba(255,246,205,0) 34deg,
      rgba(255,250,225,.85) 62deg,#fffdf4 72deg,rgba(255,250,225,.85) 82deg,
      rgba(255,246,205,0) 112deg,rgba(255,246,205,0) 214deg,
      rgba(255,238,170,.7) 244deg,rgba(255,252,232,.9) 252deg,rgba(255,238,170,.6) 262deg,
      rgba(255,246,205,0) 292deg,rgba(255,246,205,0) 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
    animation:fmRim 3.4s linear infinite}
  .fm-card.awk .rim{background:conic-gradient(from var(--fmRim,0deg),
      rgba(255,246,205,0) 0deg,rgba(255,246,205,0) 30deg,
      rgba(216,158,255,.9) 58deg,#fff0ff 70deg,rgba(255,236,170,.95) 82deg,
      rgba(255,246,205,0) 114deg,rgba(255,246,205,0) 210deg,
      rgba(180,110,255,.8) 240deg,rgba(255,246,205,.9) 252deg,rgba(255,220,120,.7) 264deg,
      rgba(255,246,205,0) 296deg,rgba(255,246,205,0) 360deg)}
}
@property --fmRim{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes fmRim{to{--fmRim:360deg}}
.fm-card.awk .motes{display:block;overflow:hidden;
  background:
    radial-gradient(circle 2.2px at 14% 94%,rgba(255,238,175,.95),transparent 60%),
    radial-gradient(circle 1.6px at 28% 80%,rgba(214,152,255,.9),transparent 60%),
    radial-gradient(circle 2.6px at 44% 97%,rgba(255,244,196,.9),transparent 60%),
    radial-gradient(circle 1.5px at 58% 86%,rgba(198,138,255,.95),transparent 60%),
    radial-gradient(circle 2px at 72% 93%,rgba(255,238,175,.9),transparent 60%),
    radial-gradient(circle 1.7px at 86% 78%,rgba(226,178,255,.85),transparent 60%),
    radial-gradient(circle 1.4px at 20% 68%,rgba(255,246,205,.8),transparent 60%),
    radial-gradient(circle 1.9px at 66% 66%,rgba(255,236,170,.8),transparent 60%),
    radial-gradient(circle 1.3px at 38% 60%,rgba(206,144,255,.75),transparent 60%);
  -webkit-mask-image:linear-gradient(0deg,#000 24%,rgba(0,0,0,.6) 62%,transparent 94%);
  mask-image:linear-gradient(0deg,#000 24%,rgba(0,0,0,.6) 62%,transparent 94%);
  animation:fmMotes 7s linear infinite}
.fm-card.awk{box-shadow:
  0 0 0 2.5px #f0bd3a,0 0 0 4.5px #7b3fb5,0 0 0 6px #1e0e04,
  0 10px 22px rgba(0,0,0,.62),0 0 30px rgba(190,110,255,.45)}
.fm-card.awk .frame{box-shadow:
  inset 0 0 0 1.2px rgba(255,252,235,.9),
  inset 0 0 0 5px #f0bd3a,
  inset 0 0 0 7px #8a5f10,
  inset 0 0 0 8px rgba(255,250,225,.95),
  inset 0 0 0 11px #f0bd3a,
  inset 0 0 0 12.5px #6b32a8,
  inset 0 0 0 13.5px rgba(24,8,38,.92),
  inset 0 0 30px rgba(120,60,180,.18),
  inset 0 16px 28px rgba(255,252,235,.18)}
@keyframes fmMotes{0%{transform:translateY(18px);opacity:.1}22%{opacity:.95}100%{transform:translateY(-96px);opacity:0}}

/* ---------- e. 星级：金星闪光 ---------- */
.fm-card .stars{top:17px;padding:0 48px 0 44px;flex-wrap:nowrap}
.fm-card .stars svg{width:21px;height:21px;flex:none}
.fm-card .stars svg.on{filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)) drop-shadow(0 0 4px rgba(255,214,110,.95));
  animation:fmStar 2.6s ease-in-out infinite}
.fm-card .stars svg.on:nth-child(2){animation-delay:.18s}
.fm-card .stars svg.on:nth-child(3){animation-delay:.36s}
.fm-card .stars svg.on:nth-child(4){animation-delay:.54s}
.fm-card .stars svg.on:nth-child(5){animation-delay:.72s}
.fm-card .stars svg.on:nth-child(6){animation-delay:.9s}
.fm-card .stars svg.on:nth-child(7){animation-delay:1.08s}
.fm-card .stars svg.on:nth-child(8){animation-delay:1.26s}
@keyframes fmStar{0%,72%,100%{transform:scale(1);filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)) drop-shadow(0 0 4px rgba(255,214,110,.9))}
  84%{transform:scale(1.16);filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)) drop-shadow(0 0 9px rgba(255,240,180,1))}}

/* ---------- f. 名字 / 称号 / 印章 ---------- */
.fm-card .name{font-size:50px;letter-spacing:5px;color:#140b05;
  text-shadow:
    -1.2px -1.2px 0 rgba(255,252,240,.85),1.2px -1.2px 0 rgba(255,252,240,.85),-1.2px 1.2px 0 rgba(255,252,240,.85),1.2px 1.2px 0 rgba(255,252,240,.85),
    0 0 12px rgba(255,240,190,.95),0 4px 8px rgba(90,60,10,.35)}
.fm-card .title{right:14px;padding:13px 5px 18px;
  box-shadow:inset 0 0 0 1px rgba(255,214,120,.75),inset 2px 0 0 rgba(255,206,158,.3),inset -2px 0 0 rgba(90,12,6,.5),0 3px 7px rgba(0,0,0,.55)}
.fm-card .title::before{content:'';position:absolute;left:2px;right:2px;top:4px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,220,140,.85),transparent)}
.fm-card .title span{font-size:22px;letter-spacing:5px;text-shadow:0 1px 0 #3f0a06,0 0 6px rgba(255,180,90,.4)}
.fm-card .qseal .seal.lg{width:44px;height:44px;font-size:29px;
  box-shadow:0 0 0 2px #fff2d2,0 0 0 4px #a8261b,0 2px 5px rgba(0,0,0,.55),inset 0 -3px 5px rgba(0,0,0,.35)}
.fm-card .qseal .awk{box-shadow:0 0 0 1px #2a0a4a,0 0 9px rgba(180,90,255,.8)}
.fm-card .stats .st .stat-seal{width:20px;height:20px;font-size:13px;line-height:20px;
  box-shadow:0 0 0 1px rgba(255,248,220,.75),0 1px 2px rgba(0,0,0,.45)}
.fm-card .stats{font-size:13px}
.fm-card .icons .ci{box-shadow:0 0 0 1.5px #5a3800,inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 4px rgba(120,70,0,.5),0 2px 4px rgba(0,0,0,.5)}

/* ---------- g. 缘分：激活金字 + 小金光点，未激活灰字 ---------- */
.fm-card .fates .list{gap:2px 6px}
.fm-card .fates .f{position:relative;padding-left:12px;color:#9a8a70}
.fm-card .fates .f::before{content:'';position:absolute;left:0;top:5px;width:6px;height:6px;margin:0;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d9cdb4,#9a8a70);box-shadow:0 0 0 1px rgba(90,60,20,.3)}
.fm-card .fates .f.on{color:#8a5a00}
.fm-card .fates .f.on::before{background:radial-gradient(circle at 35% 30%,#fffbe0,#f2c245 55%,#b8860b);
  box-shadow:0 0 0 1px rgba(120,80,0,.5),0 0 7px 1px rgba(255,205,80,.95);animation:fmFateDot 1.9s ease-in-out infinite}
.fm-card .fates .f.none::before{background:none;box-shadow:none;content:'—';color:var(--ink-faint);top:0;width:auto;height:auto}
@keyframes fmFateDot{0%,100%{box-shadow:0 0 0 1px rgba(120,80,0,.5),0 0 5px 1px rgba(255,205,80,.7)}50%{box-shadow:0 0 0 1px rgba(120,80,0,.5),0 0 10px 2px rgba(255,218,115,1)}}
.fm-card .fates .f.on:nth-child(2)::before{animation-delay:.25s}
.fm-card .fates .f.on:nth-child(3)::before{animation-delay:.5s}
.fm-card .fates .f.on:nth-child(4)::before{animation-delay:.75s}

/* ---------- h. 装备 / 武学槽：金框 + 品阶角标 + 强化数字 ---------- */
.fm-slot .box{border-radius:9px;background:var(--qbg,radial-gradient(circle at 50% 40%,#f3e6c4,#c9a96e 60%,#8c7355));
  box-shadow:0 0 0 2px var(--qc,#9a8a70),0 0 0 3.5px #4a2a10,0 0 0 4.5px #1e0e04,
    inset 0 0 0 1px rgba(255,250,225,.65),inset 0 -7px 10px rgba(60,35,5,.28),0 2px 5px rgba(0,0,0,.5)}
.fm-slot .box::after{content:'';position:absolute;inset:0;z-index:2;border-radius:9px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.05) 34%,transparent 56%,rgba(0,0,0,.16))}
.fm-slot.q-甲 .box{box-shadow:0 0 0 2px #ffe08a,0 0 0 3.5px #8a5a00,0 0 0 4.5px #1e0e04,inset 0 0 0 1px rgba(255,250,225,.7),inset 0 -7px 10px rgba(60,35,5,.28),0 0 9px rgba(255,205,80,.5),0 2px 5px rgba(0,0,0,.5)}
.fm-slot.q-乙 .box{box-shadow:0 0 0 2px #dcbcff,0 0 0 3.5px #4a2270,0 0 0 4.5px #150920,inset 0 0 0 1px rgba(255,250,255,.6),inset 0 -7px 10px rgba(30,10,44,.3),0 2px 5px rgba(0,0,0,.5)}
.fm-slot.q-丙 .box{box-shadow:0 0 0 2px #a9cdff,0 0 0 3.5px #17427f,0 0 0 4.5px #07172b,inset 0 0 0 1px rgba(245,250,255,.6),inset 0 -7px 10px rgba(6,22,44,.3),0 2px 5px rgba(0,0,0,.5)}
.fm-slot.q-丁 .box{box-shadow:0 0 0 2px #bdf0b3,0 0 0 3.5px #22622a,0 0 0 4.5px #0a1c0c,inset 0 0 0 1px rgba(248,255,246,.6),inset 0 -7px 10px rgba(8,32,10,.3),0 2px 5px rgba(0,0,0,.5)}
.fm-slot .box > svg.ico{position:relative;z-index:1}
.fm-slot .tier{z-index:4;box-shadow:0 0 0 1px #1e0e04,0 1px 3px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.45)}
.fm-slot .lv{z-index:4;box-shadow:0 0 0 1px #f2c245,0 1px 3px rgba(0,0,0,.55)}
.fm-slot .bd{z-index:4}
.fm-slot.empty .box{background:rgba(43,29,18,.08);border:2px dashed rgba(122,79,0,.55);border-radius:9px;
  box-shadow:inset 0 0 12px rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.25)}
.fm-slot.empty .box::after{background:none}
.fm-slot.empty .plus{right:6px;bottom:2px;font-size:22px;color:rgba(168,38,27,.8);text-shadow:0 1px 0 rgba(255,248,220,.7)}

/* ---------- i. 顶部阵位头像条：等级角标 + 星数小行 ---------- */
.fm-cell-box{background:var(--qbg,radial-gradient(circle at 50% 40%,#f3e6c4,#c9a96e 60%,#8c7355))}
.fm-cell .stars{position:absolute;left:0;right:0;bottom:18px;z-index:3;display:flex;justify-content:center;gap:0;pointer-events:none}
.fm-cell .stars svg{width:8px;height:8px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.7))}
.fm-cell .nm{bottom:0;z-index:4}
.fm-cell.q-甲 .fm-cell-box{box-shadow:0 0 0 2px #ffe9a3,0 0 0 3.5px #8a5a00,0 0 0 5px #1e0e04,inset 0 0 12px rgba(0,0,0,.3),0 0 10px rgba(255,205,80,.45)}
.fm-cell.q-乙 .fm-cell-box{box-shadow:0 0 0 2px #dcbcff,0 0 0 3.5px #4a2270,0 0 0 5px #150920,inset 0 0 12px rgba(0,0,0,.3)}
.fm-cell.q-丙 .fm-cell-box{box-shadow:0 0 0 2px #a9cdff,0 0 0 3.5px #17427f,0 0 0 5px #07172b,inset 0 0 12px rgba(0,0,0,.3)}
.fm-cell.q-丁 .fm-cell-box{box-shadow:0 0 0 2px #bdf0b3,0 0 0 3.5px #22622a,0 0 0 5px #0a1c0c,inset 0 0 12px rgba(0,0,0,.3)}
.fm-cell .fm-av{object-position:50% 50%}
.fm-cell .fm-av.is-portrait{object-position:50% 10%}
.fm-star .fm-av{object-position:50% 50%}
.fm-star .fm-av.is-portrait{object-position:50% 8%}

/* 12px 金框后的内部让位 */
.fm-card .help{left:17px;top:19px;width:27px;height:27px;font-size:20px}
.fm-card .name{left:22px;top:52px}
.fm-card .portrait{top:28px;height:400px}
.fm-card .portrait .fm-por{height:396px;max-width:258px}
.fm-card .qseal{left:24px}
.fm-card .icons{right:20px}
.fm-card .title{right:18px;top:-2px}
.fm-card .info{left:13.5px;right:13.5px;bottom:13.5px;border-radius:0 0 4px 4px;padding:8px 10px 6px}
.fm-card .vignette{inset:13.5px;border-radius:4px}

/* 信息条高度收紧，避免大卡底部留白 */
.fm-card .info{height:146px}
.fm-card .fates{min-height:56px;margin-top:7px}
.fm-card .fates .list{max-height:72px;overflow:hidden}
.fm-card .portrait{height:400px}
.fm-card .portrait .fm-por{height:396px}