/* PHNX590 - leaderboard presentation inspired by the supplied gaming dashboard. */

body[data-route="levels"] .levels-ranking-view {
  --rank-blue: #0a8cff;
  --rank-cyan: #00dcff;
  --rank-violet: #8f55ff;
  --rank-gold: #ffb20c;
  --rank-green: #65df66;
  --rank-ink: #050b17;
  --rank-panel: rgba(7, 20, 37, .94);
  --rank-line: rgba(70, 134, 207, .28);
  display: grid !important;
  gap: 14px !important;
}

body[data-route="levels"] .levels-ranking-view[hidden] { display: none !important; }

/* Wallpaper hero */
body[data-route="levels"] .levels-ranking-view > .page-heading {
  isolation: isolate;
  min-height: 208px !important;
  margin: 0 !important;
  overflow: hidden !important;
  padding: 38px 40px !important;
  position: relative !important;
  background:
    radial-gradient(circle at 67% 19%, rgba(79, 151, 255, .8) 0 1px, transparent 1.8px),
    radial-gradient(circle at 78% 31%, rgba(53, 198, 255, .78) 0 1px, transparent 1.7px),
    radial-gradient(circle at 46% 28%, rgba(91, 129, 255, .8) 0 1px, transparent 1.7px),
    radial-gradient(circle at 89% 70%, rgba(47, 166, 255, .7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 55% 77%, rgba(112, 157, 255, .62) 0 1px, transparent 1.7px),
    linear-gradient(102deg, rgba(4, 10, 25, .99) 0%, rgba(5, 17, 48, .98) 46%, rgba(1, 27, 75, .88) 100%) !important;
  border: 1px solid rgba(57, 109, 189, .38) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(129, 180, 255, .04), 0 18px 50px rgba(0, 0, 0, .28) !important;
}

body[data-route="levels"] .levels-ranking-view > .page-heading::before {
  content: "" !important;
  display: block !important;
  height: 620px !important;
  width: 620px !important;
  position: absolute !important;
  z-index: -1 !important;
  right: 3.5% !important;
  top: 53% !important;
  transform: translateY(-19%) rotate(-8deg) !important;
  border: 1px solid rgba(54, 167, 255, .5) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 36% 22%, rgba(59, 179, 255, .58), rgba(10, 83, 217, .34) 18%, rgba(2, 22, 81, .92) 52%, #010719 73%),
    repeating-radial-gradient(ellipse at 37% 38%, transparent 0 22px, rgba(35, 124, 255, .2) 23px 24px) !important;
  box-shadow:
    -26px -22px 62px rgba(0, 173, 255, .72),
    -7px -8px 16px rgba(103, 211, 255, .72),
    inset 74px 42px 112px rgba(27, 139, 255, .5),
    inset -110px -80px 160px rgba(0, 2, 18, .92) !important;
  opacity: .96 !important;
}

body[data-route="levels"] .levels-ranking-view > .page-heading::after {
  content: "" !important;
  display: block !important;
  height: 340px !important;
  width: 340px !important;
  position: absolute !important;
  z-index: -1 !important;
  right: 16% !important;
  top: 29% !important;
  background: url("/public/assets/phoenix-logo.png") center / contain no-repeat !important;
  filter: saturate(1.35) hue-rotate(168deg) drop-shadow(0 0 24px rgba(0, 132, 255, .72)) !important;
  opacity: .16 !important;
  transform: rotate(-9deg) !important;
}

body[data-route="levels"] .levels-ranking-view > .page-heading > div {
  max-width: 650px !important;
  position: relative !important;
  z-index: 3 !important;
}

body[data-route="levels"] .levels-ranking-view > .page-heading .eyebrow {
  color: #00dff8 !important;
  font-size: 11px !important;
  letter-spacing: .11em !important;
}

body[data-route="levels"] .levels-ranking-view > .page-heading h1 {
  color: #f6f9ff !important;
  font-size: clamp(34px, 4vw, 51px) !important;
  letter-spacing: -.045em !important;
  line-height: 1 !important;
  margin: 12px 0 14px !important;
  text-shadow: 0 8px 28px rgba(0, 0, 0, .44) !important;
}

body[data-route="levels"] .levels-ranking-view > .page-heading p:not(.eyebrow) {
  color: #b9c8df !important;
  font-size: 14px !important;
}

body[data-route="levels"] .levels-ranking-view .level-symbol {
  align-items: center !important;
  background: linear-gradient(145deg, rgba(3, 15, 41, .98), rgba(9, 32, 82, .96)) !important;
  border: 0 !important;
  clip-path: polygon(25% 5%, 75% 5%, 100% 25%, 100% 75%, 75% 95%, 25% 95%, 0 75%, 0 25%) !important;
  color: #0cdcff !important;
  display: flex !important;
  font-size: 34px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  height: 116px !important;
  justify-content: center !important;
  min-width: 116px !important;
  position: relative !important;
  right: 4px !important;
  text-shadow: 0 0 24px rgba(0, 204, 255, .72) !important;
  width: 116px !important;
  z-index: 4 !important;
  box-shadow: inset 0 0 0 2px rgba(29, 119, 255, .72), inset 0 0 32px rgba(0, 108, 255, .25), 0 0 42px rgba(0, 112, 255, .23) !important;
}

/* Insight cards */
body[data-route="levels"] .levels-insights {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body[data-route="levels"] .levels-insight {
  --insight-color: var(--rank-cyan);
  align-items: center;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--insight-color) 13%, transparent), transparent 48%),
    linear-gradient(135deg, rgba(13, 28, 51, .98), rgba(6, 16, 31, .98));
  border: 1px solid rgba(67, 111, 171, .32);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 14px 35px rgba(0, 0, 0, .18);
  display: grid;
  gap: 15px;
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 104px;
  overflow: hidden;
  padding: 18px;
  position: relative;
}

body[data-route="levels"] .levels-insight::after {
  background: linear-gradient(90deg, transparent, var(--insight-color), transparent);
  bottom: 0;
  content: "";
  height: 1px;
  left: 14%;
  opacity: .45;
  position: absolute;
  right: 14%;
}

body[data-route="levels"] .levels-insight-ranked { --insight-color: #a459ff; }
body[data-route="levels"] .levels-insight-live { --insight-color: #04c9ff; }
body[data-route="levels"] .levels-insight-xp { --insight-color: #ffb300; }
body[data-route="levels"] .levels-insight-community { --insight-color: #63e069; }

body[data-route="levels"] .levels-insight-icon {
  align-items: center;
  background: color-mix(in srgb, var(--insight-color) 10%, #071321);
  border: 1px solid color-mix(in srgb, var(--insight-color) 66%, transparent);
  clip-path: polygon(25% 3%, 75% 3%, 98% 25%, 98% 75%, 75% 97%, 25% 97%, 2% 75%, 2% 25%);
  color: var(--insight-color);
  display: flex;
  height: 55px;
  justify-content: center;
  width: 55px;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--insight-color) 45%, transparent));
}

body[data-route="levels"] .levels-insight-icon svg {
  fill: none;
  height: 28px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  width: 28px;
}

body[data-route="levels"] .levels-insight > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body[data-route="levels"] .levels-insight small {
  color: #b9c5d9;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .045em;
}

body[data-route="levels"] .levels-insight strong {
  color: var(--insight-color);
  font-size: clamp(19px, 1.8vw, 27px);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="levels"] .levels-insight em {
  color: #7e8da5;
  font-size: 9px;
  font-style: normal;
  line-height: 1.35;
}

/* Search and table shell */
body[data-route="levels"] .levels-browser {
  background: linear-gradient(145deg, rgba(6, 17, 32, .98), rgba(3, 10, 21, .98));
  border: 1px solid rgba(48, 95, 157, .25);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  overflow: hidden;
  padding: 10px;
}

body[data-route="levels"] .levels-browser .level-toolbar {
  align-items: center !important;
  background: linear-gradient(90deg, rgba(8, 23, 45, .98), rgba(4, 17, 34, .98)) !important;
  border: 1px solid rgba(17, 137, 255, .7) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 25px rgba(0, 100, 255, .08), 0 0 20px rgba(0, 98, 255, .12) !important;
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: minmax(260px, 1fr) auto !important;
  margin: 0 0 8px !important;
  min-height: 60px !important;
  padding: 8px 14px !important;
}

body[data-route="levels"] .level-toolbar label {
  display: block !important;
  min-width: 0;
  position: relative;
}

body[data-route="levels"] .level-toolbar label > span { display: none !important; }

body[data-route="levels"] .level-toolbar label::before {
  border: 1.7px solid #9eb3cd;
  border-radius: 50%;
  content: "";
  height: 14px;
  left: 7px;
  opacity: .85;
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  width: 14px;
  z-index: 2;
}

body[data-route="levels"] .level-toolbar label::after {
  background: #9eb3cd;
  content: "";
  height: 1.7px;
  left: 20px;
  opacity: .85;
  position: absolute;
  top: 58%;
  transform: rotate(45deg);
  width: 7px;
  z-index: 2;
}

body[data-route="levels"] .level-toolbar input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #e8f2ff !important;
  font-size: 13px !important;
  height: 42px !important;
  padding: 0 12px 0 39px !important;
  width: 100% !important;
}

body[data-route="levels"] .level-toolbar input::placeholder { color: #8391a8 !important; }

body[data-route="levels"] .level-toolbar > div {
  align-items: center !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
}

body[data-route="levels"] .level-toolbar > div::before {
  background: #40dcff;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(42, 207, 255, .08), 0 0 14px rgba(42, 207, 255, .8);
  content: "";
  height: 6px;
  width: 6px;
}

body[data-route="levels"] .level-toolbar > div strong {
  color: #f4f8ff !important;
  font-size: 17px !important;
}

body[data-route="levels"] .level-toolbar > div span {
  color: #93a2b8 !important;
  font-size: 10px !important;
  text-transform: uppercase;
}

body[data-route="levels"] .level-toolbar .level-updated {
  color: #00dfff !important;
  font-size: 9px !important;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="levels"] .levels-table-head {
  align-items: center;
  color: #7e8da7;
  display: grid;
  font-size: 9px;
  font-weight: 850;
  gap: 12px;
  grid-template-columns: 60px 68px minmax(200px, 1.2fr) 115px minmax(210px, 1fr) minmax(250px, 1.2fr);
  letter-spacing: .04em;
  min-height: 34px;
  padding: 0 16px;
}

body[data-route="levels"] .levels-table-head span:nth-child(1) { grid-column: 1; }
body[data-route="levels"] .levels-table-head span:nth-child(2) { grid-column: 2 / 4; }
body[data-route="levels"] .levels-table-head span:nth-child(3) { grid-column: 4; }
body[data-route="levels"] .levels-table-head span:nth-child(4) { grid-column: 5; }
body[data-route="levels"] .levels-table-head span:nth-child(5) { grid-column: 6; text-align: right; }

/* Ranking rows */
body[data-route="levels"] .levels-list {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  gap: 3px !important;
  overflow: visible !important;
}

body[data-route="levels"] .level-card {
  align-items: center !important;
  background:
    radial-gradient(circle at 100% 0, rgba(0, 124, 255, .07), transparent 35%),
    linear-gradient(105deg, rgba(8, 24, 43, .99), rgba(5, 17, 32, .99)) !important;
  border: 1px solid rgba(51, 101, 158, .44) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: 60px 68px minmax(200px, 1.2fr) 115px minmax(210px, 1fr) minmax(250px, 1.2fr) !important;
  min-height: 86px !important;
  overflow: hidden !important;
  padding: 8px 16px !important;
  position: relative !important;
  transition: border-color .2s ease, background .2s ease, transform .2s ease !important;
}

body[data-route="levels"] .level-card::before {
  background: linear-gradient(180deg, transparent, rgba(0, 172, 255, .72), transparent);
  content: "";
  left: 0;
  opacity: 0;
  position: absolute;
  top: 14%;
  bottom: 14%;
  transition: opacity .2s ease;
  width: 2px;
}

body[data-route="levels"] .level-card:hover {
  background: linear-gradient(105deg, rgba(10, 31, 55, .99), rgba(6, 22, 41, .99)) !important;
  border-color: rgba(32, 144, 255, .7) !important;
  transform: translateY(-1px) !important;
}

body[data-route="levels"] .level-card:hover::before { opacity: 1; }

body[data-route="levels"] .level-card-rank-1 {
  background:
    linear-gradient(90deg, rgba(255, 177, 0, .11), transparent 15%),
    radial-gradient(circle at 100% 0, rgba(0, 135, 255, .09), transparent 35%),
    linear-gradient(105deg, rgba(9, 27, 47, .99), rgba(5, 18, 34, .99)) !important;
  border-color: rgba(80, 135, 192, .6) !important;
  box-shadow: -10px 0 22px rgba(255, 176, 0, .12), inset 3px 0 0 rgba(255, 190, 28, .8) !important;
}

body[data-route="levels"] .level-rank {
  align-items: center !important;
  background: linear-gradient(145deg, #10243f, #081426) !important;
  border: 1px solid #365f91 !important;
  clip-path: polygon(18% 6%, 82% 6%, 98% 22%, 88% 81%, 50% 97%, 12% 81%, 2% 22%) !important;
  color: #d9e7fa !important;
  display: flex !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  height: 54px !important;
  justify-content: center !important;
  text-shadow: 0 0 14px rgba(84, 169, 255, .45) !important;
  width: 48px !important;
}

body[data-route="levels"] .level-card-rank-1 .level-rank {
  background: linear-gradient(145deg, #402b08, #10172a) !important;
  border-color: #ffba17 !important;
  color: #ffc11a !important;
  filter: drop-shadow(0 0 12px rgba(255, 179, 0, .38));
}

body[data-route="levels"] .level-card-rank-2 .level-rank {
  border-color: #a9c9ee !important;
  color: #e5f1ff !important;
  filter: drop-shadow(0 0 10px rgba(176, 215, 255, .24));
}

body[data-route="levels"] .level-card-rank-3 .level-rank {
  background: linear-gradient(145deg, #39210f, #10172a) !important;
  border-color: #d87828 !important;
  color: #ff9b43 !important;
  filter: drop-shadow(0 0 10px rgba(255, 126, 25, .22));
}

body[data-route="levels"] .level-avatar-shell,
body[data-route="levels"] .level-avatar {
  height: 58px !important;
  width: 58px !important;
}

body[data-route="levels"] .level-avatar-shell {
  filter: drop-shadow(0 0 10px rgba(0, 154, 255, .22));
}

body[data-route="levels"] .level-card-rank-1 .level-avatar-shell {
  filter: drop-shadow(0 0 13px rgba(255, 178, 0, .34));
}

body[data-route="levels"] .level-identity {
  align-content: center !important;
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

body[data-route="levels"] .level-identity > strong {
  color: #eff5ff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body[data-route="levels"] .level-identity > a {
  color: #08c8f5 !important;
  font-size: 10px !important;
}

body[data-route="levels"] .level-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-top: 2px !important;
}

body[data-route="levels"] .level-badges > span {
  border-radius: 3px !important;
  font-size: 7px !important;
  letter-spacing: .025em !important;
  padding: 3px 6px !important;
  text-transform: uppercase !important;
}

body[data-route="levels"] .level-status {
  align-items: center !important;
  display: grid !important;
  gap: 5px !important;
  justify-items: center !important;
}

body[data-route="levels"] .level-value span { display: none !important; }

body[data-route="levels"] .level-value strong {
  color: #ffb313 !important;
  font-size: 27px !important;
  line-height: 1 !important;
  text-shadow: 0 0 16px rgba(255, 174, 0, .2) !important;
}

body[data-route="levels"] .booster-badge {
  background: rgba(0, 135, 210, .12) !important;
  border: 1px solid rgba(0, 199, 255, .65) !important;
  border-radius: 4px !important;
  color: #08d7ff !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  padding: 3px 8px !important;
}

body[data-route="levels"] .booster-badge.active {
  background: rgba(255, 169, 0, .12) !important;
  border-color: rgba(255, 179, 26, .68) !important;
  color: #ffc029 !important;
}

body[data-route="levels"] .level-xp {
  align-content: center !important;
  color: #e8f1ff !important;
  display: grid !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body[data-route="levels"] .level-xp > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="levels"] .level-xp i {
  background: #172945 !important;
  border-radius: 99px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5) !important;
  height: 6px !important;
  overflow: hidden !important;
}

body[data-route="levels"] .level-xp i::after {
  background: linear-gradient(90deg, #08cfff, #338aff 58%, #955cff) !important;
  box-shadow: 0 0 12px rgba(35, 165, 255, .78) !important;
}

body[data-route="levels"] .level-next-xp {
  color: #6d819e !important;
  font-size: 8px !important;
  font-weight: 500 !important;
}

body[data-route="levels"] .level-activity {
  align-content: center !important;
  color: #8696ae !important;
  display: grid !important;
  font-size: 9px !important;
  gap: 4px !important;
  min-width: 0 !important;
  text-align: right !important;
}

body[data-route="levels"] .level-activity strong {
  color: #e4ecf8 !important;
  font-size: 10px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="levels"] .level-activity .level-updated-at {
  color: #00d7f8 !important;
  font-weight: 800 !important;
}

body[data-route="levels"] .levels-pagination {
  align-items: center !important;
  border-top: 1px solid rgba(49, 91, 141, .2) !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  margin: 8px 0 0 !important;
  padding: 12px 4px 2px !important;
}

body[data-route="levels"] .levels-pagination button {
  background: #0a1a2d !important;
  border: 1px solid rgba(58, 113, 175, .45) !important;
  border-radius: 8px !important;
  color: #c9d7e9 !important;
  min-height: 34px !important;
  padding: 0 14px !important;
}

body[data-route="levels"] .levels-pagination button:hover:not(:disabled) {
  border-color: rgba(0, 184, 255, .8) !important;
  color: #fff !important;
}

body[data-route="levels"] .levels-pagination span {
  color: #8293ab !important;
  font-size: 10px !important;
}

/* New badge in the vertical navigation. */
body[data-route]:not([data-route="admin"]):not([data-route="maintenance"]) .nav-live-pass-copy strong {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

body[data-route]:not([data-route="admin"]):not([data-route="maintenance"]) .nav-live-pass-new {
  -webkit-background-clip: border-box !important;
  background: linear-gradient(90deg, #7c37c9, #55259b) !important;
  border: 1px solid rgba(216, 154, 255, .35) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 10px rgba(132, 58, 221, .25) !important;
  color: #eadcff !important;
  display: inline-flex !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  padding: 3px 5px !important;
  text-shadow: none !important;
}

/* Live XP motion */
body[data-route="levels"] .level-xp-head {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

body[data-route="levels"] .level-xp-total {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="levels"] .level-xp-gain {
  animation: levelXpGain 2.4s cubic-bezier(.2, .8, .2, 1) both;
  background: linear-gradient(135deg, rgba(0, 232, 255, .2), rgba(115, 86, 255, .2));
  border: 1px solid rgba(82, 226, 255, .55);
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(33, 184, 255, .28);
  color: #aef7ff;
  flex: 0 0 auto;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .025em;
  padding: 3px 7px;
  white-space: nowrap;
}

body[data-route="levels"] .level-xp-track {
  isolation: isolate;
  position: relative;
}

body[data-route="levels"] .level-xp-track::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
  content: "";
  inset: -2px auto -2px -30%;
  opacity: 0;
  position: absolute;
  transform: skewX(-22deg);
  width: 22%;
  z-index: 2;
}

body[data-route="levels"] .level-xp-track::after {
  width: var(--progress-to, var(--progress)) !important;
  will-change: width, filter;
}

body[data-route="levels"] .level-xp-track.is-xp-entering::after {
  animation: levelXpEnter .9s cubic-bezier(.2, .78, .2, 1) both;
}

body[data-route="levels"] .level-xp-track.is-xp-updating::after {
  animation: levelXpAdvance 1.15s cubic-bezier(.16, .84, .24, 1) both;
}

body[data-route="levels"] .level-xp-track.is-xp-updating::before,
body[data-route="levels"] .level-xp-track.is-level-reset::before {
  animation: levelXpShimmer 1.2s .08s ease-out both;
}

body[data-route="levels"] .level-xp-track.is-level-reset::after {
  animation: levelXpReset 1.65s cubic-bezier(.2, .76, .2, 1) both;
}

body[data-route="levels"] .level-card.has-xp-update {
  animation: levelRowXpPulse 1.15s ease-out both;
}

body[data-route="levels"] .level-card.is-level-up {
  animation: levelCardAscend 2.8s cubic-bezier(.2, .8, .2, 1) both;
  border-color: rgba(255, 191, 36, .92) !important;
  isolation: isolate;
  z-index: 3;
}

body[data-route="levels"] .level-card.is-level-up .level-avatar-shell {
  animation: levelAvatarAscend 2.1s ease-out both;
}

body[data-route="levels"] .level-value strong.is-level-up-number {
  animation: levelNumberAscend 1.5s cubic-bezier(.2, .9, .2, 1) both;
  color: #ffe16a !important;
  text-shadow: 0 0 10px #ffb515, 0 0 28px rgba(255, 160, 0, .82) !important;
}

body[data-route="levels"] .level-up-celebration {
  animation: levelCelebrationFade 2.8s ease-out both;
  background: radial-gradient(circle at 57% 50%, rgba(255, 184, 22, .3), transparent 30%);
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 8;
}

body[data-route="levels"] .level-up-celebration-copy {
  animation: levelCelebrationCopy 2.8s cubic-bezier(.18, .84, .22, 1) both;
  display: grid;
  gap: 1px;
  left: 57%;
  justify-items: center;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

body[data-route="levels"] .level-up-celebration-copy small {
  color: #fff0a3;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .22em;
  text-shadow: 0 0 12px rgba(255, 187, 20, .95);
}

body[data-route="levels"] .level-up-celebration-copy strong {
  background: linear-gradient(180deg, #fff8bc, #ffb000 62%, #ff7a00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 11px rgba(255, 166, 0, .72));
  font-size: 20px;
  font-weight: 1000;
  letter-spacing: .035em;
}

body[data-route="levels"] .level-up-particles {
  inset: 0;
  position: absolute;
}

body[data-route="levels"] .level-up-particles i {
  --burst-x: 0px;
  --burst-y: -70px;
  animation: levelUpParticle 1.65s .16s cubic-bezier(.16, .76, .28, 1) both;
  background: #ffd958;
  border-radius: 2px;
  box-shadow: 0 0 9px currentColor;
  height: 4px;
  left: 57%;
  position: absolute;
  top: 50%;
  width: 4px;
}

body[data-route="levels"] .level-up-particles i:nth-child(2n) { background: #37deff; color: #37deff; }
body[data-route="levels"] .level-up-particles i:nth-child(3n) { background: #a877ff; color: #a877ff; }
body[data-route="levels"] .level-up-particles i:nth-child(1) { --burst-x: -118px; --burst-y: -28px; }
body[data-route="levels"] .level-up-particles i:nth-child(2) { --burst-x: -92px; --burst-y: -62px; }
body[data-route="levels"] .level-up-particles i:nth-child(3) { --burst-x: -52px; --burst-y: -74px; }
body[data-route="levels"] .level-up-particles i:nth-child(4) { --burst-x: -16px; --burst-y: -58px; }
body[data-route="levels"] .level-up-particles i:nth-child(5) { --burst-x: 24px; --burst-y: -74px; }
body[data-route="levels"] .level-up-particles i:nth-child(6) { --burst-x: 64px; --burst-y: -56px; }
body[data-route="levels"] .level-up-particles i:nth-child(7) { --burst-x: 112px; --burst-y: -32px; }
body[data-route="levels"] .level-up-particles i:nth-child(8) { --burst-x: 118px; --burst-y: 22px; }
body[data-route="levels"] .level-up-particles i:nth-child(9) { --burst-x: 76px; --burst-y: 58px; }
body[data-route="levels"] .level-up-particles i:nth-child(10) { --burst-x: 32px; --burst-y: 70px; }
body[data-route="levels"] .level-up-particles i:nth-child(11) { --burst-x: -52px; --burst-y: 64px; }
body[data-route="levels"] .level-up-particles i:nth-child(12) { --burst-x: -104px; --burst-y: 36px; }

@keyframes levelXpEnter {
  from { filter: brightness(.8); opacity: .45; width: 0; }
  to { filter: brightness(1); opacity: 1; width: var(--progress-to); }
}

@keyframes levelXpAdvance {
  0% { filter: brightness(1); width: var(--progress-from); }
  55% { filter: brightness(1.7); }
  100% { filter: brightness(1); width: var(--progress-to); }
}

@keyframes levelXpReset {
  0% { filter: brightness(1); width: var(--progress-from); }
  38% { filter: brightness(1.9); width: 100%; }
  40% { filter: brightness(2.2); opacity: .45; width: 0; }
  100% { filter: brightness(1); opacity: 1; width: var(--progress-to); }
}

@keyframes levelXpShimmer {
  0% { left: -30%; opacity: 0; }
  18% { opacity: .85; }
  100% { left: 112%; opacity: 0; }
}

@keyframes levelXpGain {
  0% { opacity: 0; transform: translateY(5px) scale(.75); }
  18%, 68% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-4px) scale(.94); }
}

@keyframes levelRowXpPulse {
  0% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 0 0 rgba(31, 188, 255, 0); }
  35% { border-color: rgba(44, 190, 255, .85); box-shadow: inset 3px 0 0 #23d3ff, 0 0 22px rgba(31, 163, 255, .2); }
  100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 0 0 rgba(31, 188, 255, 0); }
}

@keyframes levelCardAscend {
  0% { filter: brightness(1); transform: translateY(0) scale(1); }
  12% { filter: brightness(1.45); transform: translateY(-3px) scale(1.008); }
  30% { filter: brightness(1.1); transform: translateY(0) scale(1); }
  72% { border-color: rgba(255, 191, 36, .92); box-shadow: inset 3px 0 0 #ffc227, 0 0 32px rgba(255, 166, 0, .24); }
  100% { filter: brightness(1); transform: translateY(0) scale(1); }
}

@keyframes levelAvatarAscend {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(0, 154, 255, .22)); transform: scale(1); }
  28% { filter: drop-shadow(0 0 19px rgba(255, 190, 30, .88)); transform: scale(1.08); }
}

@keyframes levelNumberAscend {
  0% { opacity: .15; transform: scale(.45) rotate(-8deg); }
  38% { opacity: 1; transform: scale(1.35) rotate(3deg); }
  62% { transform: scale(.94) rotate(0); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes levelCelebrationFade {
  0% { opacity: 0; }
  12%, 68% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes levelCelebrationCopy {
  0% { filter: blur(6px); opacity: 0; transform: translate(-50%, -35%) scale(.55); }
  18% { filter: blur(0); opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  34%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -65%) scale(.96); }
}

@keyframes levelUpParticle {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--burst-x), var(--burst-y)) scale(.15) rotate(320deg); }
}

@media (max-width: 560px) {
  body[data-route="levels"] .level-up-celebration { background-position: center; }
  body[data-route="levels"] .level-up-celebration-copy,
  body[data-route="levels"] .level-up-particles i { left: 50%; }
  body[data-route="levels"] .level-up-celebration-copy strong { font-size: 17px; }
}
@media (max-width: 1400px) {
  body[data-route="levels"] .levels-insights { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body[data-route="levels"] .levels-table-head {
    grid-template-columns: 54px 60px minmax(170px, 1fr) 100px minmax(170px, .9fr) minmax(210px, 1fr);
  }
  body[data-route="levels"] .level-card {
    grid-template-columns: 54px 60px minmax(170px, 1fr) 100px minmax(170px, .9fr) minmax(210px, 1fr) !important;
  }
}

@media (max-width: 1100px) {
  body[data-route="levels"] .levels-ranking-view > .page-heading::before { right: -15% !important; }
  body[data-route="levels"] .levels-ranking-view > .page-heading::after { right: 9% !important; }
  body[data-route="levels"] .levels-table-head { display: none !important; }
  body[data-route="levels"] .level-card {
    grid-template-columns: 54px 58px minmax(0, 1fr) 100px !important;
    padding: 11px 13px !important;
  }
  body[data-route="levels"] .level-xp,
  body[data-route="levels"] .level-activity {
    grid-column: 3 / -1 !important;
  }
  body[data-route="levels"] .level-activity { text-align: left !important; }
}

@media (max-width: 760px) {
  body[data-route="levels"] .levels-ranking-view { gap: 10px !important; }
  body[data-route="levels"] .levels-ranking-view > .page-heading {
    min-height: 176px !important;
    padding: 24px 20px !important;
  }
  body[data-route="levels"] .levels-ranking-view > .page-heading::before {
    height: 420px !important;
    right: -40% !important;
    width: 420px !important;
  }
  body[data-route="levels"] .levels-ranking-view > .page-heading::after {
    height: 220px !important;
    right: -1% !important;
    width: 220px !important;
  }
  body[data-route="levels"] .levels-ranking-view > .page-heading h1 {
    font-size: clamp(29px, 9vw, 39px) !important;
    max-width: 360px !important;
  }
  body[data-route="levels"] .levels-ranking-view > .page-heading p:not(.eyebrow) { max-width: 320px !important; }
  body[data-route="levels"] .levels-ranking-view .level-symbol {
    font-size: 25px !important;
    height: 82px !important;
    min-width: 82px !important;
    width: 82px !important;
  }
  body[data-route="levels"] .levels-insights { gap: 8px !important; }
  body[data-route="levels"] .levels-insight {
    gap: 10px;
    grid-template-columns: 45px minmax(0, 1fr);
    min-height: 88px;
    padding: 12px;
  }
  body[data-route="levels"] .levels-insight-icon { height: 43px; width: 43px; }
  body[data-route="levels"] .levels-insight-icon svg { height: 22px; width: 22px; }
  body[data-route="levels"] .levels-browser { padding: 7px; }
  body[data-route="levels"] .levels-browser .level-toolbar {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }
  body[data-route="levels"] .level-toolbar > div { justify-content: flex-start !important; padding: 0 8px 5px !important; }
}

@media (max-width: 560px) {
  body[data-route="levels"] .levels-ranking-view > .page-heading {
    min-height: 164px !important;
    padding: 22px 14px !important;
  }
  body[data-route="levels"] .levels-ranking-view > .page-heading p:not(.eyebrow) { font-size: 11px !important; }
  body[data-route="levels"] .levels-ranking-view .level-symbol {
    font-size: 20px !important;
    height: 64px !important;
    min-width: 64px !important;
    width: 64px !important;
  }
  body[data-route="levels"] .levels-insights { grid-template-columns: 1fr 1fr !important; }
  body[data-route="levels"] .levels-insight {
    display: block;
    min-height: 94px;
    padding: 12px;
  }
  body[data-route="levels"] .levels-insight-icon { display: none; }
  body[data-route="levels"] .levels-insight strong { font-size: 18px; }
  body[data-route="levels"] .levels-insight em { white-space: normal; }
  body[data-route="levels"] .level-toolbar .level-updated { display: none !important; }
  body[data-route="levels"] .level-card {
    gap: 8px !important;
    grid-template-columns: 43px 48px minmax(0, 1fr) !important;
    padding: 10px !important;
  }
  body[data-route="levels"] .level-rank {
    font-size: 17px !important;
    height: 46px !important;
    width: 40px !important;
  }
  body[data-route="levels"] .level-avatar-shell,
  body[data-route="levels"] .level-avatar {
    height: 46px !important;
    width: 46px !important;
  }
  body[data-route="levels"] .level-status {
    align-items: center !important;
    display: flex !important;
    grid-column: 3 !important;
    justify-content: flex-start !important;
  }
  body[data-route="levels"] .level-value strong { font-size: 21px !important; }
  body[data-route="levels"] .level-xp,
  body[data-route="levels"] .level-activity { grid-column: 1 / -1 !important; }
  body[data-route="levels"] .level-activity strong { white-space: normal; }
  body[data-route="levels"] .levels-pagination { justify-content: space-between !important; }
  body[data-route="levels"] .levels-pagination button { padding: 0 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="levels"] .level-card,
  body[data-route="levels"] .level-avatar-shell,
  body[data-route="levels"] .level-value strong,
  body[data-route="levels"] .level-xp-gain { animation: none !important; transition: none !important; }
  body[data-route="levels"] .level-up-celebration,
  body[data-route="levels"] .level-xp-track::before { display: none !important; }
  body[data-route="levels"] .level-xp-track::after {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    width: var(--progress-to, var(--progress)) !important;
  }
}