/* 风禾尽起 · 称号样式（徽章 .title.tb-xxx ；作战图名片 .m.star.ts-xxx） */

/* ---------- 徽章通用 ---------- */
.title{position:relative;display:inline-flex;align-items:center;gap:1px;font-size:11px;font-weight:900;letter-spacing:1px;padding:1px 6px;border-radius:999px;line-height:14px;white-space:nowrap;vertical-align:middle;
  border:1px solid rgba(255,215,140,.8);
  background:linear-gradient(90deg,#ff5fb7,#ffd36e,#7fe3ff,#c08bff,#ff5fb7);background-size:300% 100%;
  color:#2a0f24;text-shadow:0 0 4px rgba(255,255,255,.7);
  box-shadow:0 0 8px rgba(255,190,90,.7);animation:flow 2.2s linear infinite}
.title i,.title b{font-style:normal;display:inline-block;margin:0 1px}
.title em{font-style:normal;border-radius:3px;padding:0 3px;margin-right:3px;font-size:10px;text-shadow:none;letter-spacing:.5px}
.title b{color:#fff;font-weight:900;animation:twinkle 1.1s ease-in-out infinite}
.title b:last-child{animation-delay:.55s}
@keyframes flow{to{background-position:300% 0}}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(45deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.35)}30%{transform:scale(1)}45%{transform:scale(1.25)}}
@keyframes zap{0%,100%{opacity:1;transform:scale(1) rotate(0)}10%{opacity:.2}12%{opacity:1;transform:scale(1.3) rotate(-10deg)}50%{transform:scale(1) rotate(6deg)}}
@keyframes flame{0%{transform:scale(.85) rotate(-8deg)}100%{transform:scale(1.2) rotate(8deg)}}
@keyframes firebox{to{box-shadow:0 0 10px #ffa000,0 0 22px rgba(255,61,0,.9),inset 0 0 8px rgba(255,230,150,.7)}}
@keyframes neonflick{0%,18%,22%,60%,64%,100%{opacity:1}20%,62%{opacity:.35}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes shine{0%{background-position:-150% 0}60%,100%{background-position:250% 0}}
@keyframes pulse{0%,100%{box-shadow:0 0 6px rgba(255,0,40,.6)}50%{box-shadow:0 0 16px rgba(255,0,40,1),0 0 30px rgba(160,0,20,.7)}}

/* 樱花烂漫 */
.title.tb-sakura{background:linear-gradient(90deg,#ff9cc6,#ffd6e8,#ff9cc6);background-size:200% 100%;border-color:#fff0f6;color:#8a1d4f;text-shadow:0 0 3px #fff;box-shadow:0 0 8px rgba(255,150,200,.8)}
.title.tb-sakura .sp{animation:spin 3s linear infinite}
/* 喵喵萌宠 */
.title.tb-cat{background:linear-gradient(90deg,#fff3c4,#ffe1f0,#e3f1ff,#fff3c4);background-size:300% 100%;border-color:#ffffff;color:#7a4a2a;text-shadow:none;box-shadow:0 0 6px rgba(255,220,180,.8);border-radius:10px 10px 10px 2px}
.title.tb-cat .bn{animation:bounce .8s ease-in-out infinite}.title.tb-cat .bn.r{animation-delay:.4s}
/* 怦然心动 */
.title.tb-heart{background:linear-gradient(90deg,#ff3d7f,#ff8ab3,#ff3d7f);background-size:200% 100%;border-color:#ffd1e1;color:#fff;text-shadow:0 0 4px #b3004a;box-shadow:0 0 10px rgba(255,61,127,.8)}
.title.tb-heart .hb{animation:beat 1.2s ease-in-out infinite}
/* 冰霜之心 */
.title.tb-ice{background:linear-gradient(90deg,#9be7ff,#e9fbff,#7cc8ff,#e9fbff,#9be7ff);background-size:300% 100%;border-color:#ffffff;color:#0b3a66;text-shadow:0 0 4px #fff;box-shadow:0 0 10px rgba(140,220,255,.9),inset 0 0 6px rgba(255,255,255,.8)}
.title.tb-ice .sp{animation:spin 4s linear infinite;color:#fff;text-shadow:0 0 4px #4fc3ff}.title.tb-ice .sp.r{animation-direction:reverse}
/* 赛博霓虹 */
.title.tb-neon{background:#0b0614;border:1px solid #ff2bd6;color:#7ff9ff;text-shadow:0 0 4px #00f0ff,0 0 8px #00f0ff;box-shadow:0 0 6px #ff2bd6,inset 0 0 6px rgba(255,43,214,.6);animation:neonflick 2.6s linear infinite;border-radius:3px}
.title.tb-neon .nb{color:#ff2bd6;text-shadow:0 0 6px #ff2bd6;font-size:9px}
/* 星河璀璨 */
.title.tb-galaxy{background:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 70% 70%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 45% 20%,#ffe9a8 0 1px,transparent 1.5px),linear-gradient(90deg,#2a0a5e,#5b2bb5,#1b3d9e,#5b2bb5,#2a0a5e);
  background-size:30px 14px,24px 14px,40px 14px,300% 100%;border-color:#c9b3ff;color:#fff;text-shadow:0 0 6px #b48cff;box-shadow:0 0 10px rgba(150,110,255,.8)}
.title.tb-galaxy .tw{animation:twinkle 1.4s ease-in-out infinite;color:#ffe9a8}.title.tb-galaxy .tw.r{animation-delay:.7s}
/* 雷霆万钧 */
.title.tb-thunder{background:linear-gradient(90deg,#071a4a,#1f5fff,#9ff3ff,#1f5fff,#071a4a);background-size:300% 100%;border-color:#bff6ff;color:#fff;text-shadow:0 0 4px #00e5ff,0 0 8px #2979ff;box-shadow:0 0 8px #00e5ff,0 0 16px rgba(41,121,255,.7);animation:flow .9s linear infinite,neonflick 1.7s steps(1) infinite}
.title.tb-thunder .zp{animation:zap 1.1s steps(2) infinite;color:#ffee58;text-shadow:0 0 6px #ffee58}.title.tb-thunder .zp.r{animation-delay:.55s}
/* 血月杀神 */
.title.tb-blood{background:linear-gradient(90deg,#1a0004,#8b0012,#ff1e3c,#8b0012,#1a0004);background-size:300% 100%;border-color:#ff5a6e;color:#ffe3e6;text-shadow:0 0 4px #ff0028;animation:flow 2s linear infinite,pulse 1.2s ease-in-out infinite}
.title.tb-blood em{background:#000;color:#ff3049;border:1px solid #ff3049}
/* 龙魂觉醒 */
.title.tb-dragon{background:linear-gradient(90deg,#033d2e,#0c8a5c,#e8c46a,#0c8a5c,#033d2e);background-size:300% 100%;border-color:#f3d98b;color:#fff8de;text-shadow:0 0 4px #0a5c3e,0 0 2px #000;box-shadow:0 0 8px rgba(232,196,106,.8);border-radius:4px}
.title.tb-dragon .dg{animation:bounce 1.6s ease-in-out infinite}
/* 神兵冒火 */
.title.tb-fire{border:1px solid #ffcc66;color:#fff6d8;text-shadow:0 0 3px #ff3d00,0 0 6px #ff6a00;padding:1px 4px;
  background:linear-gradient(90deg,#7a0d00,#d63a00,#ff8f00,#d63a00,#7a0d00);background-size:300% 100%;
  box-shadow:0 0 6px #ff6a00,0 0 14px rgba(255,61,0,.7),inset 0 0 6px rgba(255,220,120,.5);
  animation:flow 1.4s linear infinite,firebox .3s ease-in-out infinite alternate}
.title.tb-fire em{background:#1a0500;color:#ffcc66}
.title.tb-fire .fl{animation:flame .35s ease-in-out infinite alternate;transform-origin:50% 100%}.title.tb-fire .fl.r{animation-delay:.17s}
/* FMVP 金冠 */
.title.tb-fmvp{background:linear-gradient(100deg,#6b4500 0%,#d4a017 25%,#fff4b8 45%,#ffd700 55%,#a87400 80%,#6b4500 100%);background-size:250% 100%;border:1px solid #fff2a8;color:#3a2400;text-shadow:0 1px 0 rgba(255,255,255,.6);
  box-shadow:0 0 8px rgba(255,215,0,.9),0 0 18px rgba(255,170,0,.6);animation:shine 2.2s ease-in-out infinite;border-radius:4px}
.title.tb-fmvp em{background:linear-gradient(180deg,#1a1205,#000);color:#ffd700;border:1px solid #ffd700;font-weight:900;font-style:italic}
.title.tb-fmvp .cr{animation:bounce 1.2s ease-in-out infinite;filter:drop-shadow(0 0 3px #ffd700)}

/* ---------- 作战图名片特效 ---------- */
.m.star{background:linear-gradient(120deg,#5b2f86,#7d3a8f 45%,#8a3f7d);
  box-shadow:0 0 0 1px rgba(255,170,230,.55),0 0 14px rgba(255,120,210,.35);animation:glow 2.4s ease-in-out infinite}
.m.star::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  background-size:250% 100%;animation:sweep 2.8s linear infinite}
.m.star .nm{background:linear-gradient(90deg,#ffd6f2,#fff,#ffd6f2);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes sweep{from{background-position:150% 0}to{background-position:-100% 0}}
@keyframes glow{0%,100%{box-shadow:0 0 0 1px rgba(255,170,230,.55),0 0 10px rgba(255,120,210,.25)}50%{box-shadow:0 0 0 1px rgba(255,215,140,.9),0 0 20px rgba(255,170,90,.55)}}

.m.star.ts-sakura{background:linear-gradient(135deg,#a8406f,#e07aa5 55%,#f3a6c4);box-shadow:0 0 0 1px #ffd0e4,0 0 14px rgba(255,140,190,.6)}
.m.star.ts-sakura::after{background:none;content:"🌸   🌸     🌸";font-size:10px;letter-spacing:6px;white-space:pre;opacity:.65;top:-14px;animation:petal 4s linear infinite}
@keyframes petal{to{transform:translate(-20px,110px) rotate(25deg)}}
.m.star.ts-sakura .nm{background:none;color:#fff;text-shadow:0 0 4px #c2185b}
.m.star.ts-cat{background:linear-gradient(135deg,#8a6a52,#c99a74 60%,#e7b98f);box-shadow:0 0 0 1px #fff3c4,0 0 12px rgba(255,220,170,.5);animation:none}
.m.star.ts-cat::after{background:radial-gradient(circle,rgba(255,255,255,.18) 2px,transparent 3px) 0 0/16px 16px;animation:none}
.m.star.ts-cat .nm{background:none;color:#fffaf0;text-shadow:0 1px 2px #5a3a22}
.m.star.ts-heart{background:linear-gradient(135deg,#7a0a35,#d81b60 60%,#ff5e93);animation:heartglow 1.2s ease-in-out infinite}
@keyframes heartglow{0%,100%{box-shadow:0 0 0 1px #ffb3cc,0 0 8px rgba(255,61,127,.5)}20%{box-shadow:0 0 0 1px #fff,0 0 20px rgba(255,61,127,1)}}
.m.star.ts-heart .nm{background:none;color:#fff;text-shadow:0 0 6px #ff3d7f}
.m.star.ts-ice{background:linear-gradient(135deg,#0d3b66,#2a7fbf 55%,#8fd3ff);box-shadow:0 0 0 1px #d8f6ff,0 0 16px rgba(140,220,255,.7);animation:none}
.m.star.ts-ice .nm{background:linear-gradient(90deg,#e9fbff,#fff,#bfefff);-webkit-background-clip:text;background-clip:text;color:transparent}
.m.star.ts-neon{background:#0b0614;box-shadow:0 0 0 1px #ff2bd6,0 0 12px #ff2bd6,inset 0 0 12px rgba(0,240,255,.35);animation:hue 6s linear infinite}
.m.star.ts-neon::after{background:repeating-linear-gradient(0deg,rgba(0,240,255,.08) 0 1px,transparent 1px 3px);animation:none}
.m.star.ts-neon .nm{background:none;color:#7ff9ff;text-shadow:0 0 4px #00f0ff,0 0 10px #00f0ff}
.m.star.ts-galaxy{background:radial-gradient(circle at 15% 30%,#fff 0 1px,transparent 2px),radial-gradient(circle at 80% 60%,#fff 0 1px,transparent 2px),radial-gradient(circle at 55% 85%,#ffe9a8 0 1px,transparent 2px),radial-gradient(circle at 35% 70%,#cfc 0 .8px,transparent 1.6px),linear-gradient(135deg,#1a0640,#4a1a9e 50%,#1b3d9e);
  background-size:40px 30px,55px 40px,35px 28px,25px 22px,100% 100%;box-shadow:0 0 0 1px #c9b3ff,0 0 16px rgba(150,110,255,.6);animation:none}
.m.star.ts-galaxy .nm{background:linear-gradient(90deg,#ffe9a8,#fff,#c9b3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.m.star.ts-thunder{background:linear-gradient(135deg,#020b26,#0a2a7a 55%,#103c9e);animation:thunderglow 2.2s steps(1) infinite}
.m.star.ts-thunder::after{background:linear-gradient(115deg,transparent 46%,rgba(190,245,255,.9) 48%,transparent 50%,transparent 52%,rgba(190,245,255,.7) 53%,transparent 55%);background-size:100% 100%;animation:bolt 2.2s steps(1) infinite}
@keyframes thunderglow{0%,100%{box-shadow:0 0 0 1px #4fc3ff,0 0 10px rgba(0,229,255,.4)}8%{box-shadow:0 0 0 2px #fff,0 0 28px #00e5ff}12%{box-shadow:0 0 0 1px #4fc3ff,0 0 10px rgba(0,229,255,.4)}15%{box-shadow:0 0 0 2px #fff,0 0 24px #00e5ff}}
@keyframes bolt{0%,100%{opacity:0}8%,15%{opacity:1}10%,18%{opacity:0}}
.m.star.ts-thunder .nm{background:none;color:#e6fbff;text-shadow:0 0 6px #00e5ff}
.m.star.ts-blood{background:linear-gradient(135deg,#0a0002,#4a0010 55%,#8b0012);animation:pulse 1.2s ease-in-out infinite}
.m.star.ts-blood::after{background:radial-gradient(circle at 85% 20%,rgba(255,40,60,.5),transparent 40%);animation:none}
.m.star.ts-blood .nm{background:none;color:#ffe3e6;text-shadow:0 0 6px #ff0028}
.m.star.ts-dragon{background:linear-gradient(135deg,#022a20,#065c40 55%,#0c8a5c);box-shadow:0 0 0 1px #e8c46a,0 0 14px rgba(232,196,106,.5);animation:none}
.m.star.ts-dragon .nm{background:linear-gradient(90deg,#fff3c4,#e8c46a,#fff3c4);-webkit-background-clip:text;background-clip:text;color:transparent}
.m.star.ts-fmvp{background:linear-gradient(135deg,#120c00,#3d2a00 50%,#6b4a00);box-shadow:0 0 0 2px #ffd700,0 0 22px rgba(255,200,0,.75);animation:none}
.m.star.ts-fmvp::after{background:linear-gradient(105deg,transparent 35%,rgba(255,240,170,.45) 50%,transparent 65%);background-size:250% 100%;animation:sweep 2.2s linear infinite}
.m.star.ts-fmvp .nm{background:linear-gradient(180deg,#fff7c2,#ffd700 60%,#c48a00);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 3px rgba(255,215,0,.7))}

/* ========= 神兵称号：冒火 ========= */
.m.star.ts-fire{background:linear-gradient(0deg,#4a1206 0%,#2a0f0a 45%,#1c1414 100%);
  animation:blaze 1.1s ease-in-out infinite}
.m.star.ts-fire::before{background:linear-gradient(0deg,#ff3d00,#ffb300)}
.m.star.ts-fire::after{ /* 底部火舌 */
  background:radial-gradient(ellipse 60% 70% at 20% 120%,rgba(255,90,0,.55),transparent 70%),
             radial-gradient(ellipse 50% 60% at 60% 125%,rgba(255,170,0,.45),transparent 70%),
             radial-gradient(ellipse 40% 60% at 90% 120%,rgba(255,60,0,.5),transparent 70%);
  background-size:100% 100%;animation:flicker .45s steps(3) infinite alternate}
.m.star.ts-fire .nm{background:linear-gradient(0deg,#ff6a00,#ffd54f 60%,#fff8e1);-webkit-background-clip:text;color:transparent;
  filter:drop-shadow(0 0 4px rgba(255,120,0,.8))}
.ember{position:absolute;bottom:2px;width:3px;height:3px;border-radius:50%;background:#ffcc33;box-shadow:0 0 6px 2px #ff6a00;
  pointer-events:none;opacity:0;animation:rise 1.6s ease-out infinite}
.ember.e1{left:22%}.ember.e2{left:48%;animation-delay:.5s}.ember.e3{left:70%;animation-delay:.9s}.ember.e4{left:88%;animation-delay:1.3s;width:2px;height:2px}
@keyframes blaze{0%,100%{box-shadow:0 0 0 1px rgba(255,140,0,.8),0 0 12px rgba(255,80,0,.55),0 -4px 18px rgba(255,60,0,.35)}
  50%{box-shadow:0 0 0 1px rgba(255,210,90,1),0 0 22px rgba(255,110,0,.85),0 -8px 26px rgba(255,80,0,.55)}}
@keyframes flicker{0%{opacity:.75;transform:scaleY(1)}100%{opacity:1;transform:scaleY(1.12)}}
@keyframes firebox{to{box-shadow:0 0 10px #ffa000,0 0 22px rgba(255,61,0,.9),inset 0 0 8px rgba(255,230,150,.7)}}
@keyframes flame{0%{transform:scale(.85) rotate(-8deg)}100%{transform:scale(1.2) rotate(8deg)}}
@keyframes rise{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translate(4px,-58px) scale(.4)}}