/*
 * White-theme leaderboard effects.
 *
 * Every effect is designed for the site's light UI: saturated ink colors,
 * white separation strokes and colored halos. No effect relies on a dark
 * background to remain readable.
 */

.leaderboard-player[class*="effect-"] .leaderboard-effect-art,
.reward-item[class*="effect-"] .effect-card-preview,
.reward-item.effect-preview .effect-card-preview {
  background: var(--fx-wash, linear-gradient(90deg, rgba(19, 184, 207, .035), rgba(19, 184, 207, .09), rgba(19, 184, 207, .025))) !important;
  box-shadow:
    inset 0 0 0 1px var(--fx-edge, rgba(255, 255, 255, .72)),
    inset 0 0 30px var(--fx-glow, transparent);
}

.leaderboard-player[class*="effect-"] .leaderboard-effect-art::before,
.leaderboard-player[class*="effect-"] .leaderboard-effect-art::after {
  display: none !important;
}

.leaderboard-player[class*="effect-"] strong,
.reward-item[class*="effect-"] .effect-card-preview .effect-card-name {
  color: var(--fx-ink, #1d3038) !important;
  font-weight: 750;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .98),
    0 0 1px rgba(255, 255, 255, .98),
    0 0 9px var(--fx-glow, transparent) !important;
}

/* Common particle rendering for the live board and shop cards. */
.leaderboard-player .fx-rain,
.effect-card-preview .fx-rain {
  width: 1.5px;
  height: 12px;
  background: linear-gradient(180deg, rgba(37, 99, 135, 0), #2b8fba 62%, #155a7b);
  box-shadow: 0 0 4px rgba(37, 137, 177, .48);
}

.leaderboard-player .fx-snow,
.effect-card-preview .fx-snow {
  width: calc(var(--size, 3px) + 1px);
  height: calc(var(--size, 3px) + 1px);
  border: 1px solid #6bb9d2;
  background: #f8feff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .94),
    0 0 6px rgba(52, 143, 180, .48);
}

.leaderboard-player .fx-leaf,
.effect-card-preview .fx-leaf {
  border: 1px solid rgba(146, 64, 14, .62);
  background: linear-gradient(135deg, #f59e0b, #b45309);
  box-shadow: 0 0 5px rgba(180, 83, 9, .4);
}

.leaderboard-player .fx-ember,
.effect-card-preview .fx-ember,
.leaderboard-player .fx-lava,
.effect-card-preview .fx-lava {
  width: 3px;
  height: 3px;
  border: 1px solid #9f1239;
  background: #e8485b;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .76),
    0 0 7px rgba(232, 72, 91, .72);
}

.leaderboard-player .fx-scan,
.effect-card-preview .fx-scan {
  background: linear-gradient(90deg, transparent, rgba(8, 119, 108, .42) 36%, rgba(255, 255, 255, .96) 50%, rgba(8, 119, 108, .42) 64%, transparent);
  box-shadow: 0 0 8px rgba(13, 148, 136, .38);
}

.leaderboard-player .fx-code,
.effect-card-preview .fx-code {
  color: #087a54;
  text-shadow:
    0 1px 0 #fff,
    0 0 1px #fff,
    0 0 7px rgba(16, 185, 129, .48);
}

.leaderboard-player .fx-aurora,
.effect-card-preview .fx-aurora {
  background: linear-gradient(180deg, transparent, rgba(20, 184, 166, .2), rgba(59, 130, 246, .22), rgba(147, 51, 234, .2), transparent);
  box-shadow: 0 0 10px rgba(79, 70, 229, .18);
}

.leaderboard-player .fx-nebula,
.effect-card-preview .fx-nebula {
  color: #6d4bc4;
  text-shadow:
    0 1px 0 #fff,
    0 0 1px #fff,
    0 0 7px rgba(139, 92, 246, .64);
}

.leaderboard-player .fx-rune,
.effect-card-preview .fx-rune {
  color: #9a6508;
  text-shadow:
    0 1px 0 #fff,
    0 0 1px #fff,
    0 0 7px rgba(245, 158, 11, .62);
}

.leaderboard-player .fx-prism,
.effect-card-preview .fx-prism {
  background: linear-gradient(90deg, transparent, #d61f5b, #f59e0b, #0b9f7a, #1769c9, transparent);
  box-shadow: 0 0 7px rgba(23, 105, 201, .35);
}

.leaderboard-player .fx-star,
.reward-item[class*="effect-"] .effect-card-preview .fx-star {
  border: 1px solid rgba(255, 255, 255, .96);
  background: #3858b3;
  box-shadow:
    0 0 0 1px rgba(56, 88, 179, .22),
    0 0 7px rgba(78, 107, 204, .62);
}

.leaderboard-player .fx-star:nth-child(3n),
.reward-item[class*="effect-"] .effect-card-preview .fx-star:nth-child(3n) {
  background: #087f9e;
  box-shadow:
    0 0 0 1px rgba(8, 127, 158, .22),
    0 0 7px rgba(8, 127, 158, .58);
}

.leaderboard-player .fx-star:nth-child(4n),
.reward-item[class*="effect-"] .effect-card-preview .fx-star:nth-child(4n) {
  background: #b45309;
  box-shadow:
    0 0 0 1px rgba(180, 83, 9, .2),
    0 0 7px rgba(180, 83, 9, .5);
}

.leaderboard-player .fx-petal,
.reward-item[class*="effect-"] .effect-card-preview .fx-petal {
  border: 1px solid #be185d;
  background: #f472b6 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .86),
    0 0 5px rgba(236, 72, 153, .5);
}

.leaderboard-player.effect-sakura_fall .fx-petal,
.reward-item.effect-sakura_fall .effect-card-preview .fx-petal {
  border: 1px solid #be185d !important;
  background: #f472b6 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .86),
    0 0 5px rgba(236, 72, 153, .5) !important;
}

.leaderboard-player.effect-meteor_shower .fx-star,
.reward-item.effect-meteor_shower .effect-card-preview .fx-star {
  border: 1px solid rgba(255, 255, 255, .96);
  background: #3858b3;
  box-shadow:
    0 0 0 1px rgba(56, 88, 179, .22),
    0 0 7px rgba(78, 107, 204, .62);
}

/* Basic name colors. */
.leaderboard-player.effect-cyan_name,
.reward-item.effect-cyan_name .effect-card-preview {
  --fx-ink: #04798b;
  --fx-glow: rgba(19, 184, 207, .38);
  --fx-edge: rgba(19, 184, 207, .2);
  --fx-wash: linear-gradient(90deg, rgba(19, 184, 207, .035), rgba(19, 184, 207, .13) 54%, rgba(19, 184, 207, .025));
}

.leaderboard-player.effect-basic_gold,
.reward-item.effect-basic_gold .effect-card-preview {
  --fx-ink: #976006;
  --fx-glow: rgba(217, 119, 6, .32);
  --fx-edge: rgba(217, 119, 6, .2);
  --fx-wash: linear-gradient(90deg, rgba(245, 158, 11, .035), rgba(245, 158, 11, .13) 54%, rgba(245, 158, 11, .025));
}

.leaderboard-player.effect-red_name,
.reward-item.effect-red_name .effect-card-preview {
  --fx-ink: #b83245;
  --fx-glow: rgba(239, 68, 68, .32);
  --fx-edge: rgba(239, 68, 68, .2);
  --fx-wash: linear-gradient(90deg, rgba(239, 68, 68, .035), rgba(239, 68, 68, .13) 54%, rgba(239, 68, 68, .025));
}

.leaderboard-player.effect-pink_name,
.reward-item.effect-pink_name .effect-card-preview {
  --fx-ink: #ae367e;
  --fx-glow: rgba(236, 72, 153, .34);
  --fx-edge: rgba(236, 72, 153, .2);
  --fx-wash: linear-gradient(90deg, rgba(236, 72, 153, .035), rgba(236, 72, 153, .13) 54%, rgba(236, 72, 153, .025));
}

.leaderboard-player.effect-spectrum_name,
.reward-item.effect-spectrum_name .effect-card-preview {
  --fx-glow: rgba(78, 112, 214, .34);
  --fx-edge: rgba(78, 112, 214, .18);
  --fx-wash: linear-gradient(90deg, rgba(239, 68, 68, .05), rgba(245, 158, 11, .08) 22%, rgba(16, 185, 129, .07) 44%, rgba(59, 130, 246, .08) 68%, rgba(168, 85, 247, .06));
}

.leaderboard-player.effect-spectrum_name strong,
.reward-item.effect-spectrum_name .effect-card-preview .effect-card-name {
  color: transparent !important;
  text-shadow: none !important;
  background: linear-gradient(90deg, #d61f5b, #c47700, #078466, #285fc7, #8835c8, #d61f5b) !important;
  background-size: 240% 100% !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, .98))
    drop-shadow(0 0 4px rgba(78, 112, 214, .42));
  animation: fx-white-spectrum 4s linear infinite !important;
}

/* Common / first batch. */
.leaderboard-player.effect-breathing_glow,
.reward-item.effect-breathing_glow .effect-card-preview {
  --fx-ink: #087e91;
  --fx-glow: rgba(34, 211, 238, .42);
  --fx-edge: rgba(34, 211, 238, .2);
  --fx-wash: radial-gradient(circle at 27% 50%, rgba(34, 211, 238, .19), transparent 48%), linear-gradient(90deg, rgba(34, 211, 238, .025), rgba(34, 211, 238, .08), rgba(34, 211, 238, .02));
}

.leaderboard-player.effect-breathing_glow strong,
.reward-item.effect-breathing_glow .effect-card-preview .effect-card-name {
  animation: fx-white-breathe 2.8s ease-in-out infinite;
}

.leaderboard-player.effect-gradient_outline,
.reward-item.effect-gradient_outline .effect-card-preview {
  --fx-glow: rgba(37, 99, 235, .25);
  --fx-edge: rgba(37, 99, 235, .48);
  --fx-wash: linear-gradient(90deg, rgba(34, 211, 238, .045), rgba(59, 130, 246, .075) 48%, rgba(139, 92, 246, .045));
}

.leaderboard-player.effect-gradient_outline strong,
.reward-item.effect-gradient_outline .effect-card-preview .effect-card-name {
  color: transparent !important;
  text-shadow: none !important;
  background: linear-gradient(90deg, #067a8d, #2457ad, #7542bd, #067a8d) !important;
  background-size: 240% 100% !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 0 4px rgba(37, 99, 235, .36));
  animation: fx-white-spectrum 3.4s linear infinite !important;
}

.leaderboard-player.effect-rain_fall,
.reward-item.effect-rain_fall .effect-card-preview {
  --fx-ink: #176982;
  --fx-glow: rgba(56, 189, 248, .3);
  --fx-edge: rgba(56, 189, 248, .18);
  --fx-wash: linear-gradient(180deg, rgba(125, 211, 252, .15), rgba(224, 242, 254, .2) 58%, rgba(125, 211, 252, .07));
}

.leaderboard-player.effect-snow_fall,
.reward-item.effect-snow_fall .effect-card-preview {
  --fx-ink: #2f6d8f;
  --fx-glow: rgba(56, 151, 190, .3);
  --fx-edge: rgba(125, 211, 252, .24);
  --fx-wash: radial-gradient(circle at 72% 32%, rgba(186, 230, 253, .28), transparent 46%), linear-gradient(90deg, rgba(224, 242, 254, .2), rgba(125, 211, 252, .11));
}

.leaderboard-player.effect-autumn_leaves,
.reward-item.effect-autumn_leaves .effect-card-preview {
  --fx-ink: #9a4d07;
  --fx-glow: rgba(245, 158, 11, .3);
  --fx-edge: rgba(245, 158, 11, .2);
  --fx-wash: linear-gradient(180deg, rgba(251, 191, 36, .13), rgba(255, 247, 237, .18) 62%, rgba(245, 158, 11, .07));
}

.leaderboard-player.effect-ember_rise,
.reward-item.effect-ember_rise .effect-card-preview {
  --fx-ink: #b13f51;
  --fx-glow: rgba(244, 63, 94, .32);
  --fx-edge: rgba(244, 63, 94, .18);
  --fx-wash: radial-gradient(circle at 50% 100%, rgba(251, 113, 133, .2), transparent 56%), linear-gradient(90deg, rgba(254, 226, 226, .16), rgba(255, 247, 237, .2));
}

.leaderboard-player.effect-scan_line,
.reward-item.effect-scan_line .effect-card-preview {
  --fx-ink: #08776c;
  --fx-glow: rgba(20, 184, 166, .3);
  --fx-edge: rgba(20, 184, 166, .22);
  --fx-wash: linear-gradient(90deg, rgba(45, 212, 191, .045), rgba(45, 212, 191, .1), rgba(45, 212, 191, .025));
}

.leaderboard-player.effect-data_stream,
.reward-item.effect-data_stream .effect-card-preview {
  --fx-ink: #0f7a52;
  --fx-glow: rgba(16, 185, 129, .3);
  --fx-edge: rgba(16, 185, 129, .2);
  --fx-wash: linear-gradient(180deg, rgba(52, 211, 153, .14), rgba(236, 253, 245, .18) 60%, rgba(52, 211, 153, .05));
}

/* Mythic / legendary effects. */
.leaderboard-player.effect-aurora,
.reward-item.effect-aurora .effect-card-preview {
  --fx-ink: #6d3fbf;
  --fx-glow: rgba(139, 92, 246, .28);
  --fx-edge: rgba(139, 92, 246, .2);
  --fx-wash: linear-gradient(105deg, rgba(45, 212, 191, .11), rgba(96, 165, 250, .12) 34%, rgba(168, 85, 247, .12) 63%, rgba(244, 114, 182, .1));
}

.leaderboard-player.effect-nebula,
.reward-item.effect-nebula .effect-card-preview {
  --fx-ink: #6441b8;
  --fx-glow: rgba(139, 92, 246, .32);
  --fx-edge: rgba(139, 92, 246, .22);
  --fx-wash: radial-gradient(circle at 74% 38%, rgba(139, 92, 246, .18), transparent 35%), radial-gradient(circle at 36% 68%, rgba(34, 211, 238, .13), transparent 32%), linear-gradient(135deg, rgba(245, 243, 255, .3), rgba(238, 242, 255, .22));
}

.leaderboard-player.effect-lava,
.reward-item.effect-lava .effect-card-preview {
  --fx-ink: #a84213;
  --fx-glow: rgba(249, 115, 22, .32);
  --fx-edge: rgba(249, 115, 22, .22);
  --fx-wash: radial-gradient(circle at 50% 100%, rgba(249, 115, 22, .2), transparent 58%), linear-gradient(180deg, rgba(255, 247, 237, .22), rgba(254, 215, 170, .14));
}

.leaderboard-player.effect-runes,
.reward-item.effect-runes .effect-card-preview {
  --fx-ink: #996300;
  --fx-glow: rgba(245, 158, 11, .3);
  --fx-edge: rgba(245, 158, 11, .2);
  --fx-wash: radial-gradient(circle at 50% 50%, rgba(250, 204, 21, .14), transparent 58%), linear-gradient(90deg, rgba(255, 251, 235, .2), rgba(254, 243, 199, .14));
}

.leaderboard-player.effect-prism,
.reward-item.effect-prism .effect-card-preview {
  --fx-ink: #174d75;
  --fx-glow: rgba(14, 165, 233, .3);
  --fx-edge: rgba(14, 165, 233, .22);
  --fx-wash: linear-gradient(105deg, rgba(244, 63, 94, .08), rgba(255, 255, 255, .18) 28%, rgba(34, 211, 238, .1) 50%, rgba(255, 255, 255, .16) 70%, rgba(168, 85, 247, .08));
}

.leaderboard-player.effect-prism strong,
.reward-item.effect-prism .effect-card-preview .effect-card-name {
  text-shadow:
    -1.5px 0 #d61f5b,
    1.5px 0 #087f9e,
    0 1px 0 #fff,
    0 0 1px #fff,
    0 0 10px rgba(14, 165, 233, .5) !important;
  animation: fx-white-prism 1.8s ease-in-out infinite alternate !important;
}

.leaderboard-player.effect-rgb_offset,
.reward-item.effect-rgb_offset .effect-card-preview {
  --fx-ink: #20313e;
  --fx-glow: rgba(14, 165, 233, .24);
  --fx-edge: rgba(14, 165, 233, .18);
  --fx-wash: linear-gradient(90deg, rgba(244, 63, 94, .075), rgba(255, 255, 255, .18) 48%, rgba(14, 165, 233, .075));
}

.leaderboard-player.effect-rgb_offset strong,
.reward-item.effect-rgb_offset .effect-card-preview .effect-card-name {
  color: #20313e !important;
  text-shadow:
    -1.5px 0 #d61f5b,
    1.5px 0 #087f9e,
    0 1px 0 #fff,
    0 0 1px #fff !important;
  animation: fx-white-rgb 1.7s ease-in-out infinite alternate !important;
}

.leaderboard-player.effect-meteor_shower,
.reward-item.effect-meteor_shower .effect-card-preview {
  --fx-ink: #4356a3;
  --fx-glow: rgba(99, 102, 241, .3);
  --fx-edge: rgba(99, 102, 241, .22);
  --fx-wash: radial-gradient(circle at 80% 38%, rgba(129, 140, 248, .18), transparent 38%), radial-gradient(circle at 38% 68%, rgba(56, 189, 248, .12), transparent 32%), linear-gradient(135deg, rgba(245, 247, 255, .3), rgba(226, 232, 255, .2));
}

.leaderboard-player.effect-meimei,
.leaderboard-player.effect-meimei2,
.reward-item.effect-meimei .effect-card-preview,
.reward-item.effect-meimei2 .effect-card-preview {
  --fx-ink: #a83d72;
  --fx-glow: rgba(244, 114, 182, .34);
  --fx-edge: rgba(244, 114, 182, .22);
  --fx-wash: linear-gradient(90deg, rgba(249, 168, 212, .09), rgba(255, 241, 247, .2) 50%, rgba(249, 168, 212, .07));
}

.leaderboard-player.effect-sakura_fall,
.reward-item.effect-sakura_fall .effect-card-preview {
  --fx-ink: #a83d72;
  --fx-glow: rgba(236, 72, 153, .34);
  --fx-edge: rgba(236, 72, 153, .22);
  --fx-wash: radial-gradient(circle at 84% 30%, rgba(249, 168, 212, .22), transparent 38%), linear-gradient(90deg, rgba(255, 241, 247, .22), rgba(252, 231, 243, .15));
}

.leaderboard-player.effect-sakura_fall strong:before,
.reward-item.effect-sakura_fall .effect-card-name:before {
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px rgba(236, 72, 153, .55));
}

.leaderboard-player.effect-meimei .fx-meimei,
.leaderboard-player.effect-meimei2 .fx-meimei,
.effect-card-preview .fx-meimei {
  filter:
    drop-shadow(0 1px 1px rgba(74, 25, 47, .28))
    drop-shadow(0 0 1px #fff)
    drop-shadow(0 0 6px rgba(244, 114, 182, .38));
}

/* A little more definition for colored particles on the white cards. */
.effect-card-preview .fx-rain,
.effect-card-preview .fx-snow,
.effect-card-preview .fx-leaf,
.effect-card-preview .fx-ember,
.effect-card-preview .fx-lava,
.effect-card-preview .fx-scan,
.effect-card-preview .fx-code,
.effect-card-preview .fx-aurora,
.effect-card-preview .fx-nebula,
.effect-card-preview .fx-rune,
.effect-card-preview .fx-prism,
.effect-card-preview .fx-star,
.effect-card-preview .fx-petal {
  position: absolute;
  display: block;
  pointer-events: none;
}

@keyframes fx-white-spectrum {
  to { background-position: 240% 0; }
}

@keyframes fx-white-breathe {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .96)) drop-shadow(0 0 3px rgba(34, 211, 238, .34)); }
  50% { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 10px rgba(34, 211, 238, .7)); }
}

@keyframes fx-white-rgb {
  from { filter: none; transform: translateX(0); }
  to { filter: hue-rotate(12deg) saturate(1.28); transform: translateX(.35px); }
}

@keyframes fx-white-prism {
  from { filter: none; }
  to { filter: hue-rotate(14deg) saturate(1.28); }
}

@media (prefers-reduced-motion: reduce) {
  .leaderboard-player[class*="effect-"] strong,
  .effect-card-preview .effect-card-name,
  .leaderboard-player[class*="effect-"] .leaderboard-effect-art i,
  .effect-card-preview .effect-card-art i {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Gray-board pass: effects must not paint their own row background.
   The leaderboard itself is gray, so glows and particles can breathe without
   turning every row into a colored tile. */
.leaderboard-table th{background:#f3f5f7}
.leaderboard-table tbody td{background:#f7f8fa}
.leaderboard-table tbody tr:hover td{background:#eef1f4}

.leaderboard-player[class*="effect-"] .leaderboard-effect-art{
  background:transparent!important;
  box-shadow:none!important;
}

/* The gradient-outline effect still needs its outline; it is drawn as an
   inset stroke instead of a filled background. */
.leaderboard-player.effect-gradient_outline .leaderboard-effect-art::before{
  display:block!important;
  content:"";
  position:absolute;
  inset:2px;
  border:2px solid transparent;
  border-radius:6px;
  background:linear-gradient(90deg,#06b6d4,#6366f1,#a855f7,#06b6d4) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  box-shadow:0 0 0 1px rgba(255,255,255,.82),0 0 9px rgba(99,102,241,.22);
}

/* Effects that genuinely need a dark stage keep one. Everything else stays
   transparent on the gray board. */
.leaderboard-table tbody tr:has(.leaderboard-player:is(.effect-meteor_shower,.effect-nebula,.effect-aurora,.effect-lava,.effect-runes,.effect-prism,.effect-dragon_flame)) td{
  color:#e5edf5;
}
.leaderboard-table tbody tr:has(.leaderboard-player:is(.effect-meteor_shower,.effect-nebula,.effect-aurora,.effect-lava,.effect-runes,.effect-prism,.effect-dragon_flame)) td strong{
  color:#fff;
}
.leaderboard-table tbody tr:has(.leaderboard-player:is(.effect-meteor_shower,.effect-nebula,.effect-aurora,.effect-lava,.effect-runes,.effect-prism,.effect-dragon_flame)) .player-region{
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#e5edf5;
}
.leaderboard-table tbody tr:has(.leaderboard-player:is(.effect-meteor_shower,.effect-nebula,.effect-aurora,.effect-lava,.effect-runes,.effect-prism,.effect-dragon_flame)) .leaderboard-player>div small{
  color:#cbd5e1;
}

.leaderboard-player.effect-meteor_shower .leaderboard-effect-art{
  background:radial-gradient(circle at 78% 42%,rgba(99,102,241,.34),transparent 46%),radial-gradient(circle at 36% 68%,rgba(56,189,248,.2),transparent 34%),linear-gradient(135deg,#111934,#080d1b)!important;
  box-shadow:inset 0 0 0 1px rgba(148,163,255,.2),inset 0 0 30px rgba(56,189,248,.1)!important;
}
.leaderboard-player.effect-meteor_shower strong{color:#eef2ff!important;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 10px rgba(96,165,250,.9)!important}

.leaderboard-player.effect-nebula .leaderboard-effect-art{
  background:radial-gradient(circle at 72% 40%,rgba(139,92,246,.42),transparent 38%),radial-gradient(circle at 36% 66%,rgba(34,211,238,.26),transparent 34%),linear-gradient(135deg,#11152e,#17102b 68%,#0b1023)!important;
  box-shadow:inset 0 0 0 1px rgba(196,181,253,.2),inset 0 0 32px rgba(139,92,246,.14)!important;
}
.leaderboard-player.effect-nebula strong{color:#f5f3ff!important;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 11px rgba(167,139,250,.95)!important}

.leaderboard-player.effect-aurora .leaderboard-effect-art{
  background:linear-gradient(110deg,#071b2d,rgba(12,74,110,.88) 34%,rgba(76,29,149,.78) 68%,#071b2d)!important;
  box-shadow:inset 0 0 0 1px rgba(125,211,252,.2),inset 0 0 34px rgba(34,211,238,.12)!important;
}
.leaderboard-player.effect-aurora strong{color:#ecfeff!important;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 11px rgba(34,211,238,.9),0 0 18px rgba(168,85,247,.55)!important}

.leaderboard-player.effect-lava .leaderboard-effect-art{
  background:radial-gradient(circle at 50% 100%,rgba(249,115,22,.4),transparent 56%),linear-gradient(180deg,#180707,#321008)!important;
  box-shadow:inset 0 0 0 1px rgba(251,146,60,.22),inset 0 0 32px rgba(239,68,68,.14)!important;
}
.leaderboard-player.effect-lava strong{color:#fff7ed!important;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 11px rgba(249,115,22,.95)!important}

.leaderboard-player.effect-runes .leaderboard-effect-art{
  background:radial-gradient(circle at 50% 50%,rgba(245,158,11,.18),transparent 58%),linear-gradient(135deg,#15130b,#211b0b)!important;
  box-shadow:inset 0 0 0 1px rgba(250,204,21,.22),inset 0 0 30px rgba(245,158,11,.12)!important;
}
.leaderboard-player.effect-runes strong{color:#fef9c3!important;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 11px rgba(250,204,21,.95)!important}

.leaderboard-player.effect-prism .leaderboard-effect-art{
  background:linear-gradient(115deg,#101827,#172033 48%,#0e2530)!important;
  box-shadow:inset 0 0 0 1px rgba(103,232,249,.22),inset 0 0 30px rgba(34,211,238,.1)!important;
}
.leaderboard-player.effect-prism strong{color:#fff!important;text-shadow:-2px 0 #ff4d8d,2px 0 #22d3ee,0 1px 2px rgba(0,0,0,.9),0 0 10px rgba(34,211,238,.75)!important}

/* Epic animated WebP effects. */
.fx-webp-effect{
  position:absolute;
  bottom:0;
  z-index:1;
  width:auto;
  height:min(100%,58px);
  max-width:none;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(34,49,58,.24)) drop-shadow(0 0 7px rgba(125,211,252,.38));
  animation:fx-webp-float 2.6s ease-in-out infinite;
}
.fx-happy-webp{right:190px;height:76px;bottom:-6px}
.fx-oiia-webp{right:252px;animation-delay:-1.15s}
.fx-white-cat-webp{right:320px;animation-delay:-.6s}
.fx-yellow-hand-webp{right:210px;height:50px;animation-delay:-1.6s}
.fx-dragon-png{right:170px;height:60px;animation:none!important;filter:drop-shadow(0 2px 4px rgba(80,20,10,.45)) drop-shadow(0 0 7px rgba(255,120,20,.75)) drop-shadow(0 0 16px rgba(239,68,68,.4))}
.leaderboard-player.effect-dragon_flame .leaderboard-effect-art{
  background:
    radial-gradient(ellipse at 76% 54%,rgba(255,110,20,.36),transparent 30%),
    radial-gradient(ellipse at 24% 100%,rgba(190,24,12,.36),transparent 46%),
    radial-gradient(ellipse at 50% 118%,rgba(255,72,0,.24),transparent 54%),
    linear-gradient(180deg,#1d0504 0%,#080101 48%,#260705 100%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,150,60,.28),
    inset 0 -12px 28px rgba(255,72,0,.14),
    inset 0 0 48px rgba(0,0,0,.72)!important;
}
.leaderboard-player.effect-dragon_flame .leaderboard-effect-art::before{
  display:block!important;
  content:"";
  position:absolute;
  left:36%;
  right:-12%;
  top:-34%;
  bottom:-34%;
  background:
    radial-gradient(circle at 68% 58%,rgba(255,206,100,.46),transparent 16%),
    radial-gradient(circle at 48% 78%,rgba(255,80,0,.4),transparent 28%),
    conic-gradient(from 140deg,transparent,rgba(255,90,0,.2),transparent 26%,rgba(170,20,10,.28),transparent 62%);
  filter:blur(14px) saturate(1.3);
  opacity:.9;
  animation:dragon-hell-breathe 3.8s ease-in-out infinite alternate;
}
.leaderboard-player.effect-dragon_flame .leaderboard-effect-art::after{
  display:block!important;
  content:"";
  position:absolute;
  inset:-42% -10% -18% -10%;
  background:
    radial-gradient(circle,rgba(255,206,110,.9) 0 1px,transparent 2px) 0 0/120px 90px,
    radial-gradient(circle,rgba(255,100,24,.82) 0 1px,transparent 2px) 40px 30px/150px 110px,
    radial-gradient(circle,rgba(255,236,180,.74) 0 1px,transparent 2px) 80px 60px/180px 130px;
  opacity:.58;
  mix-blend-mode:screen;
  animation:dragon-hell-embers 5.4s linear infinite;
}
.leaderboard-player.effect-dragon_flame strong{color:#fff4e6!important;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.92),0 0 10px rgba(255,112,20,.98),0 0 22px rgba(239,68,68,.65)!important}
@keyframes dragon-hell-breathe{to{opacity:.78;transform:translateX(2%) scale(1.05) rotate(1.5deg)}}
@keyframes dragon-hell-embers{to{background-position:60px -90px,-50px -110px,90px -130px}}
@keyframes fx-webp-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@media(prefers-reduced-motion:reduce){
  .fx-webp-effect{animation:none}
  .leaderboard-player.effect-dragon_flame .leaderboard-effect-art::before,
  .leaderboard-player.effect-dragon_flame .leaderboard-effect-art::after{animation:none}
}