@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin-angle { to { --angle: 360deg; } }

.avatar.framed { border-color: transparent; isolation: isolate; }
.avatar.framed::before,
.avatar.framed::after {
  content: ""; position: absolute; border-radius: 0; pointer-events: none;
  inset: calc(var(--size) * -0.11);
}
.avatar.framed::before {
  padding: calc(var(--size) * 0.075);
  background: var(--ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
}
.avatar.framed::after { z-index: -1; box-shadow: 0 0 calc(var(--size) * .28) var(--glow, transparent); }
.avatar .dot { z-index: 3; }

.frame-silver_frame { --ring: linear-gradient(135deg, #ffffff, #94a3b8 30%, #f1f5f9 50%, #64748b 75%, #e2e8f0); --glow: #cbd5e144; }
.frame-emerald_frame {
  --ring: conic-gradient(from var(--angle), #064e3b, #34d399, #a7f3d0, #10b981, #064e3b);
  --glow: #10b98177;
  animation: spin-angle 8s linear infinite;
}
.frame-crystal_frame {
  --ring: conic-gradient(from var(--angle), #e0f2fe, #7dd3fc, #ffffff, #38bdf8, #e0f2fe, #bae6fd, #ffffff, #e0f2fe);
  --glow: #7dd3fcaa;
  animation: spin-angle 5s linear infinite;
}
.frame-crystal_frame::after { animation: frost 3s ease-in-out infinite; }
@keyframes frost { 50% { box-shadow: 0 0 calc(var(--size) * .4) #bae6fdcc; } }
.frame-flame_frame {
  --ring: conic-gradient(from var(--angle), #7f1d1d, #f97316, #fde047, #ef4444, #f97316, #7f1d1d);
  --glow: #f97316aa;
  animation: spin-angle 2.4s linear infinite;
}
.frame-flame_frame::after { animation: flicker 1.1s ease-in-out infinite alternate; }
@keyframes flicker {
  0% { box-shadow: 0 0 calc(var(--size) * .22) #f97316aa, 0 calc(var(--size) * -.08) calc(var(--size) * .3) #ef444455; }
  100% { box-shadow: 0 0 calc(var(--size) * .36) #fde04799, 0 calc(var(--size) * -.14) calc(var(--size) * .4) #f9731677; }
}
.frame-aurora_frame {
  --ring: conic-gradient(from var(--angle), #f472b6, #a78bfa, #60a5fa, #34d399, #fde047, #fb923c, #f472b6);
  --glow: #a78bfaaa;
  animation: spin-angle 4s linear infinite;
}
.frame-aurora_frame::after { animation: hue 6s linear infinite; }
@keyframes hue { to { filter: hue-rotate(360deg); } }
.frame-imperial_gold {
  --ring: conic-gradient(from var(--angle), #fff7cc, #f5c96a, #b8860b, #fff3b0, #d4a017, #fff7cc);
  --glow: #f5c96acc;
  animation: spin-angle 5s linear infinite;
}

.frame-season_bronze_frame { --ring: repeating-conic-gradient(from 45deg, #cd7f32 0 25%, #8a4f1d 0 50%); --glow: #cd7f3255; }
.frame-season_silver_frame { --ring: repeating-conic-gradient(from 45deg, #f1f5f9 0 25%, #64748b 0 50%); --glow: #cbd5e166; }
.frame-season_gold_frame { --ring: repeating-conic-gradient(from var(--angle), #ffe94d 0 12.5%, #b8860b 0 25%); --glow: #ffe94d88; animation: spin-angle 6s steps(16) infinite; }
.frame-season_champion_frame {
  --ring: repeating-conic-gradient(from var(--angle), #ff2bd6 0 8.33%, #ffe94d 0 16.66%, #22e4ff 0 25%);
  --glow: #ff2bd6aa;
  animation: spin-angle 3s steps(24) infinite;
}

.banner-banner_season_podium {
  background:
    linear-gradient(0deg, #ffe94d 0 6px, transparent 6px) 50% 100% / 22% 46% no-repeat,
    linear-gradient(0deg, #c9c1ee 0 6px, transparent 6px) 28% 100% / 18% 32% no-repeat,
    linear-gradient(0deg, #cd7f32 0 6px, transparent 6px) 72% 100% / 18% 22% no-repeat,
    linear-gradient(180deg, #2a0b5c, #120a2e 70%, #05040d);
}
.banner-banner_season_podium::after {
  background:
    radial-gradient(2px 2px at 20% 30%, #ffe94d, transparent), radial-gradient(2px 2px at 70% 20%, #ff2bd6, transparent),
    radial-gradient(2px 2px at 85% 45%, #22e4ff, transparent), radial-gradient(2px 2px at 40% 15%, #fff, transparent);
  animation: sheen 6s steps(12) infinite;
}

.avatar > .role-mark {
  position: absolute; z-index: 4; left: 50%; top: calc(var(--size) * -0.36); pointer-events: none;
  width: calc(var(--size) * 0.46); height: calc(var(--size) * 0.34); transform: translateX(-50%) rotate(-10deg);
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 4px #0009);
}
.avatar > .role-mark.sword { width: calc(var(--size) * 0.42); height: calc(var(--size) * 0.42); top: calc(var(--size) * -0.4); transform: translateX(-50%); }

.avatar.xs > .role-mark { min-width: 13px; min-height: 10px; top: -10px; }
.avatar.xs > .role-mark.sword { min-height: 13px; top: -12px; }

.name[class*="fx-"]:not(.fx-fx_none) { font-weight: 800; }

.fx-clip { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none !important; }

.fx-fx_ocean { background-image: linear-gradient(90deg, #22d3ee, #3b82f6, #22d3ee); background-size: 200% 100%; animation: slide-bg 6s linear infinite; }
.fx-fx_toxic { background-image: linear-gradient(90deg, #a3e635, #22c55e, #d9f99d, #a3e635); background-size: 200% 100%; animation: slide-bg 4s linear infinite; filter: drop-shadow(0 0 6px #84cc1666); }
.fx-fx_ember { background-image: linear-gradient(0deg, #b91c1c, #f97316 40%, #fde047 80%, #fff7ed); background-size: 100% 220%; animation: rise-bg 1.6s ease-in-out infinite alternate; filter: drop-shadow(0 0 7px #f9731688); }
.fx-fx_neon { color: #ffd6f5 !important; -webkit-text-fill-color: #ffd6f5; text-shadow: 0 0 4px #f0abfc, 0 0 10px #e879f9, 0 0 20px #d946ef; animation: neon 3s infinite; }
.fx-fx_glitch { color: #f8fafc !important; -webkit-text-fill-color: #f8fafc; animation: glitch 2.2s steps(1) infinite; }
.fx-fx_aurora { background-image: linear-gradient(90deg, #34d399, #22d3ee, #a78bfa, #f472b6, #34d399); background-size: 300% 100%; animation: slide-bg 7s linear infinite; filter: drop-shadow(0 0 8px #22d3ee55); }

.fx-fx_imperial {
  background-image: linear-gradient(100deg, #d4a017 0%, #ffd36b 22%, #ffffff 38%, #ffd36b 54%, #d4a017 72%, #fff3c4 86%, #d4a017 100%);
  background-size: 200% 100%;
  background-repeat: repeat-x;
  animation: imperial-shine 3.2s linear infinite;
  filter: drop-shadow(0 0 6px #ffd36b88);
}
@keyframes imperial-shine { from { background-position: 0 0; } to { background-position: -200% 0; } }
@keyframes slide-bg { to { background-position: -200% 0; } }
@keyframes rise-bg { to { background-position: 0 100%; } }
@keyframes neon { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .55; } }
@keyframes glitch {
  0%, 100% { text-shadow: 1.5px 0 #ff00c8, -1.5px 0 #00fff9; }
  25% { text-shadow: -2px 1px #ff00c8, 2px -1px #00fff9; }
  50% { text-shadow: 2px -1px #ff00c8, -2px 0 #00fff9; transform: translateX(.5px); }
  75% { text-shadow: -1px 0 #ff00c8, 1px 1px #00fff9; transform: none; }
}
.name { display: inline-block; }

.banner { position: relative; overflow: hidden; background-color: #151938; isolation: isolate; }
.banner > * { position: relative; z-index: 1; }
.banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.banner-banner_default {
  background: linear-gradient(120deg, hsl(var(--hue, 250) 70% 42%), hsl(calc(var(--hue, 250) + 50) 65% 30%) 60%, hsl(calc(var(--hue, 250) + 90) 60% 22%));
}
.banner-banner_default::after { background: repeating-linear-gradient(135deg, #ffffff0a 0 14px, transparent 14px 28px); }

.banner-banner_sunset {
  background:
    linear-gradient(180deg, transparent 70%, #3b1d4a 70%, #1c0f2e 100%),
    radial-gradient(circle at 74% 70%, #fff6d5 0 16px, #ffd37a 17px 22px, #ff9e5e66 23px, transparent 64px),
    linear-gradient(180deg, #24104a 0%, #6d1b6b 32%, #d9465f 58%, #f8a35b 70%);
}
.banner-banner_sunset::after {
  inset: 70% 0 0 0;
  background:
    radial-gradient(ellipse 60px 3px at 74% 8px, #ffd37a99, transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 4px, #ffb36b1f 4px 5px);
}

.banner-banner_ocean { background: linear-gradient(180deg, #0e5a85 0%, #083a5c 45%, #031a2e 100%); }
.banner-banner_ocean::after {
  inset: -25%;
  background:
    repeating-linear-gradient(105deg, transparent 0 38px, #7dd3fc14 38px 54px),
    radial-gradient(60% 50% at 30% 110%, #22d3ee33, transparent 70%),
    repeating-radial-gradient(circle at 20% 120%, transparent 0 22px, #38bdf81c 23px 25px);
  animation: sway 12s ease-in-out infinite alternate;
}

.banner-banner_circuit {
  background:
    radial-gradient(70% 120% at 85% 50%, #0d948855, transparent 70%),
    linear-gradient(135deg, #021a17, #04302a);
}
.banner-banner_circuit::after {
  background:
    linear-gradient(90deg, transparent, #5eead433 45%, #a7f3d055 50%, #5eead433 55%, transparent) 0 0 / 300% 100% no-repeat,
    radial-gradient(circle at 1px 1px, #5eead4 0 2px, transparent 3px) 0 0 / 40px 40px,
    linear-gradient(90deg, #14b8a640 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(0deg, #14b8a640 1px, transparent 1px) 0 0 / 40px 40px;
  animation: circuit 6s linear infinite;
}
@keyframes circuit {
  from { background-position: 150% 0, 0 0, 0 0, 0 0; }
  to { background-position: -150% 0, 40px 0, 40px 0, 0 0; }
}

.banner-banner_sakura {
  background:
    radial-gradient(60% 90% at 85% 15%, #fbcfe877, transparent 70%),
    linear-gradient(135deg, #3b0a2f 0%, #8e2467 42%, #e0609e 75%, #f9b8d6 100%);
}
.banner-banner_sakura::after {
  inset: -60px;
  background:
    radial-gradient(ellipse 7px 4px at 30% 40%, #ffe4f0 0 45%, transparent 70%) 0 0 / 90px 80px,
    radial-gradient(ellipse 5px 3px at 70% 20%, #fff1f7 0 45%, transparent 70%) 0 0 / 120px 100px,
    radial-gradient(ellipse 6px 4px at 50% 70%, #ffd1e6 0 45%, transparent 70%) 0 0 / 150px 130px;
  animation: petals 14s linear infinite;
}
@keyframes petals { to { background-position: 90px 160px, -120px 200px, 150px 260px; } }

.banner-banner_nebula {
  background:
    radial-gradient(1.5px 1.5px at 12% 30%, #fff, transparent), radial-gradient(1px 1px at 42% 70%, #fffd, transparent),
    radial-gradient(1.5px 1.5px at 68% 22%, #fff, transparent), radial-gradient(1px 1px at 86% 64%, #fffc, transparent),
    radial-gradient(1px 1px at 25% 85%, #fffb, transparent), radial-gradient(1.5px 1.5px at 93% 15%, #fff, transparent),
    linear-gradient(135deg, #0b0620, #150b33 50%, #0a0a24);
}
.banner-banner_nebula::after {
  inset: -30%;
  background:
    radial-gradient(35% 45% at 30% 55%, #8b5cf699, transparent 70%),
    radial-gradient(30% 40% at 65% 40%, #ec489988, transparent 70%),
    radial-gradient(25% 35% at 80% 75%, #3b82f688, transparent 70%);
  mix-blend-mode: screen;
  animation: drift 16s ease-in-out infinite alternate;
}

.banner-banner_synthwave {
  background:
    linear-gradient(180deg, transparent 62%, #ff4fd8 62%, #ff4fd8 calc(62% + 2px), #1a0636 calc(62% + 2px), #0d021f 100%),
    repeating-linear-gradient(180deg, transparent 0 7px, #2a0a4a 7px 9px) 50% 0 / 100% 62% no-repeat,
    radial-gradient(circle at 50% 62%, #ffe27a 0 30px, #ff7ab8 30px 34px, #ff4fd844 35px, transparent 80px),
    linear-gradient(180deg, #12052e 0%, #3d0f63 40%, #a3266f 62%);
}
.banner-banner_synthwave::after {
  inset: 62% 0 0 0;
  background:
    repeating-linear-gradient(90deg, #ff4fd866 0 1px, transparent 1px 36px),
    repeating-linear-gradient(180deg, #ff4fd866 0 1px, transparent 1px 12px);
  animation: grid-run 1.6s linear infinite;
}
@keyframes grid-run { to { background-position: 0 0, 0 12px; } }

.banner-banner_throne { background: linear-gradient(120deg, #3b0a0a, #7f1d1d 35%, #4a1d0b 65%, #1c0f05); }
.banner-banner_throne::after {
  background:
    linear-gradient(105deg, transparent 35%, #fff7cc55 45%, transparent 55%) 0 0 / 250% 100%,
    repeating-linear-gradient(45deg, #f5c96a1a 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, #f5c96a1a 0 2px, transparent 2px 22px),
    radial-gradient(70% 120% at 50% 120%, #f5c96a44, transparent 70%);
  animation: sheen 3.5s linear infinite;
}

@keyframes drift { to { transform: translate3d(-6%, 4%, 0) scale(1.06); } }
@keyframes sway { to { transform: translate3d(-4%, 2%, 0); } }

@keyframes sheen { from { background-position: 92% 0, 0 0, 0 0, 0 0; } to { background-position: -8% 0, 0 0, 0 0, 0 0; } }

.rarity { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.rarity-common { color: #94a3b8; }
.rarity-rare { color: #60a5fa; }
.rarity-epic { color: #c084fc; }
.rarity-legendary { color: #fbbf24; }
.rarity-exclusive { background: linear-gradient(90deg, #f5c96a, #ff9ad5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rarity-seasonal { color: #22e4ff; }
.shop-item.r-rare { border-color: #3b82f644; }
.shop-item.r-epic { border-color: #a855f755; box-shadow: inset 0 -40px 60px -40px #a855f733; }
.shop-item.r-legendary { border-color: #f59e0b66; box-shadow: inset 0 -40px 60px -40px #f59e0b33; }

@media (prefers-reduced-motion: reduce) {
  .avatar.framed, .avatar.framed::after, .name, .banner::after { animation: none !important; }
}
.reduce-motion .avatar.framed, .reduce-motion .avatar.framed::after, .reduce-motion .name, .reduce-motion .banner::after { animation: none !important; }