/* Metallic light layers for the existing podium; dimensions stay in league.html. */
.ranking .rank-row.medal.gold {
  --podium-rgb: 244 201 112;
  --podium-bright: 255 241 195;
  --podium-phase: -4s;
  --podium-speed: 19s;
  --podium-sheen-phase: 0s;
}
.ranking .rank-row.medal.silver {
  --podium-rgb: 191 211 239;
  --podium-bright: 241 248 255;
  --podium-phase: -11s;
  --podium-speed: 23s;
  --podium-sheen-phase: -12s;
}
.ranking .rank-row.medal.bronze {
  --podium-rgb: 225 153 116;
  --podium-bright: 255 219 187;
  --podium-phase: -17s;
  --podium-speed: 21s;
  --podium-sheen-phase: -6s;
}

/* The moving surfaces sit behind names and scores, inside each isolated card. */
.ranking .rank-row.medal::before,
.ranking .rank-row.medal::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.overall .ranking li:nth-child(-n+3) .rank-row.medal {
  background:
    radial-gradient(ellipse at 14% 0%, rgb(var(--podium-rgb) / .15), transparent 65%),
    linear-gradient(145deg, #23232d, #191a23 72%);
  border-color: rgb(var(--podium-rgb) / .32);
  border-top-color: rgb(var(--podium-bright) / .86);
  box-shadow:
    inset 0 1px 0 rgb(var(--podium-bright) / .16),
    inset 0 0 0 1px rgb(var(--podium-rgb) / .035),
    0 8px 26px #00000024,
    0 0 24px rgb(var(--podium-rgb) / .045);
}
.overall .ranking li:first-child .rank-row.medal {
  background:
    radial-gradient(ellipse at 34% 0%, rgb(var(--podium-rgb) / .2), transparent 72%),
    linear-gradient(145deg, #302a24, #1d1d25 76%);
  border-top-color: rgb(var(--podium-bright) / .96);
}
.overall .ranking li:nth-child(-n+3) .rank-row.medal:hover,
.overall .ranking li:nth-child(-n+3) .rank-row.medal:focus-visible {
  border-color: rgb(var(--podium-rgb) / .7);
  box-shadow:
    inset 0 1px 0 rgb(var(--podium-bright) / .25),
    0 12px 30px #00000040,
    0 0 26px rgb(var(--podium-rgb) / .09);
}
.overall .ranking li:nth-child(-n+3) .rank-row.medal::before {
  inset: -60%;
  opacity: .7;
  background:
    radial-gradient(ellipse at 28% 32%, rgb(var(--podium-rgb) / .23), transparent 43%),
    radial-gradient(ellipse at 76% 68%, rgb(var(--podium-bright) / .13), transparent 40%),
    conic-gradient(from 32deg at 48% 45%,
      transparent 0deg,
      rgb(var(--podium-rgb) / .025) 60deg,
      rgb(var(--podium-bright) / .16) 104deg,
      transparent 145deg 232deg,
      rgb(var(--podium-rgb) / .16) 280deg,
      transparent 330deg);
  transform: translate3d(-5%, -3%, 0) rotate(-12deg) scale(1.04);
  animation: swl-podium-drift var(--podium-speed) ease-in-out infinite alternate;
  animation-delay: var(--podium-phase);
  transition: opacity .7s ease;
}
.overall .ranking li:nth-child(-n+3) .rank-row.medal:hover::before {
  opacity: .9;
}
.overall .ranking li:nth-child(-n+3) .rank-row.medal::after {
  inset: -60% auto auto -95%;
  width: 58%;
  height: 220%;
  opacity: 0;
  background: linear-gradient(100deg,
    transparent 19%,
    rgb(var(--podium-rgb) / .035) 35%,
    rgb(var(--podium-bright) / .24) 49%,
    rgb(var(--podium-rgb) / .1) 56%,
    transparent 76%);
  transform: translate3d(0, 0, 0) skewX(-13deg);
  animation: swl-podium-sheen 18s cubic-bezier(.35, 0, .65, 1) infinite;
  animation-delay: var(--podium-sheen-phase);
}

/* The rank remains decorative; every readable name and score stays unanimated. */
.overall .ranking li:nth-child(-n+3) .rank-row.medal .place {
  color: rgb(var(--podium-bright));
  opacity: .46;
  text-shadow: 0 0 18px rgb(var(--podium-rgb) / .24);
  animation: swl-podium-rank 9s ease-in-out infinite alternate;
  animation-delay: var(--podium-phase);
}
.overall .ranking li:nth-child(-n+3) .rank-row.medal .person strong {
  color: #faf7fc;
  text-shadow: 0 1px 5px #11111bcc;
}
.overall .ranking li:nth-child(-n+3) .rank-row.medal .score b {
  color: rgb(var(--podium-bright));
  text-shadow: 0 0 18px rgb(var(--podium-rgb) / .13);
}
.overall .ranking li:nth-child(-n+3) .rank-row.medal .avatar {
  position: relative;
  isolation: isolate;
  background: #202129;
  border-color: rgb(var(--podium-rgb) / .75);
  color: rgb(var(--podium-bright));
  box-shadow: 0 0 18px rgb(var(--podium-rgb) / .1);
}
.overall .ranking li:nth-child(-n+3) .rank-row.medal .avatar::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 12deg,
    transparent 0deg 45deg,
    rgb(var(--podium-rgb) / .16) 85deg,
    rgb(var(--podium-bright) / .75) 126deg,
    transparent 168deg 255deg,
    rgb(var(--podium-rgb) / .22) 305deg,
    transparent 350deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
  animation: swl-podium-orbit 17s linear infinite;
  animation-delay: var(--podium-phase);
}
.overall .ranking li:first-child .rank-row.medal .avatar::after {
  animation: swl-podium-star 10s ease-in-out infinite;
  animation-delay: -3s;
}

/* Category boards share a quieter version of the same moving metal. */
.board:not(.overall) .rank-row.medal {
  background: linear-gradient(115deg, rgb(var(--podium-rgb) / .075), #ffffff02 75%);
  border-left-color: rgb(var(--podium-rgb) / .8);
  box-shadow: inset 0 1px 0 rgb(var(--podium-rgb) / .035);
}
.board:not(.overall) .rank-row.medal::before {
  inset: -65%;
  opacity: .45;
  background:
    radial-gradient(ellipse at 25% 40%, rgb(var(--podium-rgb) / .16), transparent 48%),
    radial-gradient(ellipse at 80% 72%, rgb(var(--podium-bright) / .055), transparent 40%);
  animation: swl-podium-drift 26s ease-in-out infinite alternate;
  animation-delay: var(--podium-phase);
}
.board:not(.overall) .rank-row.medal::after {
  inset: -60% auto auto -95%;
  width: 48%;
  height: 220%;
  opacity: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(var(--podium-bright) / .12) 50%, transparent 70%);
  animation: swl-podium-sheen 18s cubic-bezier(.35, 0, .65, 1) infinite;
  animation-delay: var(--podium-sheen-phase);
}
.board:not(.overall) .rank-row.medal .place {
  text-shadow: 0 0 13px rgb(var(--podium-rgb) / .15);
}

@keyframes swl-podium-drift {
  0% { transform: translate3d(-5%, -3%, 0) rotate(-12deg) scale(1.04); }
  50% { transform: translate3d(4%, 3%, 0) rotate(9deg) scale(1.08); }
  100% { transform: translate3d(-1%, 7%, 0) rotate(28deg) scale(1.04); }
}
@keyframes swl-podium-sheen {
  /* A five-second sweep, then darkness until the next 18-second cycle.
     Independent sheen phases start gold / silver / bronze at 0 / 6 / 12s;
     the one-second gaps prevent any two bright sweeps from overlapping. */
  0% { transform: translate3d(0, 0, 0) skewX(-13deg); opacity: 0; }
  6% { opacity: .12; }
  14% { opacity: .75; }
  22% { opacity: .18; }
  28%, 100% { transform: translate3d(470%, 0, 0) skewX(-13deg); opacity: 0; }
}
@keyframes swl-podium-rank {
  from { opacity: .38; }
  to { opacity: .59; }
}
@keyframes swl-podium-orbit {
  to { transform: rotate(360deg); }
}
@keyframes swl-podium-star {
  0%, 100% { transform: scale(.97) rotate(-5deg); opacity: .6; }
  50% { transform: scale(1.08) rotate(10deg); opacity: .95; }
}

@media (max-width: 600px) {
  .overall .ranking li:nth-child(-n+3) .rank-row.medal::before { opacity: .57; }
  .overall .ranking li:nth-child(-n+3) .rank-row.medal .avatar::before { inset: -4px; }
  .overall .ranking li:nth-child(-n+3) .rank-row.medal .place {
    text-shadow: 0 0 12px rgb(var(--podium-rgb) / .18);
  }
}

/* Both the app toggle and the system preference keep static metallic finishes. */
body.no-motion .rank-row.medal,
body.no-motion .rank-row.medal *,
body.no-motion .rank-row.medal::before,
body.no-motion .rank-row.medal::after,
body.no-motion .rank-row.medal *::before,
body.no-motion .rank-row.medal *::after {
  animation: none !important;
  transition: none !important;
}
body.no-motion .rank-row.medal:hover { transform: none !important; }
body.no-motion .rank-row.medal::after { opacity: 0 !important; }
body.no-motion .rank-row.medal::before { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rank-row.medal,
  .rank-row.medal *,
  .rank-row.medal::before,
  .rank-row.medal::after,
  .rank-row.medal *::before,
  .rank-row.medal *::after {
    animation: none !important;
    transition: none !important;
  }
  .rank-row.medal:hover { transform: none !important; }
  .rank-row.medal::after { opacity: 0 !important; }
  .rank-row.medal::before { transform: none !important; }
}