.tier-shield{display:inline-flex;align-items:center;justify-content:center;vertical-align:-7px;width:30px;height:30px;margin:0 0 0 4px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,filter .18s ease}
.tier-shield svg{display:block;width:26px;height:26px;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3))}
.tier-shield:hover{transform:scale(1.14);filter:brightness(1.12)}
.tier-shield:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}
.tier-shield.tf-pop{animation:tfPop .8s cubic-bezier(.2,1.4,.4,1)}
.tier-fx{position:fixed;left:0;top:0;width:0;height:0;z-index:9000;pointer-events:none;overflow:visible}
.tier-fx canvas{position:absolute;left:calc(var(--x) - var(--cs) / 2);top:calc(var(--y) - var(--cs) / 2);width:var(--cs);height:var(--cs)}
.tier-fx .tf-dim{position:absolute;left:var(--x);top:var(--y);width:calc(var(--rr) * 1.7);height:calc(var(--rr) * 1.7);margin:calc(var(--rr) * -.85) 0 0 calc(var(--rr) * -.85);border-radius:50%;opacity:0;scale:.4;
  background:radial-gradient(closest-side,rgba(var(--deep),.9),rgba(var(--deep),.72) 36%,rgba(var(--deep),.32) 66%,transparent);transition:opacity .3s ease,scale .7s cubic-bezier(.16,1,.3,1)}
.tier-fx .tf-badge{position:absolute;left:var(--x);top:var(--y);width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.9)) drop-shadow(0 0 10px rgba(var(--hi),1)) drop-shadow(0 0 22px rgba(var(--main),.9))}
.tier-fx .tf-badge svg{display:block;width:26px;height:26px}
.tier-fx .tf-rays{position:absolute;left:var(--x);top:var(--y);width:var(--rr);height:var(--rr);margin:calc(var(--rr) / -2) 0 0 calc(var(--rr) / -2);border-radius:50%;opacity:0;scale:.15;
  background:repeating-conic-gradient(from 0deg,rgba(var(--hi),0) 0deg 4deg,rgba(var(--hi),.6) 7.5deg,rgba(var(--hi),0) 11deg 22.5deg);
  -webkit-mask:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.8) 34%,transparent 100%);mask:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.8) 34%,transparent 100%);
  transition:opacity .3s ease,scale .8s cubic-bezier(.16,1,.3,1);animation:tfSpin 5s linear infinite}
.tier-fx .tf-glow{position:absolute;left:var(--x);top:var(--y);width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;opacity:0;scale:.3;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(var(--hi),.6) 28%,rgba(var(--main),.2) 60%,transparent);transition:opacity .25s ease,scale .6s cubic-bezier(.16,1,.3,1)}
.tier-fx .tf-flash{position:absolute;left:var(--x);top:var(--y);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;opacity:0;background:radial-gradient(closest-side,#fff,rgba(var(--hi),.9) 45%,transparent)}
.tier-fx .tf-name{position:absolute;left:var(--nx);top:calc(var(--y) - 96px);translate:-50% 12px;scale:.4;opacity:0;text-align:center;white-space:nowrap;
  transition:opacity .25s ease,translate .6s cubic-bezier(.2,1.6,.4,1),scale .6s cubic-bezier(.2,1.6,.4,1)}
.tier-fx.below .tf-name{top:calc(var(--y) + 40px)}
.tier-fx .tf-name i{display:block;margin:0 0 5px;font-style:normal;font-size:11px;font-weight:800;line-height:1;letter-spacing:.35em;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.9),0 0 8px rgba(var(--main),1),0 0 16px rgba(var(--hi),.95)}
.tier-fx .tf-name b{display:block;font-size:24px;font-weight:900;line-height:1.1;letter-spacing:.08em;color:#fff;-webkit-text-stroke:1px rgba(var(--main),.85);
  text-shadow:0 1px 0 rgba(var(--main),1),0 0 4px rgba(0,0,0,.85),0 0 12px rgba(var(--main),1),0 0 26px rgba(var(--hi),.95),0 0 52px rgba(var(--hi),.6)}
.tier-fx:not(.rays) .tf-rays{display:none}
.tier-fx:not(.rays2) .tf-rays-b{display:none}
.tier-fx .tf-rays-b{background:repeating-conic-gradient(from 11deg,rgba(var(--hi),0) 0deg 6deg,rgba(255,255,255,.5) 8.5deg,rgba(var(--hi),0) 11deg 30deg);animation:tfSpin 7s linear infinite reverse}
.tier-fx.r0 .tf-glow,.tier-fx.r1 .tf-glow{width:120px;height:120px;margin:-60px 0 0 -60px}
.tier-fx.r0 .tf-name i,.tier-fx.r1 .tf-name i,.tier-fx.r2 .tf-name i{display:none}
.tier-fx.r0 .tf-name b,.tier-fx.r1 .tf-name b{font-size:17px}
.tier-fx.r2 .tf-name b,.tier-fx.r3 .tf-name b,.tier-fx.r4 .tf-name b{font-size:20px}
.tier-fx.r8 .tf-name b,.tier-fx.r9 .tf-name b{font-size:27px}
.tier-fx.on .tf-dim{opacity:var(--dim);scale:1}
.tier-fx.on .tf-rays{opacity:1;scale:1}
.tier-fx.on .tf-glow{opacity:1;scale:1}
.tier-fx.on .tf-badge{opacity:1;animation:tfBadge 1.1s cubic-bezier(.2,1.3,.4,1) forwards}
.tier-fx.on .tf-flash{animation:tfFlash .65s ease-out both}
.tier-fx.on .tf-name{opacity:1;translate:-50% -4px;scale:1}
.tier-fx.tf-out .tf-dim,.tier-fx.tf-out .tf-rays,.tier-fx.tf-out .tf-glow{opacity:0;transition:opacity .6s ease}
.tier-fx.tf-out .tf-badge{animation:tfBadgeOut .55s ease forwards}
.tier-fx.tf-out .tf-name{opacity:0;translate:-50% -18px;transition:opacity .5s ease,translate .7s ease}
@keyframes tfSpin{to{rotate:360deg}}
@keyframes tfFlash{0%{opacity:1;scale:1}100%{opacity:0;scale:22}}
@keyframes tfBadge{0%{scale:1;rotate:0deg}20%{scale:calc(var(--bs) * 1.3);rotate:-10deg}38%{scale:calc(var(--bs) * .92);rotate:6deg}56%{scale:calc(var(--bs) * 1.05);rotate:-3deg}76%{scale:var(--bs);rotate:1deg}100%{scale:var(--bs);rotate:0deg}}
@keyframes tfBadgeOut{from{scale:var(--bs);opacity:1}to{scale:1;opacity:0}}
@keyframes tfPop{0%{transform:scale(1)}26%{transform:scale(1.8) rotate(-8deg);filter:brightness(1.8) drop-shadow(0 0 10px #fff)}56%{transform:scale(.9) rotate(4deg);filter:brightness(1.25)}100%{transform:scale(1) rotate(0);filter:none}}
@media (prefers-reduced-motion:reduce){.tier-fx .tf-rays,.tier-fx .tf-flash{display:none}.tier-fx.on .tf-badge{animation:none;scale:var(--bs)}.tier-fx.tf-out .tf-badge{animation:none;opacity:0}.tier-shield.tf-pop{animation:none}}