/**
 * 头像框组件 · AvatarFrame
 * - 视觉源自设计稿 D4「仙焰重器」(design-demos/title-avatar-frames/D4-二龙戏珠.html)
 * - 8 个专属框(服务端 TitleDef.frame 下发)+ 6 个通用品阶环(前端按 rarity 兜底)
 * - em 缩放体系:容器 font-size = 尺寸/100,1em = 直径 1%
 * - 动效分档:≥64px 才开流光/粒子(容器无 .af--static),≤44px 静态帧(聊天列表性能保护)
 * - 命名空间 af-,不得省略前缀(游戏页存在 .face/.rim 等无关类)
 */

/* ========== 容器与几何 ========== */
.af {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--s, 64px);
    height: var(--s, 64px);
    margin: calc(var(--s, 64px) / -2) 0 0 calc(var(--s, 64px) / -2);
    font-size: calc(var(--s, 64px) / 100);
    pointer-events: none;
    z-index: 2;
}
.af--s32 { --s: 32px; }
.af--s40 { --s: 40px; }
.af--s44 { --s: 44px; }
.af--s48 { --s: 48px; }
.af--s64 { --s: 64px; }
.af--s120 { --s: 120px; }

/* 呼吸光晕(气场外沿) */
.af::before {
    content: "";
    position: absolute;
    inset: -22%;
    border-radius: 50%;
    z-index: 0;
    background:
        radial-gradient(closest-side, var(--hc, transparent), transparent 62%),
        radial-gradient(closest-side at 40% 38%, rgba(255, 252, 240, .075), transparent 55%),
        radial-gradient(closest-side, var(--hc2, var(--hc, transparent)), transparent 78%);
    animation: afBreath 3.8s ease-in-out infinite alternate;
}

/* 环体:mask 裁出环带,conic 材质 + 圆管明暗 */
.af-rim {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 2;
    -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - var(--bw, 12%)), #000 calc(100% - var(--bw, 12%) + .4px));
            mask-image: radial-gradient(closest-side, transparent calc(100% - var(--bw, 12%)), #000 calc(100% - var(--bw, 12%) + .4px));
    box-shadow: inset 0 .55em 1.6em rgba(255, 244, 210, .26), inset 0 -.7em 1.8em rgba(24, 10, 0, .44);
}
/* 内嵌槽金线 */
.af-rim::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--slotw, 89%);
    height: var(--slotw, 89%);
    border-radius: 50%;
    border: .4em solid rgba(255, 248, 224, .66);
    filter: drop-shadow(0 .25em .4em rgba(0, 0, 0, .42)) drop-shadow(0 0 .15em rgba(255, 235, 180, .35));
}
.af-rim::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 205deg, transparent 0 52%, rgba(255, 255, 255, .24) 60%, transparent 68%, rgba(20, 10, 0, .30) 82%, transparent 92%);
}
/* 滚边珠线:仅神品框与神金通用环 */
.af-beads {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 3;
    display: none;
    background:
        conic-gradient(from 205deg at 50% 50%, transparent 0 36%, rgba(255, 250, 228, .85) 46%, rgba(255, 250, 228, .08) 56%, rgba(20, 8, 0, .30) 74%, transparent 86%),
        repeating-conic-gradient(from 2deg, #ffedbd 0deg 1.5deg, rgba(96, 62, 14, .95) 1.5deg 2.1deg, transparent 2.1deg 5.7deg);
    -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 3.4%), #000 calc(100% - 3%), #000 calc(100% - .9%), transparent calc(100% - .6%));
            mask-image: radial-gradient(closest-side, transparent calc(100% - 3.4%), #000 calc(100% - 3%), #000 calc(100% - .9%), transparent calc(100% - .6%));
}
.af--beads .af-beads { display: block; }

/* 流光扫过(环带内亮弧,动效档专属) */
.af-shine {
    position: absolute;
    inset: -1.5%;
    border-radius: 50%;
    z-index: 3;
    -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - calc(var(--bw, 12%) + 4%)), #000 80%);
            mask-image: radial-gradient(closest-side, transparent calc(100% - calc(var(--bw, 12%) + 4%)), #000 80%);
    opacity: 0;
}

/* 头像本体圆:宣纸底;img 圆形填满。尺寸/字号一律基于 --s 计算,
 * 不得用 em——font-size 会改变 em 基准导致 width 失控 */
.af-face {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--s, 64px) * .81);
    height: calc(var(--s, 64px) * .81);
    border-radius: 50%;
    z-index: 4;
    overflow: hidden;
    display: grid;
    place-items: center;
    font-size: calc(var(--s, 64px) * .31);
    line-height: 1;
    background: radial-gradient(circle at 38% 30%, #fbf7ea, #f0e9d5 56%, #ded2b4);
    box-shadow: inset 0 0 3em rgba(70, 58, 34, .28), inset 0 -1em 2.4em rgba(90, 70, 36, .18);
}
.af-face img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* 设计图切图：内孔占画布 48%，脸圆 0.81s，切图边长 = 0.81s / 0.48 */
.af--art::before { display: none; }
.af-art {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--s, 64px) * 1.6875);
    height: calc(var(--s, 64px) * 1.6875);
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
    object-fit: contain;
}

/* 贴片层:顶(.af-tip)/底(.af-tipb)/环后(.af-rbk)/环前(.af-fpt) */
.af-tip,
.af-tipb {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    pointer-events: none;
}
.af-tipb { z-index: 5; }
.af-rbk { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; }
.af-fpt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; pointer-events: none; }

/* Bloom 辉光(透光,静态)与散景光斑(仅动效档渲染) */
.af-bloom {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    border-radius: 50%;
    mix-blend-mode: screen;
    background: radial-gradient(closest-side,
        rgba(255, 252, 238, .92) 0%, rgba(255, 236, 190, .34) 16%, var(--bc, rgba(255, 200, 110, .16)) 34%, transparent 66%);
    transform: translate(-50%, -50%);
    width: 60em;
    height: 60em;
    opacity: .9;
}
.af-bloom--cool { background: radial-gradient(closest-side, rgba(255, 255, 255, .72) 0%, rgba(214, 226, 252, .25) 16%, var(--bc, rgba(150, 178, 255, .13)) 34%, transparent 66%); }
.af-bokeh {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 7;
    border-radius: 50%;
    mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(255, 248, 222, .65) 0%, rgba(255, 232, 168, .18) 48%, transparent 72%);
    animation: afDrift 21s ease-in-out infinite alternate;
    animation-delay: var(--bd, 0s);
}
.af-bokeh--frost { background: radial-gradient(circle, rgba(240, 248, 255, .6) 0%, rgba(196, 216, 255, .16) 48%, transparent 72%); }

/* 轨道光尘 */
.af-sp {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    width: var(--ssz, 5em);
    height: var(--ssz, 5em);
    margin: calc(var(--ssz, 5em) / -2);
    transform: rotate(var(--pa, 0deg)) translateY(var(--pr, -46.5em));
    animation: afOrbit 5.4s linear infinite;
    animation-delay: var(--pd, 0s);
}
.af-sp::after {
    content: "";
    position: absolute;
    inset: 24%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #fffef4, #ffd377 52%, rgba(255, 132, 26, .55) 74%, transparent 84%);
    filter: drop-shadow(0 0 3px #ffb04a) drop-shadow(0 0 7px rgba(255, 120, 20, .4));
    animation: afTwinkle 1.9s ease-in-out infinite alternate;
}
.af-sp--frost::after {
    background: radial-gradient(circle at 35% 32%, #ffffff, #cfdcff 55%, rgba(150, 180, 255, .45) 74%, transparent 84%);
    filter: drop-shadow(0 0 3px #bcd2ff) drop-shadow(0 0 6px rgba(160, 190, 255, .38));
}

/* 珠类:火焰珠(灵界宗魁)/ 月珠(仙界宗魁)/ 赤核(逆天破局者) */
.af-orblet {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 7;
}
.af-pearl {
    width: 14em;
    height: 14em;
    top: -34em;
    background: radial-gradient(circle at 38% 32%, #fff6dc, #ffcf78 34%, #ff8b30 62%, #c43d12 88%);
    box-shadow: 0 0 15em rgba(255, 158, 64, .55), 0 0 4em rgba(255, 120, 40, .35), inset 0 -.35em .8em rgba(140, 30, 0, .5);
    animation: afPulse 2.6s ease-in-out infinite alternate;
}
.af-pearl::before {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at 30% 66%, rgba(255, 238, 186, .95), transparent 45%),
        radial-gradient(circle at 64% 30%, rgba(255, 246, 210, .9), transparent 42%),
        conic-gradient(from 205deg at 50% 50%, transparent 0 32%, rgba(255, 196, 96, .6) 45%, transparent 58%, rgba(255, 164, 64, .5) 74%, transparent 88%);
    -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 74%);
            mask-image: radial-gradient(circle, #000 52%, transparent 74%);
}
.af-pearl::after {
    content: "";
    position: absolute;
    inset: -13%;
    border-radius: 50%;
    border: .26em solid rgba(232, 196, 116, .7);
    box-shadow: 0 0 1.1em rgba(255, 200, 110, .4);
}
.af-pearlw {
    width: 10.5em;
    height: 10.5em;
    top: -25em;
    background: radial-gradient(circle at 36% 32%, #ffffff, #dbe4f4 46%, #9db4d8 80%);
    box-shadow: 0 0 9em rgba(190, 210, 255, .5);
    animation: afPulse 3.4s ease-in-out infinite;
}
.af-core {
    width: 13em;
    height: 13em;
    top: -22em;
    background: radial-gradient(circle at 36% 32%, #ffe2dc, #ff5346 46%, #8e0f16 80%);
    box-shadow: 0 0 12em rgba(255, 64, 48, .55);
    animation: afFlare 3s linear infinite;
}

/* ========== 专属框材质(对应服务端 TitleDef.frame) ========== */

/* 天下第一:鎏金焰环 · 鎏金道冠压环沿 · 火种巡轨 · 御题金匾 */
.af--chaos_crown { --bw: 16%; --slotw: 84.5%; --hc: rgba(255, 190, 84, .34); --hc2: rgba(255, 150, 30, .12); }
.af--chaos_crown .af-rim { background: conic-gradient(from 214deg, #5e3c10, #caa149 12%, #fceeb2 21%, #8a5c1c 33%, #53340d 46%, #d3a950 58%, #ffe9ad 69%, #6e4712 81%, #8f651d 90%, #5e3c10); }
.af--chaos_crown .af-shine { opacity: 1; background: conic-gradient(from 0deg, transparent 0 74%, rgba(255, 245, 206, .85) 84%, transparent 91%); animation: afSpin 5.2s linear infinite; }
.af--chaos_crown .af-tip-crown { width: 94em; top: -25em; filter: drop-shadow(0 .55em 1.1em rgba(0, 0, 0, .5)) drop-shadow(0 .18em .35em rgba(0, 0, 0, .45)); animation: afFloat 4.6s ease-in-out infinite; }
.af--chaos_crown .af-tipb-plaque { width: 58em; bottom: -28em; filter: drop-shadow(0 .4em .9em rgba(0, 0, 0, .5)) drop-shadow(0 .14em .3em rgba(0, 0, 0, .42)); }

/* 灵界宗魁:二龙戏珠——龙身环后盘绕,龙首/前爪越环前,拱顶火焰珠 */
.af--twin_dragons { --bw: 15%; --slotw: 84.5%; --hc: rgba(150, 110, 235, .34); --hc2: rgba(216, 180, 90, .10); }
.af--twin_dragons .af-rim { background: conic-gradient(from 140deg, #2e2258, #5d46a0 16%, #9a7ad4 30%, #4a3778 46%, #8a68c6 58%, #332566 72%, #d8b45a 77%, #8a6a30 81%, #2a1e52 86%, #453270 94%, #2e2258); }
.af--twin_dragons .af-shine { opacity: 1; background: conic-gradient(from 0deg, transparent 0 72%, rgba(233, 212, 158, .8) 82%, transparent 90%); animation: afSpin 7.5s linear infinite; }
.af--twin_dragons .af-rbk-drag { width: 132em; height: 132em; overflow: visible; filter: drop-shadow(0 -.2em .7em rgba(28, 12, 56, .5)) drop-shadow(0 .3em .8em rgba(20, 8, 40, .45)); }
.af--twin_dragons .af-fpt-drag { width: 132em; height: 132em; overflow: visible; filter: drop-shadow(0 .4em .9em rgba(14, 6, 30, .55)); }

/* 仙界宗魁:白鹤亮翅——双翼环后 V 字展开,翼尖翻沿,月珠居顶 */
.af--crane_wings { --bw: 14%; --slotw: 85%; --hc: rgba(214, 224, 240, .26); --hc2: rgba(214, 224, 240, .08); }
.af--crane_wings .af-rim { background: conic-gradient(from 20deg, #e9e6db, #ffffff 18%, #b5af9f 38%, #eee9da 56%, #fdfcf7 72%, #bcb6a5 88%, #e9e6db); }
.af--crane_wings .af-shine { opacity: 1; background: conic-gradient(from 0deg, transparent 0 78%, rgba(255, 255, 250, .75) 87%, transparent 93%); animation: afSpin 11s linear infinite; }
.af--crane_wings .af-rbk-wings,
.af--crane_wings .af-fpt-wingf { width: 170em; height: 150em; transform: translate(-50%, -53%); overflow: visible; }
.af--crane_wings .af-rbk-wings { filter: drop-shadow(0 .45em 1em rgba(90, 76, 40, .30)); }
.af--crane_wings .af-fpt-wingf { filter: drop-shadow(0 .3em .7em rgba(80, 66, 34, .28)); }

/* 武道魁首:熔铜烈环 · 交剑悬底 */
.af--flame_blades { --bw: 14.5%; --slotw: 84.5%; --hc: rgba(255, 120, 40, .30); --hc2: rgba(255, 90, 20, .10); }
.af--flame_blades .af-rim { background: conic-gradient(from 300deg, #3a1408, #e2571f 14%, #ffc257 26%, #8a3210 42%, #3f160a 56%, #ff9a3d 70%, #ffdca0 78%, #8a3c12 88%, #3a1408); }
.af--flame_blades .af-shine { opacity: 1; background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 214, 150, .85) 80%, transparent 88%); animation: afSpin 4.4s linear infinite; }
.af--flame_blades .af-tipb-swords { width: 74em; bottom: -15em; filter: drop-shadow(0 .4em .9em rgba(0, 0, 0, .55)); }

/* 三冠王(连冠系列):棱面金轮 · 三星徽刻 */
.af--triple_star { --bw: 13.5%; --slotw: 85%; --hc: rgba(232, 198, 108, .26); }
.af--triple_star .af-rim { background: repeating-conic-gradient(from 8deg, #6e5316 0deg 7deg, #dfba62 7deg 9.4deg, #96771f 9.4deg 14.4deg); }
.af--triple_star .af-shine { opacity: 1; background: conic-gradient(from 0deg, transparent 0 80%, rgba(255, 240, 190, .55) 88%, transparent 94%); animation: afSpin 9.5s linear infinite; }
.af--triple_star .af-tip-stars { width: 78em; top: -19em; filter: drop-shadow(0 .35em .8em rgba(0, 0, 0, .5)); }

/* 塔外亦明镜:月轮清辉 · 冷光星尘 */
.af--moon_mirror { --bw: 12.5%; --slotw: 86%; --hc: rgba(168, 196, 246, .28); }
.af--moon_mirror .af-rim { background: conic-gradient(from 250deg, #cdd6ea, #f6f9ff 20%, #9fadc9 42%, #e6ecf7 58%, #ffffff 74%, #aab6cc 90%, #cdd6ea); }
.af--moon_mirror .af-shine { opacity: 1; background: conic-gradient(from 0deg, transparent 0 76%, rgba(240, 247, 255, .7) 86%, transparent 92%); animation: afSpin 13s linear infinite; }
.af--moon_mirror .af-tip-moon { width: 56em; top: -26em; filter: drop-shadow(0 .35em .9em rgba(120, 150, 220, .4)); }

/* 逆天破局者:玄铁赤雷 · 破界裂口 */
.af--scarlet_bolt { --bw: 13%; --hc: rgba(255, 54, 44, .16); --hc2: rgba(160, 18, 38, .06); }
.af--scarlet_bolt .af-rim { background: conic-gradient(from 12deg, #1f1016, #33202b 12%, #1a0e14 26%, #a01226 33%, #2a141c 42%, #240f1a 58%, #ff5346 64.5%, #2a141c 72%, #1f1016 86%, #33202b); }
.af--scarlet_bolt .af-tip-bolt { width: 92em; top: -16em; filter: drop-shadow(0 0 .8em rgba(255, 70, 54, .9)); animation: afBlink 3.4s linear infinite; }

/* 一夫当关:青金铁壁 · 关楼灯火(哑光) */
.af--iron_gate { --bw: 14%; }
.af--iron_gate .af-rim { background: repeating-conic-gradient(from 3deg, #414e59 0deg 9deg, #52616d 9deg 10.4deg); }
.af--iron_gate .af-tip-wall { width: 78em; top: -19em; filter: drop-shadow(0 .3em .6em rgba(0, 0, 0, .5)); }

/* ========== 通用品阶环(rarity 兜底,强度随品阶递进) ========== */

/* 凡品:灰墨细环(无嵌槽) */
.af--c1 { --bw: 6%; }
.af--c1 .af-rim { background: conic-gradient(from 200deg, #8f8a83, #b6b1a8 30%, #a09b93 58%, #8f8a83); }
.af--c1 .af-rim::before { display: none; }

/* 通品:白釉瓷环 */
.af--c2 { --bw: 8.5%; }
.af--c2 .af-rim { background: conic-gradient(from 100deg, #fdfdfb, #eceade 26%, #dcdcd2 52%, #fbfbf8 78%, #fdfdfb); }

/* 灵品:青竹劲节 */
.af--c3 { --bw: 9.5%; }
.af--c3 .af-rim { background: conic-gradient(from 40deg, #3f7f46, #5aa55d 22%, #7dba78 44%, #468a4e 66%, #6cae66 84%, #3f7f46); }
.af--c3 .af-tip-leaf { width: 46em; top: -14em; filter: drop-shadow(0 .25em .5em rgba(0, 0, 0, .4)); }

/* 宝品:青金铁壁(素环,无关楼) */
.af--c4 { --bw: 14%; }
.af--c4 .af-rim { background: repeating-conic-gradient(from 3deg, #414e59 0deg 9deg, #52616d 9deg 10.4deg); }

/* 仙品:紫曜晶环 */
.af--c5 { --bw: 12%; --slotw: 85%; --hc: rgba(156, 110, 220, .26); }
.af--c5 .af-rim { background: conic-gradient(from 160deg, #2c1f4e, #6a4a9e 14%, #b08ae0 28%, #4a3576 44%, #8a68c6 60%, #d8c2f0 72%, #3a2a5e 86%, #2c1f4e); }
.af--c5 .af-shine { opacity: 1; background: conic-gradient(from 0deg, transparent 0 74%, rgba(230, 214, 255, .7) 84%, transparent 92%); animation: afSpin 8.8s linear infinite; }

/* 神品:鎏金素环(无冠无匾,有嵌槽珠线流光) */
.af--c6 { --bw: 16%; --slotw: 84.5%; --hc: rgba(255, 190, 84, .30); --hc2: rgba(255, 150, 30, .10); }
.af--c6 .af-rim { background: conic-gradient(from 214deg, #5e3c10, #caa149 12%, #fceeb2 21%, #8a5c1c 33%, #53340d 46%, #d3a950 58%, #ffe9ad 69%, #6e4712 81%, #8f651d 90%, #5e3c10); }
.af--c6 .af-shine { opacity: 1; background: conic-gradient(from 0deg, transparent 0 76%, rgba(255, 245, 206, .8) 86%, transparent 92%); animation: afSpin 6.4s linear infinite; }

/* 新框贴片尺寸：对齐旧八枚(冠 94em / 匾 58em)，小图标会在 40px 名录里看不见 */
.af-tip-sm, .af-tipb-sm { width: 58em; }
.af-tip-md { width: 74em; }
.af-tip-wide, .af-tipb-wide { width: 86em; }
.af-tip-hero { width: 96em; top: -30em; }
.af-tipb-hero { width: 88em; bottom: -26em; }
.af-tip-sm { top: -22em; }
.af-tip-md { top: -26em; }
.af-tip-wide { top: -24em; }
.af-tipb-sm, .af-tipb-wide { bottom: -20em; }
.af-tip-lamp { width: 36em; top: -32em; }
.af-tipb-sm2 { width: 48em; bottom: -18em; margin-left: 18em; }
.af-tipb-sword { width: 36em; bottom: -22em; }
.af-tip-slip-l, .af-tip-slip-r { width: 18em; top: 10em; }
.af-tip-slip-l { left: 2%; transform: none; }
.af-tip-slip-r { left: auto; right: 2%; transform: none; }
.af-rbk-script, .af-rbk-scale { width: 118em; height: 118em; }

/* 鬼楼族：骨银魂铃 */
.af--tower_enter, .af--tower_will, .af--tower_ask, .af--tower_ferry,
.af--tower_keep, .af--tower_discern, .af--tower_invert { --bw: 11%; --slotw: 86%; --hc: rgba(168, 196, 246, .18); }
.af--tower_enter .af-rim { background: conic-gradient(from 250deg, #9aa6b8, #d5dce8 30%, #8e9aab 70%, #9aa6b8); }
.af--tower_will .af-rim { background: conic-gradient(from 250deg, #8fa89a, #cfe0d4 28%, #7d9a86 68%, #8fa89a); }
.af--tower_ask { --bw: 12%; }
.af--tower_ask .af-rim { background: conic-gradient(from 250deg, #7d8aa0, #c5cedd 28%, #5f6c80 70%, #7d8aa0); }
.af--tower_ferry .af-rim { background: conic-gradient(from 200deg, #8a96aa, #e6c98a 36%, #6d788c 78%, #8a96aa); }
.af--tower_keep { --bw: 13%; --hc: rgba(232, 198, 108, .22); }
.af--tower_keep .af-rim { background: conic-gradient(from 214deg, #8a96aa, #dfba62 24%, #cdd6ea 58%, #8a6a30 86%, #8a96aa); }
.af--tower_discern { --bw: 13%; --hc: rgba(180, 200, 250, .24); }
.af--tower_discern .af-rim { background: conic-gradient(from 250deg, #cdd6ea, #f6f9ff 22%, #9fadc9 60%, #cdd6ea); }
.af--tower_invert { --bw: 15%; --slotw: 84.5%; --hc: rgba(255, 190, 84, .28); }
.af--tower_invert .af-rim { background: conic-gradient(from 214deg, #5e3c10, #caa149 16%, #cdd6ea 40%, #8a5c1c 70%, #5e3c10); }

/* 武道 / 天衡次席 */
.af--martial_silver, .af--martial_top4, .af--martial_top8 { --bw: 12%; --hc: rgba(255, 120, 40, .16); }
.af--martial_silver .af-rim { background: conic-gradient(from 300deg, #5a2a14, #c46a32 30%, #8a3c12 70%, #5a2a14); }
.af--martial_top4 .af-rim { background: repeating-conic-gradient(from 8deg, #5a2a14 0deg 8deg, #8a3c12 8deg 10deg); }
.af--martial_top8 { --bw: 9%; }
.af--martial_top8 .af-rim { background: conic-gradient(from 300deg, #414e59, #6a3a22 50%, #414e59); }
.af--tianheng_silver, .af--tianheng_top4, .af--tianheng_top8 { --bw: 12%; --hc: rgba(255, 190, 84, .16); }
.af--tianheng_silver .af-rim { background: conic-gradient(from 214deg, #6e5316, #dfba62 28%, #8a6a30 70%, #6e5316); }
.af--tianheng_top4 .af-rim { background: conic-gradient(from 214deg, #5e3c10, #caa149 40%, #5e3c10); }
.af--tianheng_top8 { --bw: 9%; }
.af--tianheng_top8 .af-rim { background: conic-gradient(from 214deg, #8a6a30, #c9ad72 50%, #8a6a30); }
.af--guess_eye { --bw: 13%; --slotw: 85%; --hc: rgba(150, 110, 235, .26); }
.af--guess_eye .af-rim { background: conic-gradient(from 140deg, #2e2258, #9a7ad4 30%, #d8b45a 58%, #2e2258); }
.af--invite_lantern { --bw: 13%; --hc: rgba(255, 190, 84, .24); }
.af--invite_lantern .af-rim { background: conic-gradient(from 214deg, #5e3c10, #f4d97c 28%, #8a5c1c 70%, #5e3c10); }

/* 玄筹阁族：夜蓝钱纹 */
.af--xc_god, .af--xc_sage, .af--xc_monster, .af--xc_whale,
.af--xc_regular, .af--xc_spend, .af--xc_vet, .af--xc_soul { --bw: 13%; --slotw: 85%; --hc: rgba(80, 120, 200, .18); }
.af--xc_god { --bw: 16%; --hc: rgba(255, 190, 84, .28); }
.af--xc_god .af-rim { background: conic-gradient(from 214deg, #12203a, #caa149 18%, #1a2a4a 46%, #ffe9ad 70%, #12203a); }
.af--xc_sage .af-rim { background: conic-gradient(from 214deg, #1a2a4a, #dfba62 32%, #12203a 78%, #1a2a4a); }
.af--xc_monster .af-rim { background: conic-gradient(from 12deg, #1a2438, #e2571f 36%, #12203a 78%, #1a2438); }
.af--xc_whale .af-rim { background: conic-gradient(from 214deg, #12203a, #ffe9ad 24%, #8a6a30 60%, #12203a); }
.af--xc_regular { --bw: 10%; }
.af--xc_regular .af-rim { background: repeating-conic-gradient(from 4deg, #2a3a58 0deg 7deg, #8a6a30 7deg 8.5deg); }
.af--xc_spend { --bw: 10%; }
.af--xc_spend .af-rim { background: conic-gradient(from 80deg, #4a5a28, #7a8a4a 40%, #2a3418 80%, #4a5a28); }
.af--xc_vet { --bw: 10%; }
.af--xc_vet .af-rim { background: repeating-conic-gradient(from 10deg, #243048 0deg 9deg, #6e5316 9deg 10deg); }
.af--xc_soul { --bw: 14%; --hc: rgba(120, 170, 255, .22); }
.af--xc_soul .af-rim { background: repeating-conic-gradient(from 2deg, #1a2a4a 0deg 6deg, #dfba62 6deg 8deg, #12203a 8deg 14deg); }

/* 炼制 / 图鉴 */
.af--craft_alchemy { --bw: 13%; --hc: rgba(255, 80, 40, .18); }
.af--craft_alchemy .af-rim { background: conic-gradient(from 300deg, #3a1408, #e2571f 28%, #8a3210 70%, #3a1408); }
.af--craft_forge { --bw: 13%; }
.af--craft_forge .af-rim { background: repeating-conic-gradient(from 6deg, #414e59 0deg 8deg, #93a1b2 8deg 10deg); }
.af--craft_talisman { --bw: 13%; --hc: rgba(160, 110, 230, .18); }
.af--craft_talisman .af-rim { background: conic-gradient(from 160deg, #2c1f4e, #8a68c6 36%, #2c1f4e); }
.af--enc_recipe { --bw: 14%; --hc: rgba(120, 160, 220, .16); }
.af--enc_recipe .af-rim { background: repeating-conic-gradient(from 8deg, #2a3548 0deg 5deg, #8a6a30 5deg 6deg, #3a4558 6deg 12deg); }
.af--enc_arts { --bw: 12%; }
.af--enc_arts .af-rim { background: conic-gradient(from 40deg, #4a3a22, #c9ad72 40%, #4a3a22); }
.af--enc_skills { --bw: 12%; --hc: rgba(160, 110, 230, .12); }
.af--enc_skills .af-rim { background: conic-gradient(from 160deg, #2c1f4e, #c9ad72 40%, #2c1f4e); }
.af--enc_pets { --bw: 12%; --hc: rgba(80, 160, 90, .14); }
.af--enc_pets .af-rim { background: conic-gradient(from 40deg, #3f7f46, #c9ad72 36%, #2f5d33 78%, #3f7f46); }
.af--guard_vajra { --bw: 15%; --slotw: 84.5%; --hc: rgba(150, 110, 235, .30); }
.af--guard_vajra .af-rim { background: conic-gradient(from 140deg, #2e2258, #9a7ad4 18%, #d8b45a 38%, #5c4392 62%, #ffe9ad 78%, #2e2258); }

/* 身份 / 道侣 / 派系 */
.af--court_seal { --bw: 12%; }
.af--court_seal .af-rim { background: conic-gradient(from 214deg, #5e3c10, #dfba62 40%, #5e3c10); }
.af--trial_peak { --bw: 15%; --hc: rgba(255, 190, 84, .26); }
.af--trial_peak .af-rim { background: conic-gradient(from 214deg, #5e3c10, #cdd6ea 24%, #caa149 60%, #5e3c10); }
.af--divine_cloud { --bw: 12%; --hc: rgba(180, 200, 250, .18); }
.af--divine_cloud .af-rim { background: conic-gradient(from 250deg, #cdd6ea, #ffffff 36%, #9fadc9 78%, #cdd6ea); }
.af--lineage_plaque { --bw: 12%; }
.af--lineage_plaque .af-rim { background: conic-gradient(from 80deg, #6e5316, #e2bc74 40%, #6e5316); }
.af--apprentice_knot { --bw: 9%; }
.af--apprentice_knot .af-rim { background: conic-gradient(from 80deg, #8a6a30, #c9ad72 50%, #8a6a30); }
.af--faction_seal { --bw: 13%; }
.af--faction_seal .af-rim { background: conic-gradient(from 0deg, #cfa044 0 25%, #7dba78 25% 50%, #8a68c6 50% 75%, #f6f9ff 75% 100%); }
.af--bond_grow { --bw: 9%; --hc: rgba(232, 160, 180, .12); }
.af--bond_grow .af-rim { background: conic-gradient(from 200deg, #c9a0aa, #f3c4d0 40%, #c9a0aa); }
.af--bond_link { --bw: 12%; --hc: rgba(232, 160, 180, .16); }
.af--bond_link .af-rim { background: conic-gradient(from 200deg, #8a6870, #e8a0b4 36%, #7dba78 70%, #8a6870); }
.af--bond_unity { --bw: 14%; --hc: rgba(232, 160, 180, .22); }
.af--bond_unity .af-rim { background: conic-gradient(from 200deg, #6a3040, #f3c4d0 24%, #d8b45a 58%, #6a3040); }

/* 榜首族：玉金碑环 */
.af--rank_realm, .af--rank_wealth, .af--rank_power, .af--rank_kill, .af--rank_death,
.af--rank_alchemy, .af--rank_forge, .af--rank_talisman, .af--rank_dungeon, .af--rank_popular,
.af--rank_fate, .af--rank_guard, .af--rank_hire, .af--rank_infamy, .af--rank_samsara, .af--rank_age {
    --bw: 14%; --slotw: 85%; --hc: rgba(232, 198, 108, .20);
}
.af--rank_realm .af-rim { background: conic-gradient(from 214deg, #5e3c10, #cdd6ea 30%, #caa149 70%, #5e3c10); }
.af--rank_wealth .af-rim { background: conic-gradient(from 214deg, #5e3c10, #ffe9ad 34%, #5e3c10); }
.af--rank_power .af-rim { background: conic-gradient(from 300deg, #3a1408, #ffc257 32%, #5e3c10 74%, #3a1408); }
.af--rank_kill .af-rim { background: conic-gradient(from 12deg, #1f1016, #a01226 36%, #1f1016); }
.af--rank_death { --bw: 11%; }
.af--rank_death .af-rim { background: repeating-conic-gradient(from 6deg, #3a3030 0deg 8deg, #8a6a30 8deg 9deg); }
.af--rank_alchemy .af-rim { background: conic-gradient(from 300deg, #3a1408, #e2571f 30%, #2c1f4e 72%, #3a1408); }
.af--rank_forge .af-rim { background: repeating-conic-gradient(from 4deg, #414e59 0deg 7deg, #dfba62 7deg 9deg); }
.af--rank_talisman .af-rim { background: conic-gradient(from 160deg, #2c1f4e, #dfba62 34%, #2c1f4e); }
.af--rank_dungeon .af-rim { background: conic-gradient(from 80deg, #1a2430, #97a7b3 36%, #5e3c10 78%, #1a2430); }
.af--rank_popular .af-rim { background: conic-gradient(from 250deg, #9fadc9, #ffe9ad 40%, #cdd6ea); }
.af--rank_fate .af-rim { background: conic-gradient(from 214deg, #5e3c10, #f3c4d0 28%, #dfba62 70%, #5e3c10); }
.af--rank_guard .af-rim { background: conic-gradient(from 140deg, #2e2258, #dfba62 40%, #2e2258); }
.af--rank_hire .af-rim { background: conic-gradient(from 214deg, #5e3c10, #8a68c6 40%, #5e3c10); }
.af--rank_infamy { --hc: rgba(160, 18, 38, .20); }
.af--rank_infamy .af-rim { background: conic-gradient(from 12deg, #14080c, #a01226 28%, #2a141c 70%, #14080c); }
.af--rank_samsara .af-rim { background: conic-gradient(from 214deg, #5e3c10, #9a7ad4 30%, #dfba62 68%, #5e3c10); }
.af--rank_age .af-rim { background: conic-gradient(from 40deg, #3f7f46, #dfba62 36%, #2f5d33 78%, #3f7f46); }

.af--tower_keep .af-shine,
.af--tower_discern .af-shine,
.af--tower_invert .af-shine,
.af--guess_eye .af-shine,
.af--invite_lantern .af-shine,
.af--xc_god .af-shine,
.af--xc_sage .af-shine,
.af--xc_whale .af-shine,
.af--xc_soul .af-shine,
.af--guard_vajra .af-shine,
.af--trial_peak .af-shine,
.af--divine_cloud .af-shine,
.af--bond_unity .af-shine,
.af--rank_realm .af-shine,
.af--rank_wealth .af-shine,
.af--rank_popular .af-shine,
.af--rank_samsara .af-shine {
    opacity: 1;
    background: conic-gradient(from 0deg, transparent 0 74%, rgba(255, 245, 206, .7) 84%, transparent 92%);
    animation: afSpin 7s linear infinite;
}

/* ========== 动效 ========== */
@keyframes afSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes afOrbit {
    from { transform: rotate(var(--pa, 0deg)) translateY(var(--pr, -46.5em)); }
    to { transform: rotate(calc(var(--pa, 0deg) + 360deg)) translateY(var(--pr, -46.5em)); }
}
@keyframes afBreath { from { opacity: .65; transform: scale(1); } to { opacity: 1; transform: scale(1.055); } }
@keyframes afTwinkle { from { opacity: .38; } to { opacity: 1; } }
@keyframes afFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-.9em); }
}
@keyframes afDrift {
    from { transform: translate(0, 0) scale(1); opacity: .45; }
    to { transform: translate(-16px, 24px) scale(1.28); opacity: .9; }
}
@keyframes afPulse { from { transform: translateX(-50%) scale(1); opacity: .85; } to { transform: translateX(-50%) scale(1.12); opacity: 1; } }
@keyframes afFlare {
    0%, 100% { transform: translateX(-50%) scale(.92); opacity: .65; }
    8% { transform: translateX(-50%) scale(1.1); opacity: 1; }
    12% { transform: translateX(-50%) scale(.98); opacity: .75; }
    20% { transform: translateX(-50%) scale(1.14); opacity: 1; }
    34% { transform: translateX(-50%) scale(.94); opacity: .7; }
    52% { transform: translateX(-50%) scale(1.06); opacity: .9; }
}
@keyframes afBlink {
    0%, 100% { opacity: .55; } 6% { opacity: 1; } 9% { opacity: .4; } 14% { opacity: .95; }
    22% { opacity: .5; } 30% { opacity: 1; } 38% { opacity: .55; } 60% { opacity: .85; } 78% { opacity: .5; }
}

/* ========== 尺寸动效分档:≤44px 静态帧(聊天/好友列表性能保护) ========== */
.af--static::before { animation: none !important; }
.af--static .af-shine { opacity: 0 !important; animation: none !important; }
.af--static .af-bokeh,
.af--static .af-sp { display: none; }
.af--static .af-tip-crown,
.af--static .af-tip-bolt,
.af--static .af-pearl,
.af--static .af-pearlw,
.af--static .af-core { animation: none !important; }
.af--static .af-bloom { opacity: .55; }

/* ========== 系统减动效 ========== */
@media (prefers-reduced-motion: reduce) {
    .af,
    .af *,
    .af::before,
    .af *::before,
    .af *::after { animation: none !important; transition: none !important; }
    .af-shine { opacity: 0 !important; }
}

/* ========== 场景接缝:佩戴框时放开宿主容器的裁切与原生边框 ========== */
/* 宿主一律转为定位祖先,af 的 absolute 以头像中心为基准 */
button.chat-msg-avatar.has-frame,
button.pf-portrait.has-frame,
.friend-card__avatar.has-frame { position: relative; }
/* 聊天:头像 button 32px 圆角方 → 框态转圆、放开溢出;月卡金边光效让位 */
button.chat-msg-avatar.has-frame {
    overflow: visible !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}
button.chat-msg-avatar.has-frame.chat-msg-avatar--vip::before,
button.chat-msg-avatar.has-frame.chat-msg-avatar--vip::after { display: none; }
/* 好友:内层 face span 由框的 af-face 替代,原 span 不再输出 */
/* 档案:48px 圆形 button,放开溢出 */
button.pf-portrait.has-frame {
    overflow: visible;
    border-color: transparent;
    background: transparent;
}
button.pf-portrait.has-frame img { border-radius: 50%; }

/* ========== 内联模式:宿主为普通容器(非头像 button)时按文档流占位 ========== */
.af--inline {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    flex: none;
    display: inline-block;
}

/* 称号面板 · 佩戴 hero:框与文字横排 */
.tt-hero--framed {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    text-align: left;
}
.tt-hero--framed .tt-hero-frame { flex: none; overflow: visible; }
.tt-hero--framed .tt-hero-main { flex: 1; min-width: 0; }
.tt-hero--framed .tt-hero-sub { margin-left: 0; }

/* 称号名录 · 迷你框示意列 */
.tt-card-frame {
    flex: none;
    margin-right: var(--space-8);
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
    overflow: visible;
}

/* 宿主里常有 `img{width:100%}`，会把切图压成头像方块。切图与脸圆各自锁几何。 */
button.chat-msg-avatar.has-frame .af-art,
button.pf-portrait.has-frame .af-art,
.friend-card__avatar.has-frame .af-art,
.cgm-av.has-frame .af-art {
    left: 50%;
    top: 50%;
    width: calc(var(--s, 64px) * 1.6875);
    height: calc(var(--s, 64px) * 1.6875);
    transform: translate(-50%, -50%);
    object-fit: contain;
    object-position: 50% 50%;
    border-radius: 0;
}
button.chat-msg-avatar.has-frame .af-face img,
button.pf-portrait.has-frame .af-face img,
.friend-card__avatar.has-frame .af-face img,
.cgm-av.has-frame .af-face img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
body.game-page .chat-msg:has(.has-frame),
.friend-card:has(.has-frame),
.cgm-row:has(.has-frame) {
    overflow: visible;
}
.cgm-av.has-frame {
    position: relative;
    overflow: visible;
    border-color: transparent;
    background: transparent;
}