.badge-frame-root{display:inline-flex;overflow:visible}.badge-frame-face,.badge-frame-root{align-items:center;justify-content:center;border-radius:50%}.badge-frame-face{display:flex;width:100%;height:100%;position:relative;z-index:2;background:linear-gradient(145deg,#e7e5e4,#d6d3d1);transition:background .3s ease}.badge-frame--earned .badge-frame-face{background:linear-gradient(145deg,color-mix(in srgb,var(--icon-color) 85%,#fff),var(--icon-color))}.badge-frame--locked{opacity:.9}.badge-frame--locked .badge-frame-face{background:#e5e7eb;border:2px dashed rgba(156,163,175,.5)}.badge-frame--locked .badge-frame__icon{filter:grayscale(1);opacity:.25}.badge-frame--earned.badge-frame--rarity-common{box-shadow:0 0 0 2px var(--icon-color);animation:badgeCommonBreath 4.2s ease-in-out infinite}.badge-frame--earned.badge-frame--rarity-rare{position:relative;box-shadow:0 0 0 2px #3b82f6,0 0 10px rgba(59,130,246,.3);animation:badgeRarePulse 2.5s ease-in-out infinite}.badge-frame--earned.badge-frame--rarity-rare:before{content:"";position:absolute;inset:-3px;border-radius:50%;z-index:1;background:conic-gradient(from 0deg,rgba(59,130,246,.05),rgba(147,197,253,.85),rgba(59,130,246,.05),rgba(59,130,246,.05));animation:badgeRareSpin 4.2s linear infinite}@keyframes badgeRarePulse{0%,to{box-shadow:0 0 0 2px #3b82f6,0 0 6px rgba(59,130,246,.15)}50%{box-shadow:0 0 0 2px #3b82f6,0 0 18px rgba(59,130,246,.5),0 0 36px rgba(59,130,246,.15)}}@keyframes badgeCommonBreath{0%,to{box-shadow:0 0 0 2px color-mix(in srgb,var(--icon-color) 78%,#fff);transform:translateY(0)}50%{box-shadow:0 0 0 2px color-mix(in srgb,var(--icon-color) 88%,#fff),0 0 10px color-mix(in srgb,var(--icon-color) 24%,transparent);transform:translateY(-1px)}}@keyframes badgeRareSpin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.badge-frame--earned.badge-frame--rarity-epic{box-shadow:0 0 12px rgba(168,85,247,.3)}.badge-frame--earned.badge-frame--rarity-epic:before{content:"";position:absolute;inset:-3px;border-radius:50%;z-index:1;background:linear-gradient(60deg,#a855f7,#6366f1,#8b5cf6,#a855f7,#6366f1,#8b5cf6,#a855f7);background-size:300% 300%;animation:badgeEpicShift 3.5s ease infinite,badgeEpicSpin 7.5s linear infinite}.badge-frame--earned.badge-frame--rarity-epic:after{content:"";position:absolute;inset:-3px;border-radius:50%;z-index:1;background:conic-gradient(from 0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.7),hsla(0,0%,100%,0),hsla(0,0%,100%,0));mix-blend-mode:screen;animation:badgeEpicPulse 2.9s ease-in-out infinite,badgeEpicSheen 2.4s linear infinite}@keyframes badgeEpicShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes badgeEpicPulse{0%,to{box-shadow:0 0 8px rgba(168,85,247,.2)}50%{box-shadow:0 0 20px rgba(168,85,247,.5)}}@keyframes badgeEpicSpin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes badgeEpicSheen{0%{transform:rotate(0deg);opacity:.18}50%{opacity:.42}to{transform:rotate(1turn);opacity:.18}}.badge-frame--earned.badge-frame--rarity-legendary{box-shadow:0 0 16px rgba(245,158,11,.4),0 0 32px rgba(245,158,11,.15)}.badge-frame--earned.badge-frame--rarity-legendary:before{content:"";position:absolute;inset:-4px;border-radius:50%;z-index:1;background:linear-gradient(60deg,#fbbf24,#f59e0b,#d97706,#b45309,#d97706,#f59e0b,#fbbf24,#f59e0b,#d97706);background-size:400% 400%;animation:badgeLegendaryShift 2.8s linear infinite,badgeLegendarySpin 5.8s linear infinite}.badge-frame--earned.badge-frame--rarity-legendary:after{content:"";position:absolute;inset:-4px;border-radius:50%;z-index:1;background:conic-gradient(from 0deg,hsla(0,0%,100%,0),rgba(255,244,200,.85),hsla(0,0%,100%,0),hsla(0,0%,100%,0));mix-blend-mode:screen;animation:badgeLegendaryGlow 2.4s ease-in-out infinite,badgeLegendarySheen 1.9s linear infinite}@keyframes badgeLegendaryShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes badgeLegendaryGlow{0%,to{box-shadow:0 0 10px rgba(251,191,36,.3),0 0 20px rgba(251,191,36,.1)}50%{box-shadow:0 0 20px rgba(251,191,36,.6),0 0 40px rgba(251,191,36,.25),0 0 60px rgba(251,191,36,.1)}}@keyframes badgeLegendarySpin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes badgeLegendarySheen{0%{transform:rotate(0deg);opacity:.25}50%{opacity:.62}to{transform:rotate(1turn);opacity:.25}}.badge-just-earned{animation:badgeUnlock .6s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes badgeUnlock{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}