.avatar.has-badge {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.accountBubble .avatar.has-badge {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}

.shopItemPreview .avatar.has-badge {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}

.chatBadge {
  --badge-size: 44px;
  --a: #63d9ae;
  --b: #e8c767;
  --c: #0e1410;
  --ink: #f8fff8;
  --rim: rgba(255,255,255,.22);
  --glow: rgba(99,217,174,.28);
  width: var(--badge-size);
  height: var(--badge-size);
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--rim);
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.36), transparent 0 18%, transparent 28%),
    radial-gradient(circle at 68% 76%, rgba(0,0,0,.22), transparent 0 31%, transparent 44%),
    conic-gradient(from 160deg, var(--a), var(--b), var(--c), var(--a));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -12px 22px rgba(0,0,0,.24),
    0 8px 16px rgba(0,0,0,.38),
    0 0 18px var(--glow);
}

.accountBubble .chatBadge {
  --badge-size: 40px;
}

.shopItemPreview .chatBadge {
  --badge-size: 46px;
}

.playerTitle {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  margin-top: 0;
}

.playerTitle[hidden] {
  display: none !important;
}

.playerTitleBadge {
  --title-a: #9fb0a8;
  --title-b: #e8efe8;
  --title-bg: rgba(18, 23, 19, .92);
  --title-glow: rgba(255,255,255,.08);
  position: relative;
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 3px 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--title-a), transparent 48%);
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--title-a), transparent 86%), transparent 52%),
    var(--title-bg);
  color: var(--title-b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 0 14px var(--title-glow);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playerTitleBadge::before,
.playerTitleBadge::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.playerTitleBadge::before {
  inset: 0;
  background: linear-gradient(100deg, transparent 0 28%, rgba(255,255,255,.34), transparent 56% 100%);
  transform: translateX(-70%);
}

.playerTitleBadge::after {
  inset: 2px 7px;
  background:
    radial-gradient(circle, rgba(255,255,255,.88) 0 1px, transparent 1.6px) 0 50% / 17px 100%,
    radial-gradient(circle, var(--title-a) 0 .8px, transparent 1.5px) 11px 15% / 23px 100%;
  mix-blend-mode: screen;
}

.title-earth { --title-a: #b7a987; --title-b: #f0e8d1; --title-bg: rgba(32, 27, 18, .9); --title-glow: rgba(183, 169, 135, .12); }
.title-moss { --title-a: #82d582; --title-b: #eaffe2; --title-bg: rgba(16, 35, 20, .9); --title-glow: rgba(130, 213, 130, .16); }
.title-bone { --title-a: #d8ccb0; --title-b: #fff4de; --title-bg: rgba(40, 34, 25, .9); --title-glow: rgba(216, 204, 176, .14); }
.title-lunar { --title-a: #aebeff; --title-b: #f4f6ff; --title-bg: rgba(17, 20, 38, .9); --title-glow: rgba(174, 190, 255, .18); }
.title-ember { --title-a: #ff8a4c; --title-b: #fff0dc; --title-bg: rgba(42, 16, 10, .9); --title-glow: rgba(255, 138, 76, .22); }
.title-storm { --title-a: #75dcff; --title-b: #f1fbff; --title-bg: rgba(8, 28, 39, .9); --title-glow: rgba(117, 220, 255, .22); }
.title-mist { --title-a: #86f0d6; --title-b: #ecfff9; --title-bg: rgba(9, 31, 30, .9); --title-glow: rgba(134, 240, 214, .16); }
.title-royal { --title-a: #d9a4ff; --title-b: #fff1ff; --title-bg: rgba(34, 16, 46, .9); --title-glow: rgba(217, 164, 255, .22); }
.title-rift { --title-a: #bf80ff; --title-b: #f8efff; --title-bg: rgba(24, 11, 45, .9); --title-glow: rgba(191, 128, 255, .24); }
.title-solar { --title-a: #ffd36a; --title-b: #fff7ce; --title-bg: rgba(45, 27, 6, .9); --title-glow: rgba(255, 211, 106, .2); }
.title-void { --title-a: #8f84ff; --title-b: #f2efff; --title-bg: rgba(9, 8, 20, .92); --title-glow: rgba(143, 132, 255, .2); }
.title-star { --title-a: #c8f9ff; --title-b: #fff8cf; --title-bg: rgba(16, 21, 35, .9); --title-glow: rgba(200, 249, 255, .2); }
.title-supporter { --title-a: #c99cff; --title-b: #fff3cf; --title-bg: rgba(31, 17, 50, .9); --title-glow: rgba(201, 156, 255, .24); }

.title-fx-shine::before {
  opacity: .5;
  animation: titleShine 5.4s ease-in-out infinite;
}

.title-fx-pulse {
  animation: titlePulse 3.8s ease-in-out infinite;
}

.title-fx-electric::before {
  opacity: .44;
  background: linear-gradient(105deg, transparent 0 36%, color-mix(in srgb, var(--title-a), white 18%), transparent 48% 100%);
  animation: titleFlicker 3.1s steps(2, end) infinite;
}

.title-fx-mist::before {
  opacity: .34;
  background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--title-a), transparent 58%), transparent 62%);
  animation: titleMist 5.8s ease-in-out infinite;
}

.title-fx-spark::after {
  opacity: .72;
  animation: titleSpark 3.2s ease-in-out infinite;
}

.chatBadge::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.08), rgba(0,0,0,.28));
  opacity: .86;
}

.chatBadge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.22) 42%, transparent 52% 100%);
  opacity: .38;
  transform: translateX(-40%);
}

.shape-round,
.shape-round::before,
.shape-round::after {
  border-radius: 50%;
}

.shape-seal,
.shape-seal::before,
.shape-seal::after {
  border-radius: 50% 42% 48% 44%;
}

.shape-stone {
  clip-path: polygon(18% 5%, 74% 0, 96% 32%, 87% 82%, 42% 100%, 7% 73%, 0 22%);
}

.shape-hex {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}

.shape-shield {
  clip-path: polygon(50% 2%, 92% 16%, 83% 75%, 50% 98%, 17% 75%, 8% 16%);
}

.shape-diamond {
  clip-path: polygon(50% 0, 94% 26%, 100% 68%, 50% 100%, 0 68%, 6% 26%);
}

.shape-rune {
  clip-path: polygon(50% 0, 88% 14%, 100% 50%, 88% 86%, 50% 100%, 12% 86%, 0 50%, 12% 14%);
}

.shape-stone::before,
.shape-hex::before,
.shape-shield::before,
.shape-diamond::before,
.shape-rune::before {
  clip-path: inherit;
}

.skin-ember { --a: #ff7a32; --b: #ffd08a; --c: #35110c; --ink: #fff5d6; --rim: rgba(255,173,87,.54); --glow: rgba(255,116,39,.28); }
.skin-moss { --a: #73d16b; --b: #d8f7a2; --c: #17351b; --ink: #f4ffe6; --rim: rgba(146,220,115,.46); --glow: rgba(113,209,99,.22); }
.skin-tide { --a: #2ed4c9; --b: #a7fff3; --c: #0d2d2a; --ink: #eafffb; --rim: rgba(80,226,216,.48); --glow: rgba(40,216,202,.25); }
.skin-bone { --a: #d8ccb0; --b: #fff3dc; --c: #41382b; --ink: #fff7e7; --rim: rgba(232,220,190,.48); --glow: rgba(216,204,176,.18); }
.skin-slate { --a: #9fb0b4; --b: #e5eef0; --c: #263033; --ink: #f8ffff; --rim: rgba(204,224,226,.42); --glow: rgba(149,178,184,.18); }
.skin-amber { --a: #d88b2b; --b: #ffe2a5; --c: #3b2310; --ink: #fff1c7; --rim: rgba(255,204,124,.5); --glow: rgba(216,139,43,.25); }
.skin-frost { --a: #84e6ff; --b: #f1feff; --c: #173042; --ink: #f6ffff; --rim: rgba(172,241,255,.54); --glow: rgba(103,220,255,.26); }
.skin-solar { --a: #ffcc4f; --b: #fff3b0; --c: #55310c; --ink: #fff8d0; --rim: rgba(255,222,105,.56); --glow: rgba(255,204,79,.3); }
.skin-amethyst { --a: #a66cff; --b: #f1c7ff; --c: #25113f; --ink: #fff4ff; --rim: rgba(196,134,255,.54); --glow: rgba(166,108,255,.28); }
.skin-night { --a: #4562a0; --b: #b7d2ff; --c: #090d1a; --ink: #f0f6ff; --rim: rgba(112,144,207,.44); --glow: rgba(69,98,160,.22); }
.skin-honey { --a: #f2a83b; --b: #fff0a8; --c: #43260a; --ink: #fff7cf; --rim: rgba(255,195,91,.5); --glow: rgba(242,168,59,.24); }
.skin-supporter { --a: #9d6cff; --b: #fff0a8; --c: #24123f; --ink: #fff8dc; --rim: rgba(213,178,255,.62); --glow: rgba(157,108,255,.32); }
.skin-fern { --a: #95d66b; --b: #e7ffc2; --c: #1b3320; --ink: #f8ffe6; --rim: rgba(174,225,126,.44); --glow: rgba(149,214,107,.2); }
.skin-jade { --a: #44c68a; --b: #bcffd9; --c: #0e2b1e; --ink: #edfff6; --rim: rgba(105,220,155,.48); --glow: rgba(68,198,138,.23); }
.skin-rosequartz { --a: #f28db1; --b: #ffe1ef; --c: #3b1324; --ink: #fff4fa; --rim: rgba(255,180,209,.46); --glow: rgba(242,141,177,.21); }
.skin-void { --a: #6b5cff; --b: #e1d9ff; --c: #080713; --ink: #f2efff; --rim: rgba(147,132,255,.5); --glow: rgba(107,92,255,.24); }
.skin-inferno { --a: #ff5a2d; --b: #fff06e; --c: #290908; --ink: #fff6c9; --rim: rgba(255,147,74,.62); --glow: rgba(255,90,45,.34); }
.skin-celestial { --a: #7ce6ff; --b: #ffe98e; --c: #12183c; --ink: #ffffff; --rim: rgba(196,236,255,.6); --glow: rgba(124,230,255,.34); }
.skin-arcane { --a: #c36bff; --b: #7df7ff; --c: #1a0d35; --ink: #ffffff; --rim: rgba(214,151,255,.6); --glow: rgba(195,107,255,.33); }
.skin-eclipse { --a: #6a5cff; --b: #ffcc74; --c: #07080f; --ink: #fff4d8; --rim: rgba(152,139,255,.58); --glow: rgba(106,92,255,.3); }
.skin-prismatic { --a: #73f6c4; --b: #ffde7d; --c: #271548; --ink: #ffffff; --rim: rgba(239,226,255,.62); --glow: rgba(176,120,255,.3); }
.skin-venom { --a: #79ff63; --b: #e8ff7c; --c: #102411; --ink: #f5ffe9; --rim: rgba(164,255,117,.58); --glow: rgba(121,255,99,.28); }
.skin-glacier { --a: #65c7ff; --b: #f6ffff; --c: #102438; --ink: #ffffff; --rim: rgba(179,236,255,.62); --glow: rgba(101,199,255,.3); }
.skin-starlace { --a: #a1ffd8; --b: #fff5bd; --c: #17212d; --ink: #ffffff; --rim: rgba(207,255,232,.58); --glow: rgba(161,255,216,.3); }

.badgeAura,
.badgeFlare,
.badgeGlint {
  position: absolute;
  pointer-events: none;
}

.badgeAura {
  inset: 0;
  z-index: 2;
  opacity: .82;
}

.badgeFlare {
  inset: -12%;
  z-index: 0;
  opacity: .56;
  background:
    radial-gradient(circle at 24% 26%, color-mix(in srgb, var(--b), transparent 42%), transparent 0 12%, transparent 24%),
    radial-gradient(circle at 72% 70%, color-mix(in srgb, var(--a), transparent 48%), transparent 0 15%, transparent 28%);
  filter: blur(1px);
}

.badgeGlint {
  inset: 8%;
  z-index: 6;
  opacity: .62;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1.2px, transparent 1.7px) 18% 18% / 22px 22px,
    radial-gradient(circle, var(--b) 0 1px, transparent 1.6px) 76% 64% / 28px 28px;
  mix-blend-mode: screen;
}

.chatBadge.tier-premium {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -12px 22px rgba(0,0,0,.22),
    0 8px 16px rgba(0,0,0,.38),
    0 0 18px var(--glow),
    0 0 1px 1px color-mix(in srgb, var(--b), transparent 58%);
}

.chatBadge.tier-premium .badgeMark {
  filter:
    drop-shadow(0 2px 3px rgba(0,0,0,.5))
    drop-shadow(0 0 7px color-mix(in srgb, var(--b), transparent 50%));
}

.badgeMark {
  position: absolute;
  inset: 22%;
  z-index: 4;
  color: var(--ink);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.45));
}

.badgeMark::before,
.badgeMark::after,
.badgeMark i {
  content: "";
  position: absolute;
  display: block;
  background: currentColor;
}

.badgeMark i {
  width: 0;
  height: 0;
}

.mark-fang::before {
  inset: 2% 19% 0;
  clip-path: polygon(50% 0, 84% 58%, 63% 100%, 49% 76%, 35% 100%, 16% 58%);
}

.mark-claw i {
  top: 7%;
  width: 13%;
  height: 88%;
  border-radius: 999px 999px 2px 2px;
  background: currentColor;
  transform: rotate(21deg);
}

.mark-claw i:nth-child(1) { left: 22%; }
.mark-claw i:nth-child(2) { left: 45%; height: 98%; }
.mark-claw i:nth-child(3) { left: 68%; }

.mark-skull::before {
  left: 18%;
  top: 9%;
  width: 64%;
  height: 62%;
  border-radius: 50% 50% 40% 40%;
}

.mark-skull::after {
  left: 31%;
  top: 33%;
  width: 11%;
  height: 14%;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 26px 0 0 var(--c), 13px 18px 0 -2px var(--c), -2px 39px 0 -1px currentColor, 13px 39px 0 -1px currentColor, 28px 39px 0 -1px currentColor;
}

.mark-shell::before {
  inset: 7%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 10deg, currentColor 0 8deg, transparent 9deg 18deg),
    radial-gradient(circle, transparent 0 32%, currentColor 34% 38%, transparent 40%);
}

.mark-shell::after {
  left: 44%;
  top: 44%;
  width: 13%;
  height: 13%;
  border-radius: 50%;
}

.mark-rib i {
  top: 9%;
  width: 10%;
  height: 82%;
  border-radius: 999px;
  background: currentColor;
}

.mark-rib i:nth-child(1) { left: 25%; transform: rotate(-18deg); }
.mark-rib i:nth-child(2) { left: 45%; }
.mark-rib i:nth-child(3) { left: 65%; transform: rotate(18deg); }

.mark-crystal::before {
  inset: 0 26% 5%;
  clip-path: polygon(50% 0, 88% 33%, 70% 100%, 30% 100%, 12% 33%);
}

.mark-crystal::after {
  left: 49%;
  top: 8%;
  width: 3px;
  height: 76%;
  opacity: .42;
  background: rgba(0,0,0,.32);
}

.mark-track::before {
  left: 31%;
  top: 42%;
  width: 38%;
  height: 46%;
  border-radius: 48% 48% 52% 52%;
  transform: rotate(-8deg);
}

.mark-track::after {
  left: 46%;
  top: 10%;
  width: 13%;
  height: 18%;
  border-radius: 50%;
  box-shadow: -18px 11px 0 currentColor, 18px 11px 0 currentColor, -8px -2px 0 currentColor, 8px -2px 0 currentColor;
}

.mark-rune::before {
  left: 45%;
  top: 7%;
  width: 10%;
  height: 86%;
  border-radius: 999px;
}

.mark-rune::after {
  left: 18%;
  top: 25%;
  width: 64%;
  height: 10%;
  border-radius: 999px;
  transform: rotate(-28deg);
  box-shadow: 0 24px 0 currentColor;
}

.mark-lantern::before {
  left: 24%;
  top: 20%;
  width: 52%;
  height: 58%;
  border: 5px solid currentColor;
  border-radius: 15px 15px 8px 8px;
  background: transparent;
}

.mark-lantern::after {
  left: 36%;
  top: 7%;
  width: 28%;
  height: 18%;
  border: 4px solid currentColor;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  background: transparent;
}

.mark-coin::before {
  inset: 8%;
  border: 6px solid currentColor;
  border-radius: 50%;
  background: transparent;
}

.mark-coin::after {
  left: 44%;
  top: 21%;
  width: 12%;
  height: 58%;
  border-radius: 999px;
}

.mark-nest::before {
  left: 8%;
  top: 45%;
  width: 84%;
  height: 38%;
  border: 5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  background: transparent;
  transform: rotate(-5deg);
}

.mark-nest::after {
  left: 30%;
  top: 18%;
  width: 16%;
  height: 28%;
  border-radius: 50%;
  box-shadow: 17px 2px 0 currentColor, 35px 8px 0 currentColor;
}

.mark-spore::before {
  left: 11%;
  top: 50%;
  width: 18%;
  height: 18%;
  border-radius: 50%;
  box-shadow: 18px -27px 0 6px currentColor, 45px -7px 0 1px currentColor, 30px 19px 0 -2px currentColor;
}

.mark-spore::after {
  left: 48%;
  top: 18%;
  width: 5%;
  height: 64%;
  border-radius: 999px;
  opacity: .55;
  transform: rotate(24deg);
}

.mark-flower::before {
  left: 40%;
  top: 6%;
  width: 20%;
  height: 88%;
  border-radius: 999px;
  transform: rotate(45deg);
}

.mark-flower::after {
  left: 16%;
  top: 16%;
  width: 68%;
  height: 68%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 8%, currentColor 0 17%, transparent 18%),
    radial-gradient(ellipse at 92% 50%, currentColor 0 17%, transparent 18%),
    radial-gradient(ellipse at 50% 92%, currentColor 0 17%, transparent 18%),
    radial-gradient(ellipse at 8% 50%, currentColor 0 17%, transparent 18%),
    radial-gradient(circle, currentColor 0 12%, transparent 13%);
}

.mark-comet::before {
  left: 49%;
  top: 25%;
  width: 24%;
  height: 24%;
  border-radius: 50%;
}

.mark-comet::after {
  left: 7%;
  top: 40%;
  width: 55%;
  height: 11%;
  border-radius: 999px;
  transform: rotate(-24deg);
  box-shadow: 10px 13px 0 -3px currentColor;
  opacity: .86;
}

.mark-eye::before {
  left: 5%;
  top: 27%;
  width: 90%;
  height: 46%;
  border: 5px solid currentColor;
  border-radius: 50% 50% 45% 45%;
  background: transparent;
  transform: rotate(-6deg);
}

.mark-eye::after {
  left: 39%;
  top: 35%;
  width: 22%;
  height: 22%;
  border-radius: 50%;
}

.mark-moon::before {
  inset: 7%;
  border-radius: 50%;
}

.mark-moon::after {
  left: 36%;
  top: 1%;
  width: 65%;
  height: 84%;
  border-radius: 50%;
  background: var(--c);
  opacity: .9;
}

.mark-flame::before {
  left: 20%;
  top: 3%;
  width: 60%;
  height: 92%;
  border-radius: 60% 40% 58% 42%;
  clip-path: polygon(48% 0, 70% 26%, 63% 44%, 87% 62%, 71% 100%, 43% 87%, 25% 100%, 12% 70%, 30% 48%, 26% 25%);
}

.mark-flame::after {
  left: 39%;
  top: 38%;
  width: 23%;
  height: 42%;
  border-radius: 60% 40% 60% 40%;
  background: var(--c);
  opacity: .48;
}

.mark-halo::before {
  inset: 3%;
  border: 6px solid currentColor;
  border-radius: 50%;
  background: transparent;
}

.mark-halo::after {
  left: 20%;
  top: 22%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background:
    radial-gradient(circle, currentColor 0 13%, transparent 15%),
    conic-gradient(from 0deg, transparent 0 18%, currentColor 20% 24%, transparent 27% 43%, currentColor 45% 50%, transparent 53% 70%, currentColor 72% 77%, transparent 80%);
}

.mark-sigil::before {
  inset: 5%;
  border: 5px solid currentColor;
  border-radius: 24% 76% 25% 75%;
  background: transparent;
  transform: rotate(45deg);
}

.mark-sigil::after {
  left: 45%;
  top: 12%;
  width: 10%;
  height: 76%;
  border-radius: 999px;
  box-shadow: -18px 24px 0 -3px currentColor, 18px 24px 0 -3px currentColor;
}

.mark-crown::before {
  left: 5%;
  top: 22%;
  width: 90%;
  height: 50%;
  clip-path: polygon(0 100%, 0 33%, 24% 59%, 39% 4%, 54% 58%, 78% 12%, 100% 33%, 100% 100%);
}

.mark-crown::after {
  left: 13%;
  bottom: 14%;
  width: 74%;
  height: 12%;
  border-radius: 999px;
}

.mark-vortex::before {
  inset: 6%;
  border: 6px solid currentColor;
  border-right-color: transparent;
  border-bottom-color: color-mix(in srgb, currentColor, transparent 35%);
  border-radius: 50%;
  background: transparent;
}

.mark-vortex::after {
  left: 34%;
  top: 34%;
  width: 32%;
  height: 32%;
  border: 5px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  background: transparent;
  transform: rotate(-28deg);
}

.mark-prism::before {
  inset: 2% 19% 0;
  clip-path: polygon(50% 0, 94% 36%, 73% 100%, 27% 100%, 6% 36%);
}

.mark-prism::after {
  left: 24%;
  top: 33%;
  width: 52%;
  height: 7%;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  box-shadow: 0 17px 0 rgba(0,0,0,.2);
  transform: rotate(-24deg);
}

.mark-wings::before,
.mark-wings::after {
  top: 20%;
  width: 38%;
  height: 56%;
  border-radius: 80% 18% 80% 20%;
}

.mark-wings::before {
  left: 8%;
  transform: rotate(-24deg);
}

.mark-wings::after {
  right: 8%;
  transform: scaleX(-1) rotate(-24deg);
}

.effect-gleam::after {
  animation: badgeGleam 4.2s ease-in-out infinite;
}

.effect-breathe {
  animation: badgeBreathe 3.8s ease-in-out infinite;
}

.effect-orbit .badgeAura {
  background: conic-gradient(from 0deg, transparent 0 68%, rgba(255,255,255,.5), transparent 84% 100%);
  animation: badgeOrbit 5.5s linear infinite;
  mix-blend-mode: screen;
}

.effect-sparks .badgeAura {
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.8px) 18% 28% / 26px 26px,
    radial-gradient(circle, var(--b) 0 1px, transparent 1.7px) 70% 62% / 30px 30px;
  animation: badgeSpark 3.4s ease-in-out infinite;
}

.effect-tide .badgeAura {
  background:
    radial-gradient(ellipse at 30% 80%, rgba(255,255,255,.2), transparent 36%),
    linear-gradient(100deg, transparent 25%, rgba(255,255,255,.18), transparent 64%);
  animation: badgeDrift 5s ease-in-out infinite;
}

.effect-heartbeat .badgeAura {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.2), transparent 46%);
  animation: badgePulse 2.8s ease-in-out infinite;
}

.effect-corona .badgeFlare {
  background:
    conic-gradient(from 0deg, transparent 0 12%, color-mix(in srgb, var(--b), transparent 40%), transparent 22% 42%, color-mix(in srgb, var(--a), transparent 48%), transparent 54% 78%, rgba(255,255,255,.36), transparent 88% 100%),
    radial-gradient(circle, transparent 0 48%, color-mix(in srgb, var(--b), transparent 66%) 50%, transparent 63%);
  animation: badgeOrbit 9s linear infinite;
}

.effect-corona .badgeGlint,
.effect-forge .badgeGlint,
.effect-nebula .badgeGlint,
.effect-prism .badgeGlint,
.effect-rift .badgeGlint,
.effect-veil .badgeGlint {
  animation: badgeTwinkle 2.8s ease-in-out infinite;
}

.effect-nebula .badgeFlare {
  background:
    radial-gradient(ellipse at 28% 30%, color-mix(in srgb, var(--a), transparent 28%), transparent 36%),
    radial-gradient(ellipse at 70% 66%, color-mix(in srgb, var(--b), transparent 36%), transparent 34%),
    conic-gradient(from 80deg, transparent, color-mix(in srgb, var(--a), transparent 70%), transparent, color-mix(in srgb, var(--b), transparent 72%), transparent);
  animation: badgeNebula 6.8s ease-in-out infinite;
}

.effect-prism .badgeFlare {
  background:
    linear-gradient(115deg, transparent 14%, rgba(255,255,255,.22), transparent 30% 42%, color-mix(in srgb, var(--a), transparent 58%), transparent 62% 100%),
    conic-gradient(from 45deg, var(--a), var(--b), #fff, var(--a));
  mix-blend-mode: screen;
  animation: badgePrism 5.2s ease-in-out infinite;
}

.effect-rift .badgeFlare {
  background:
    linear-gradient(105deg, transparent 0 37%, color-mix(in srgb, var(--b), transparent 26%) 45%, transparent 54% 100%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--a), transparent 56%), transparent 40%);
  animation: badgeRift 4.6s ease-in-out infinite;
}

.effect-forge .badgeFlare {
  background:
    radial-gradient(circle at 50% 78%, color-mix(in srgb, var(--a), transparent 20%), transparent 0 18%, transparent 42%),
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.28), transparent 0 8%, transparent 20%),
    radial-gradient(circle at 72% 28%, var(--b), transparent 0 6%, transparent 18%);
  animation: badgeForge 3.5s ease-in-out infinite;
}

.effect-veil .badgeFlare {
  background:
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--a), transparent 78%) 0 10deg, transparent 12deg 28deg),
    radial-gradient(circle, transparent 0 44%, color-mix(in srgb, var(--b), transparent 68%) 50%, transparent 64%);
  animation: badgeVeil 8.5s ease-in-out infinite;
}

@keyframes badgeGleam {
  0%, 35%, 100% { transform: translateX(-48%); opacity: .22; }
  55% { transform: translateX(48%); opacity: .55; }
}

@keyframes badgeBreathe {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -12px 22px rgba(0,0,0,.24), 0 8px 16px rgba(0,0,0,.38), 0 0 14px var(--glow); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -12px 22px rgba(0,0,0,.2), 0 9px 18px rgba(0,0,0,.38), 0 0 28px var(--glow); }
}

@keyframes badgeOrbit {
  to { transform: rotate(360deg); }
}

@keyframes badgeSpark {
  0%, 100% { opacity: .22; transform: translateY(2px); }
  50% { opacity: .86; transform: translateY(-2px); }
}

@keyframes badgeDrift {
  0%, 100% { transform: translateX(-4px); opacity: .35; }
  50% { transform: translateX(5px); opacity: .78; }
}

@keyframes badgePulse {
  0%, 100% { opacity: .2; transform: scale(.86); }
  50% { opacity: .7; transform: scale(1.06); }
}

@keyframes badgeTwinkle {
  0%, 100% { opacity: .24; transform: scale(.96) rotate(0deg); }
  38% { opacity: .78; transform: scale(1.04) rotate(10deg); }
  68% { opacity: .44; transform: scale(.99) rotate(-7deg); }
}

@keyframes badgeNebula {
  0%, 100% { opacity: .44; transform: rotate(-8deg) scale(1); }
  50% { opacity: .72; transform: rotate(8deg) scale(1.05); }
}

@keyframes badgePrism {
  0%, 100% { opacity: .28; transform: translateX(-18%) rotate(0deg); }
  48% { opacity: .62; transform: translateX(16%) rotate(18deg); }
}

@keyframes badgeRift {
  0%, 100% { opacity: .36; transform: translateX(-4%) skewX(-8deg); }
  50% { opacity: .7; transform: translateX(6%) skewX(8deg); }
}

@keyframes badgeForge {
  0%, 100% { opacity: .34; transform: translateY(4%) scale(.96); }
  52% { opacity: .75; transform: translateY(-3%) scale(1.04); }
}

@keyframes badgeVeil {
  0%, 100% { opacity: .34; transform: rotate(0deg) scale(1); }
  50% { opacity: .68; transform: rotate(22deg) scale(1.04); }
}

@keyframes titleShine {
  0%, 35%, 100% { transform: translateX(-78%); opacity: .18; }
  55% { transform: translateX(78%); opacity: .54; }
}

@keyframes titlePulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 11px var(--title-glow); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 20px var(--title-glow); }
}

@keyframes titleFlicker {
  0%, 100% { transform: translateX(-64%); opacity: .18; }
  48% { transform: translateX(54%); opacity: .52; }
  54% { opacity: .16; }
  62% { opacity: .58; }
}

@keyframes titleMist {
  0%, 100% { transform: translateX(-34%) scaleX(1.2); opacity: .2; }
  50% { transform: translateX(34%) scaleX(1.45); opacity: .42; }
}

@keyframes titleSpark {
  0%, 100% { opacity: .18; transform: translateY(1px); }
  42% { opacity: .78; transform: translateY(-1px); }
  68% { opacity: .36; }
}