/* Rank tiers: the rank card art. Kept on its own so the public landing page can show real rank cards without the
   rest of the game's styles; the game loads it just before social.css, where it used to live. */
/* ---------- tiers ----------
   Rank cards are solid, textured and animated: the color and motion say the tier, so names need no label.
   They are dark, so text inside them uses light inks. */
/* The Emperor's crown, hung off the corner of champion cards and the champion's profile. */
:root { --crown-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cdefs%3E%3ClinearGradient id='m' x2='.8' y2='1'%3E%3Cstop stop-color='%23fff3ac'/%3E%3Cstop offset='.45' stop-color='%23d6a83d'/%3E%3Cstop offset='.55' stop-color='%23fff3ac'/%3E%3Cstop offset='1' stop-color='%23a8781f'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x2='0' y2='1'%3E%3Cstop stop-color='%23b0182e'/%3E%3Cstop offset='1' stop-color='%23520814'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 27 3 8l9 8 8-13 8 13 9-8-2 19Z' fill='url(%23m)' stroke='%23382d17' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M6.5 24.5h27v3.5h-27z' fill='url(%23b)' stroke='%23382d17' stroke-width='1.2'/%3E%3Cpath d='m8 11 4 4M32 11l-4 4' stroke='%23fff3ac' stroke-opacity='.6' stroke-width='.8'/%3E%3Ccircle cx='3' cy='8' r='2' fill='url(%23m)' stroke='%23382d17'/%3E%3Ccircle cx='20' cy='3' r='2.2' fill='url(%23m)' stroke='%23382d17'/%3E%3Ccircle cx='37' cy='8' r='2' fill='url(%23m)' stroke='%23382d17'/%3E%3Cpath d='m20 15 2.4 3-2.4 3-2.4-3Z' fill='%23e34b7d' stroke='%233c1730' stroke-width='.8'/%3E%3Ccircle cx='12' cy='26.2' r='1.3' fill='%234cd7ed'/%3E%3Ccircle cx='28' cy='26.2' r='1.3' fill='%234cd7ed'/%3E%3Ccircle cx='20' cy='26.2' r='1.5' fill='%23ffe6ff'/%3E%3C/svg%3E"); }
@property --rank-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* Black opal's color patches swell and fade on these, each on its own beat (social.css). */
@property --opal-a { syntax: '<number>'; inherits: false; initial-value: .5; }
@property --opal-b { syntax: '<number>'; inherits: false; initial-value: .5; }
@property --opal-c { syntax: '<number>'; inherits: false; initial-value: .5; }

.rank-unranked { --rank-base: var(--surface-2); --rank-edge: var(--border-strong); --rank-ink: var(--text-2); --rank-glow: transparent; --rank-texture: none; }
.rank-wood { --rank-base: #221a12; --rank-edge: #8f6d49; --rank-ink: #e8cfa8; --rank-glow: #7a5a3a70;
  --rank-texture: repeating-linear-gradient(6deg, #b58b5528 0 2px, transparent 2px 9px, #0e0b0866 10px 12px); }
.rank-bronze { --rank-base: #2f1810; --rank-edge: #d6834f; --rank-ink: #ffc29a; --rank-glow: #d46b3280;
  --rank-texture: repeating-linear-gradient(135deg, #ffab7016 0 1px, transparent 1px 6px); }
.rank-silver { --rank-base: #1f2938; --rank-edge: #cddcf2; --rank-ink: #f4f8ff; --rank-glow: #c1d6ef60;
  --rank-texture: repeating-linear-gradient(90deg, #ffffff0a 0 1px, transparent 1px 3px); }
.rank-gold { --rank-base: #322508; --rank-edge: #ffd84d; --rank-ink: #fff2a8; --rank-glow: #ffcf2699;
  --rank-texture: radial-gradient(120% 140% at 0% 0%, #ffe68a26, transparent 55%), repeating-linear-gradient(100deg, #ffd84d0d 0 2px, transparent 2px 7px); }
.rank-emerald { --rank-base: #082b1c; --rank-edge: #48e59b; --rank-ink: #c9ffe3; --rank-glow: #19c87999;
  --rank-texture: radial-gradient(120% 140% at 0% 0%, #5cffb32e, transparent 55%), repeating-linear-gradient(135deg, #48e59b12 0 2px, transparent 2px 7px); }
.rank-diamond { --rank-base: #0b2733; --rank-edge: #72f2ff; --rank-ink: #d6ffff; --rank-glow: #20d9ed88;
  --rank-texture: repeating-conic-gradient(from 30deg at 80% 50%, #b6ffff1c 0deg 30deg, transparent 30deg 60deg); }
/* Ruby: a pigeon-blood ruby in deep crimson, cut in a few large facets. Six broad pavilion facets fan from the center,
   two wide crown facets catch and shade the light, the corners are cut deep, and a hot heart of red fire breathes
   under it all while embers rise (::after). */
.rank-ruby { --rank-base: #4a000f; --rank-edge: #ff8a9a; --rank-ink: #fff0f2; --rank-glow: #d80a2ddd;
  --rank-texture:
    radial-gradient(circle at 14% 26%, #ffffff 0 1px, #ffb8c2cc 1.6px, transparent 3.2px),
    radial-gradient(circle at 81% 24%, #ffffff 0 .9px, #ff8c9ccc 1.5px, transparent 2.8px),
    radial-gradient(circle at 63% 80%, #ffe0e4 0 .8px, transparent 2px),
    radial-gradient(circle at 37% 70%, #ffc8d0 0 .7px, transparent 1.8px),
    linear-gradient(135deg, #ffb3bfcc 0 16px, #e0304caa 16px 17px, transparent 17.5px),
    linear-gradient(225deg, #ff9aaabb 0 16px, #c81e3aaa 16px 17px, transparent 17.5px),
    linear-gradient(45deg, #1a0006e6 0 16px, #d01c3a55 16px 17px, transparent 17.5px),
    linear-gradient(315deg, #1a0006d9 0 16px, #d01c3a55 16px 17px, transparent 17.5px),
    linear-gradient(112deg, #ff5a6e3d 0 34%, #ff8a9a66 34% calc(34% + 1px), transparent calc(34% + 1px)),
    linear-gradient(292deg, #14000466 0 30%, #b0163066 30% calc(30% + 1px), transparent calc(30% + 1px)),
    radial-gradient(38% 70% at 50% 50%, #ff3a50aa, #d80a2d44 55%, transparent 75%),
    conic-gradient(from 30deg at 50% 50%, #e0263f 0 60deg, #6a0014 0 120deg, #c8102e 0 180deg, #420009 0 240deg,
      #e0263f 0 300deg, #6a0014 0) center / 100% 100%,
    radial-gradient(70% 110% at 30% -10%, #ffa8b4b3, transparent 58%),
    linear-gradient(180deg, #c40a2c, #8a0420 45%, #3a000c); }
.rank-card.rank-ruby {
  background: var(--rank-texture), var(--rank-base);
  background-blend-mode: normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, screen, soft-light, normal, normal, normal;
  box-shadow: inset 0 1px 0 #ffe6ea, inset 0 -2px 0 #26000acc, inset 0 0 0 3px #3a000c66, inset 0 0 0 4px #ff9aaaaa, inset 0 0 16px #d01c3a66, 0 0 18px #d80a2daa; }
.rank-card.rank-ruby :is(b, strong, span, .rank-badge) { text-shadow: 0 1px 2px #26000aee, 0 0 7px #3a000ccc; }
.rank-card.rank-card.rank-ruby::before { background: linear-gradient(105deg, transparent 15%, #d01c3a33 30%, #ffdfe4ee 46%, #ffffff 50%, #e0304caa 56%, transparent 82%); --sheen: 3.5s; }
/* Embers: hot pink and white sparks that drift up through the stone and flicker. Every tile height divides 120px,
   so the layer (one period taller than the card) rises 120px and loops seamlessly on transform alone. */
.rank-card.rank-ruby::after {
  content: ''; position: absolute; inset: 0 0 -120px; z-index: -1; pointer-events: none; mix-blend-mode: screen;
  background-image: radial-gradient(circle, #ffffff 0 1px, #ffb8c288 1.6px, transparent 2.8px), radial-gradient(circle, #ff3a50 0 1.3px, transparent 2.4px),
    radial-gradient(circle, #ffc8d0 0 .9px, transparent 1.8px), radial-gradient(circle, #ff6a7a 0 1.1px, transparent 2.2px);
  background-size: 53px 40px, 79px 60px, 37px 40px, 97px 120px; background-position: 0 0, 23px 11px, 9px 29px, 51px 5px;
  animation: rank-rise-120 calc(6s * var(--rank-speed, 1)) linear var(--rank-delay, 0s) infinite,
    rank-twinkle calc(1.4s * var(--rank-speed, 1)) ease-in-out var(--rank-delay, 0s) infinite;
}
/* Emperor: deep red velvet (a soft pile sheen over crushed folds) trimmed in gold. */
.rank-champion { --rank-base: #3a0710; --rank-edge: #f3c64e; --rank-ink: #ffecc0; --rank-glow: #c4142eaa;
  --rank-texture: radial-gradient(140% 120% at 100% 0%, #ff3d5a2e, transparent 60%), radial-gradient(90% 140% at 10% 100%, #12000488, transparent 65%),
    repeating-linear-gradient(72deg, #ffffff06 0 2px, #00000014 2px 5px); }
.rank-card.rank-champion { overflow: visible; }
/* The Emperor's card lets its crown hang off the top-left corner, so it cannot clip a moving layer: the shine and
   particles share one layer inside the card's bounds that glints and twinkles in place (opacity only, which runs off
   the main thread). */
.rank-card.rank-card.rank-champion::before {
  inset: 0; width: auto; border-radius: inherit; transform: none; opacity: .35;
  background:
    linear-gradient(105deg, transparent 30%, #ffe9a899 46%, #fff6d6cc 50%, #ffe9a899 54%, transparent 70%),
    radial-gradient(circle, #ffffff 0 1px, transparent 1.6px) 0 0 / 43px 37px,
    radial-gradient(circle, #f3c64e 0 1.2px, transparent 2px) 20px 10px / 71px 53px;
  animation: emperor-glint calc(3.4s * var(--rank-speed, 1)) ease-in-out var(--rank-delay, 0s) infinite;
}
@keyframes emperor-glint { 0%, 100% { opacity: .3; } 45% { opacity: 1; } 60% { opacity: .55; } }
.rank-card.rank-card.rank-champion::after {
  content: ''; position: absolute; z-index: 2; pointer-events: none; inset: auto;
  top: max(-1.35em, -16px); left: max(-1em, -12px); width: clamp(22px, 2.8em, 40px); height: clamp(18px, 2.25em, 32px); opacity: 1;
  background: var(--crown-art) center / contain no-repeat;
  transform: rotate(-24deg); filter: drop-shadow(0 2px 2px rgb(0 0 0 / .6)); animation: none;
}
/* Granite: speckled gray stone. Quartz: a pale, milky-pink crystal with soft facets. */
.rank-granite { --rank-base: #1d2024; --rank-edge: #8d96a3; --rank-ink: #dde3ea; --rank-glow: #6d778560;
  --rank-texture: radial-gradient(circle at 20% 30%, #ffffff12 0 2px, transparent 3px) 0 0 / 11px 9px, radial-gradient(circle at 70% 60%, #0000003a 0 2px, transparent 3px) 0 0 / 13px 12px,
    radial-gradient(circle at 50% 50%, #e8c8b018 0 1px, transparent 2px) 0 0 / 7px 8px; }
.rank-quartz { --rank-base: #2a2229; --rank-edge: #f2cfe0; --rank-ink: #fff0f6; --rank-glow: #f0b8d455;
  --rank-texture: linear-gradient(125deg, #ffffff1c 0 18%, transparent 18% 40%, #ffffff10 40% 52%, transparent 52%),
    radial-gradient(120% 140% at 0% 0%, #ffd6e830, transparent 55%); }
/* Opal: a clear, glassy stone. The card is partly see-through (the page blurs behind it), with vivid play of color
   drifting under a glossy surface and bright colored sparks winking through it. */
.rank-opal { --rank-base: rgb(30 36 54 / .68); --rank-edge: #f4fbff; --rank-ink: #ffffff; --rank-glow: #8ff0ffaa;
  --rank-texture: radial-gradient(42% 70% at 16% 30%, #ff4fb8a6, transparent 70%), radial-gradient(42% 70% at 60% 82%, #22ffaa99, transparent 70%),
    radial-gradient(38% 62% at 86% 22%, #3f9dffb3, transparent 70%), radial-gradient(32% 55% at 44% 8%, #ffd23f99, transparent 70%),
    radial-gradient(30% 60% at 96% 90%, #b45cff99, transparent 70%); }
.rank-card.rank-opal {
  background:
    linear-gradient(180deg, #ffffff47 0, #ffffff14 46%, transparent 47%),
    var(--rank-texture), linear-gradient(120deg, var(--rank-glow), transparent 80%), var(--rank-base);
  background-size: auto, 170% 170%, 170% 170%, 170% 170%, 170% 170%, 170% 170%, auto, auto;
  backdrop-filter: blur(8px) saturate(1.6); -webkit-backdrop-filter: blur(8px) saturate(1.6);
  box-shadow: inset 0 1px 0 #ffffffcc, inset 0 0 0 1px #ffffff2e, inset 0 -10px 18px #0a0f2a55, 0 0 14px #8ff0ff40; }
/* Topaz: an imperial topaz, a brilliant-cut stone in bright orange. Four pavilion facets meet under the table, fine
   facet lines cross the stone, the corners are cut (light at the top, shade below), and glints sit on the facet edges.
   The body stays deep enough under the facets for the light card text to read. */
.rank-topaz { --rank-base: #d45f00; --rank-edge: #ffd98a; --rank-ink: #fff6e6; --rank-glow: #ff9a1fee;
  --rank-texture:
    radial-gradient(circle at 18% 22%, #fff8e6 0 1px, #ffe3a8aa 1.6px, transparent 3px),
    radial-gradient(circle at 74% 30%, #fff8e6 0 .8px, #ffd28acc 1.4px, transparent 2.6px),
    radial-gradient(circle at 58% 78%, #ffefcf 0 .8px, transparent 2px),
    linear-gradient(135deg, #ffe7bfcc 0 9px, #ffc06a88 9px 10px, transparent 10.5px),
    linear-gradient(225deg, #ffd79acc 0 9px, #ffb04d70 9px 10px, transparent 10.5px),
    linear-gradient(45deg, #4a1600cc 0 9px, #ff9a3c40 9px 10px, transparent 10.5px),
    linear-gradient(315deg, #4a1600b0 0 9px, #ff9a3c40 9px 10px, transparent 10.5px),
    repeating-linear-gradient(62deg, #fff1d040 0 1px, transparent 1px 19px),
    repeating-linear-gradient(-62deg, #fff1d02e 0 1px, transparent 1px 19px),
    repeating-linear-gradient(90deg, transparent 0 37px, #5a1c0030 37px 38px),
    conic-gradient(from 45deg at 50% 50%, #ffe0a066 0 25%, #ff9a2a38 0 50%, #ffc46b5c 0 75%, #a8420055 0),
    radial-gradient(70% 110% at 32% -8%, #ffe9b8bb, transparent 58%),
    linear-gradient(180deg, #ffa024, #ff7a0a 45%, #c45200); }
.rank-card.rank-topaz { box-shadow: inset 0 1px 0 #fff6e0ee, inset 0 -2px 0 #7a2a00aa, inset 0 0 0 3px #a8420055, inset 0 0 0 4px #ffd98a77, 0 0 14px #ff9a1f77; }
.rank-card.rank-topaz :is(b, strong, span, .rank-badge) { text-shadow: 0 1px 2px #5a1c00dd, 0 0 6px #7a2a0099; }
/* Black opal: a deep blue-black stone. Large patches of color glow through it (they swell and fade out of step under
   the high-rank animations, social.css), a thin rim slowly turns through the colors, and its play of color is Opal's
   inverted (::before): the same grid of pinpoints, each in the complement of Opal's hue, sinking through the dark stone
   where Opal's rise through the milky one, and winking out of step with them. It throws off no particles.
   The base is a gradient layer: a bare color is only valid as the last layer, and anywhere else it drops the whole
   background and leaves the card see-through. */
.rank-blackopal { --rank-base: #05070f; --rank-edge: #f0b45c; --rank-ink: #fff1db; --rank-glow: #13285a80;
  --rank-texture: radial-gradient(120% 140% at 15% 110%, #0f3a4a66, transparent 55%), radial-gradient(90% 120% at 95% -10%, #2a1452aa, transparent 60%),
    repeating-linear-gradient(118deg, #ffffff05 0 1px, transparent 1px 14px); }
.rank-card.rank-blackopal {
  border: 1.5px solid transparent !important;
  background: radial-gradient(70% 170% at 16% 66%, #ff8a2a4a, transparent 70%) padding-box, radial-gradient(62% 160% at 54% 22%, #2fd3c540, transparent 70%) padding-box,
    radial-gradient(60% 170% at 90% 72%, #7a5cff4d, transparent 70%) padding-box, radial-gradient(46% 130% at 38% 104%, #3f8cff33, transparent 70%) padding-box,
    var(--rank-texture) padding-box, linear-gradient(120deg, var(--rank-glow), transparent 80%) padding-box, linear-gradient(var(--rank-base), var(--rank-base)) padding-box,
    conic-gradient(from 200deg, #f0b45c, #3fe0c5, #4a7dff, #b06cff, #ff6a4d, #f0b45c) border-box;
  box-shadow: 0 0 18px #3f6bff2e, inset 0 0 22px #00000080;
}
/* Opal's spark grid (its tile sizes and offsets), in the complementary hues, falling: the layer reaches 120px above the
   card and slides down that far, so the card is always covered and the loop is seamless. */
.rank-card.rank-blackopal::before {
  content: ''; position: absolute; inset: -120px 0 0; z-index: -1; pointer-events: none; mix-blend-mode: screen;
  background-image: radial-gradient(circle, #ffe9a8 0 1px, #ffe9a866 1.5px, transparent 2.6px), radial-gradient(circle, #5cffa3 0 1.2px, transparent 2.2px),
    radial-gradient(circle, #ff3d86 0 1.1px, transparent 2px), radial-gradient(circle, #4a6dff 0 1px, transparent 1.9px), radial-gradient(circle, #ffaa5a 0 1.2px, transparent 2.2px);
  background-size: 47px 30px, 67px 40px, 83px 60px, 59px 120px, 101px 40px; background-position: 0 0, 21px 13px, 40px 27px, 9px 35px, 55px 7px;
  animation: rank-fall-120 calc(8s * var(--rank-speed, 1)) linear var(--rank-delay, 0s) infinite,
    rank-twinkle calc(1.6s * var(--rank-speed, 1)) ease-in-out calc(var(--rank-delay, 0s) - .8s) infinite;
}
:root.reduce-motion .rank-card.rank-blackopal, :root.reduce-motion .rank-card.rank-blackopal::before, :root.reduce-motion .rank-card.rank-blackopal::after { animation: none; }
/* A card well out of view stands still (motion.js). */
.rank-card.rank-far, .rank-card.rank-far::before, .rank-card.rank-far::after, .rank-card.rank-far *, .rank-card.rank-far *::before, .rank-card.rank-far *::after { animation: none !important; }

.rank-card {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid var(--rank-edge); border-radius: var(--radius);
  background: var(--rank-texture, none), linear-gradient(120deg, var(--rank-glow), transparent 80%), var(--rank-base);
}
.rank-card:not(.rank-unranked) { --text: #eef1f7; --text-2: #c2c9d8; --text-3: #8c95a8; color: var(--text); color-scheme: dark; }
.rank-card::before, .rank-card::after { content: none; }
.rank-badge { color: var(--rank-ink, var(--accent)); font: 700 9.5px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.ranked-identity .rank-badge { font: 700 30px/1 var(--font-head); letter-spacing: .04em; }

/* Sheen: a bright band sweeps across every tier from bronze up; faster and brighter the higher the tier. */
.rank-card:is(.rank-quartz, .rank-bronze, .rank-silver, .rank-gold, .rank-emerald, .rank-topaz, .rank-diamond, .rank-ruby, .rank-opal, .rank-champion)::before {
  content: ''; position: absolute; inset: -1px auto -1px 0; width: 55%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, #ffffff10 38%, #ffffff66 50%, #ffffff10 62%, transparent 80%);
  transform: translateX(-130%) skewX(-12deg);
  animation: rank-sheen calc(var(--sheen, 5.5s) * var(--rank-speed, 1)) cubic-bezier(.5, 0, .3, 1) var(--rank-delay, 0s) infinite;
}
.rank-quartz::before { opacity: .4; --sheen: 7.5s; }
.rank-bronze::before { opacity: .45; --sheen: 7s; }
.rank-opal::before { background: linear-gradient(105deg, transparent 15%, #ff7ad033 30%, #ffffffee 46%, #5ff7ff88 54%, #ffe27a44 62%, transparent 82%); --sheen: 3.6s; }
.rank-silver::before { opacity: .7; --sheen: 6s; }
.rank-gold::before { background: linear-gradient(105deg, transparent 20%, #fff3b010 38%, #fff7c8aa 50%, #fff3b010 62%, transparent 80%); --sheen: 4.6s; }
.rank-emerald::before { background: linear-gradient(105deg, transparent 20%, #73ffb022 38%, #c5ffdeaa 50%, #73ffb022 62%, transparent 80%); --sheen: 5.2s; }
.rank-topaz::before { background: linear-gradient(105deg, transparent 18%, #ffcf8a33 34%, #fff6e2dd 48%, #ffb04d66 56%, transparent 80%); --sheen: 4.4s; }
.rank-diamond::before { background: linear-gradient(105deg, transparent 15%, #7ff6ff22 32%, #ffffffbb 46%, #ff9cf655 54%, #7ff6ff22 66%, transparent 85%); --sheen: 3.9s; }
.rank-champion::before { background: linear-gradient(105deg, transparent 15%, #ff3d5a33 32%, #ffeab0dd 48%, #f3c64e55 62%, transparent 85%); --sheen: 3.4s; }

/* Glow: gold, emerald and diamond carry a soft halo. It holds still: an animated shadow repaints on the main thread
   every frame, once per card, which is what made long player lists slow on weaker devices. */
.rank-card:is(.rank-gold, .rank-emerald, .rank-diamond) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rank-glow) 50%, transparent), 0 0 12px var(--rank-glow); }

/* Diamond and champion throw off particles. */
.rank-card:is(.rank-diamond, .rank-champion)::after {
  content: ''; position: absolute; inset: 0 0 -120px; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, #ffffff 0 1px, transparent 1.6px), radial-gradient(circle, var(--rank-edge) 0 1.2px, transparent 2px), radial-gradient(circle, #ffffffaa 0 .8px, transparent 1.5px);
  background-size: 43px 40px, 71px 60px, 101px 120px; background-position: 0 0, 20px 10px, 40px 30px;
  animation: rank-rise-120 calc(var(--drift, 7s) * var(--rank-speed, 1)) linear var(--rank-delay, 0s) infinite,
    rank-twinkle calc(var(--twinkle, 2.4s) * var(--rank-speed, 1)) ease-in-out var(--rank-delay, 0s) infinite;
}
.rank-diamond::after { opacity: .5; --drift: 11s; --twinkle: 1.8s; }
/* Opal sparks: pinpoints in its play-of-color hues that drift and wink. */
.rank-card.rank-opal::after {
  content: ''; position: absolute; inset: 0 0 -120px; z-index: -1; pointer-events: none; mix-blend-mode: screen;
  background-image: radial-gradient(circle, #ffffff 0 1px, #ffffff66 1.5px, transparent 2.6px), radial-gradient(circle, #ff5cc8 0 1.2px, transparent 2.2px),
    radial-gradient(circle, #3dffb8 0 1.1px, transparent 2px), radial-gradient(circle, #ffd84a 0 1px, transparent 1.9px), radial-gradient(circle, #5aaaff 0 1.2px, transparent 2.2px);
  background-size: 47px 30px, 67px 40px, 83px 60px, 59px 120px, 101px 40px; background-position: 0 0, 21px 13px, 40px 27px, 9px 35px, 55px 7px;
  animation: rank-rise-120 calc(8s * var(--rank-speed, 1)) linear var(--rank-delay, 0s) infinite,
    rank-twinkle calc(1.6s * var(--rank-speed, 1)) ease-in-out var(--rank-delay, 0s) infinite;
}

/* Champion: a gold-and-crimson border and a heavier aura. */
.rank-card.rank-champion {
  border: 2px solid transparent;
  background:
    var(--rank-texture) padding-box, linear-gradient(120deg, var(--rank-glow), transparent 80%) padding-box, linear-gradient(var(--rank-base), var(--rank-base)) padding-box,
    conic-gradient(from 135deg, #fff1b8, #c99a26, #ffe08a, #9c1427, #fff1b8) border-box;
  box-shadow: inset 0 0 18px #ff445c4d, 0 0 18px #f3c64e80; animation: none;
}

@keyframes rank-sheen { 0%, 35% { transform: translateX(-130%) skewX(-12deg); } 75%, 100% { transform: translateX(260%) skewX(-12deg); } }
@keyframes rank-twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* Particle layers are one 120px period taller (or wider) than their card and slide by exactly that period. */
@keyframes rank-rise-120 { to { translate: 0 -120px; } }
@keyframes rank-fall-120 { to { translate: 0 120px; } }
:root.reduce-motion .rank-card, :root.reduce-motion .rank-card::before, :root.reduce-motion .rank-card::after { animation: none !important; }