.rank-render {
  --rank-primary: #ff2f9a;
  --rank-secondary: #43f3ff;
  --rank-value: #fff15a;
  --rank-text: #ffffff;
  --rank-panel: rgba(7, 8, 13, .58);
  width: 100%;
  max-width: 500px;
  color: var(--rank-text);
  font-family: "Arial Black", "Segoe UI Black", Arial, system-ui, sans-serif;
}

.rank-render,
.rank-render * {
  box-sizing: border-box;
}

.rank-preview-slot {
  min-width: 0;
}

.rank-preview-slot .rank-render {
  max-width: 100%;
}

.rank-render[data-theme="Blue"] {
  --rank-primary: #2d8cff;
  --rank-secondary: #43f3ff;
  --rank-value: #fff15a;
}

.rank-render[data-theme="Pink"] {
  --rank-primary: #ff2f9a;
  --rank-secondary: #ff7ad1;
  --rank-value: #fff15a;
}

.rank-render[data-theme="Gold"] {
  --rank-primary: #ffd66b;
  --rank-secondary: #ff2f9a;
  --rank-value: #ffe45c;
}

.rank-render[data-theme="Cyan"] {
  --rank-primary: #43f3ff;
  --rank-secondary: #8effaa;
  --rank-value: #ffffff;
}

.rank-render[data-theme="RGB"] {
  --rank-primary: #ff2f9a;
  --rank-secondary: #43f3ff;
  --rank-value: #fff15a;
}

.rank-render-list {
  display: grid;
  gap: 10px;
  width: 100%;
}

.rank-render-row {
  position: relative;
  min-height: 76px;
  display: grid;
  grid-template-columns: 34px 54px minmax(0, 1fr);
  grid-template-areas: "place avatar person";
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 10px;
  border: 1px solid color-mix(in srgb, var(--rank-secondary) 26%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rank-primary) 18%, transparent), transparent 44%),
    var(--rank-panel);
  box-shadow: inset 0 0 12px rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.28);
  overflow: hidden;
}

.rank-render-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--rank-secondary), var(--rank-primary));
  box-shadow: 0 0 12px color-mix(in srgb, var(--rank-secondary) 52%, transparent);
}

.rank-render[data-direction="right"] .rank-render-row {
  grid-template-columns: minmax(0, 1fr) 54px 34px;
  grid-template-areas: "person avatar place";
  text-align: right;
  background:
    linear-gradient(270deg, color-mix(in srgb, var(--rank-primary) 18%, transparent), transparent 44%),
    var(--rank-panel);
}

.rank-render-row.has-medal-frame {
  min-height: 84px;
}

.rank-render[data-direction="right"] .rank-render-row::before {
  left: auto;
  right: 0;
}

.rank-render[data-background="solid"] {
  --rank-panel: rgba(10, 12, 18, .9);
}

.rank-render[data-background="transparent"] .rank-render-row {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  padding-inline: 0;
}

.rank-render[data-background="transparent"] .rank-render-row::before {
  display: none;
}

.rank-render[data-style="Neon"] .rank-render-row {
  border-color: color-mix(in srgb, var(--rank-secondary) 42%, transparent);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--rank-secondary) 20%, transparent),
    0 0 28px color-mix(in srgb, var(--rank-primary) 14%, transparent);
}

.rank-render[data-style="Livehub"] .rank-render-row {
  border-color: color-mix(in srgb, var(--rank-primary) 34%, transparent);
  background:
    radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--rank-primary) 22%, transparent), transparent 34%),
    linear-gradient(90deg, rgba(255,47,154,.16), rgba(67,243,255,.08)),
    var(--rank-panel);
}

.rank-render[data-style="Premium"] .rank-render-row {
  border-color: rgba(255, 214, 107, .55);
  background:
    linear-gradient(90deg, rgba(255,214,107,.18), rgba(255,47,154,.08) 48%, rgba(67,243,255,.1)),
    rgba(8, 8, 12, .62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 20px rgba(255,214,107,.16);
}

.rank-render-place {
  grid-area: place;
  position: relative;
  z-index: 1;
  min-width: 34px;
  font-size: 16px;
  line-height: 1;
  color: var(--rank-secondary);
  text-align: center;
  text-shadow: 0 0 7px color-mix(in srgb, var(--rank-secondary) 58%, transparent), 0 2px 0 #000;
}

.rank-render-avatar {
  grid-area: avatar;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--rank-primary);
  background: #11121a;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.14),
    0 0 18px color-mix(in srgb, var(--rank-secondary) 48%, transparent);
}

.rank-render-row:first-child .rank-render-avatar {
  border-color: #ffe36f;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 0 22px rgba(255,227,111,.58);
}

.rank-render-avatar-frame {
  grid-area: avatar;
  position: relative;
  z-index: 2;
  justify-self: center;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.rank-render-avatar-frame .rank-render-avatar {
  grid-area: auto;
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border: 0;
  box-shadow: none;
}

.rank-render-avatar-frame.is-like-frame .rank-render-avatar {
  width: 44px;
  height: 44px;
}

.rank-render-avatar-frame.is-like-frame[data-rank="1"] .rank-render-avatar {
  transform: translate(-.4px, -.4px);
}

.rank-render-avatar-frame.is-like-frame[data-rank="2"] .rank-render-avatar {
  transform: translate(-1.3px, .5px);
}

.rank-render-avatar-frame.is-like-frame[data-rank="3"] .rank-render-avatar {
  transform: translate(.4px, -.5px);
}

.rank-render-avatar-frame.is-like-frame .rank-render-avatar-medal {
  filter:
    drop-shadow(0 0 8px rgba(255, 62, 164, .26))
    drop-shadow(0 5px 7px rgba(0, 0, 0, .48));
}

.rank-render-avatar-frame.is-like-frame[data-rank="1"] .rank-render-avatar-medal {
  filter:
    drop-shadow(0 0 9px rgba(255, 204, 62, .48))
    drop-shadow(0 5px 7px rgba(0, 0, 0, .48));
}

.rank-render-avatar-frame.is-like-frame[data-rank="2"] .rank-render-avatar-medal {
  filter:
    drop-shadow(0 0 8px rgba(225, 233, 255, .42))
    drop-shadow(0 5px 7px rgba(0, 0, 0, .48));
}

.rank-render-avatar-frame.is-like-frame[data-rank="3"] .rank-render-avatar-medal {
  filter:
    drop-shadow(0 0 8px rgba(255, 132, 45, .42))
    drop-shadow(0 5px 7px rgba(0, 0, 0, .48));
}

.rank-render-avatar-medal {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 214, 90, .42)) drop-shadow(0 5px 7px rgba(0, 0, 0, .48));
}

.rank-render-avatar-frame[data-rank="2"] .rank-render-avatar-medal {
  filter: drop-shadow(0 0 8px rgba(217, 232, 255, .38)) drop-shadow(0 5px 7px rgba(0, 0, 0, .48));
}

.rank-render-avatar-frame[data-rank="3"] .rank-render-avatar-medal {
  filter: drop-shadow(0 0 8px rgba(255, 160, 76, .38)) drop-shadow(0 5px 7px rgba(0, 0, 0, .48));
}

.rank-render-person {
  grid-area: person;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  min-width: 0;
  width: 100%;
}

.rank-render[data-direction="right"] .rank-render-person {
  justify-items: end;
}

.rank-render-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,.9), 0 0 8px rgba(255,255,255,.28);
}

.rank-render-value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  color: var(--rank-value);
  font: 1000 28px/1 "Segoe UI Black", "Arial Black", Arial, system-ui, sans-serif;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 rgba(0,0,0,.95), 0 0 8px color-mix(in srgb, var(--rank-value) 34%, transparent);
}

.rank-render-value i {
  color: #ff365e;
  font: 900 18px/1 "Segoe UI Emoji", "Apple Color Emoji", system-ui, sans-serif;
  font-style: normal;
  filter: drop-shadow(0 0 6px rgba(255,54,94,.72));
}

.rank-render-value .rank-render-coin {
  width: 21px;
  height: 21px;
  display: inline-grid;
  flex: 0 0 21px;
  place-items: center;
  border: 2px solid #ffe994;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff19c, #e69a0c 62%, #9d5900);
  color: #6e3c00;
  font: 1000 12px/1 "Segoe UI Black", "Arial Black", Arial, sans-serif;
  font-style: normal;
  text-shadow: none;
  box-shadow:
    0 0 10px rgba(255, 193, 35, .34),
    inset 0 1px 0 rgba(255, 255, 255, .68);
  filter: none;
}

.rank-render-value[data-kind="likes"] {
  min-height: 30px;
  padding: 2px 9px 3px 11px;
  border: 1px solid rgba(255, 74, 165, .2);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 47, 154, .12), rgba(255, 54, 94, .045));
  box-shadow: inset 0 0 12px rgba(255, 74, 165, .04);
}

.rank-render-value[data-kind="coins"] {
  min-height: 30px;
  padding: 2px 10px 3px 7px;
  border: 1px solid rgba(255, 207, 73, .24);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 196, 35, .14), rgba(255, 139, 20, .045));
  box-shadow:
    inset 0 0 12px rgba(255, 208, 73, .05),
    0 0 10px rgba(255, 193, 35, .035);
}

.rank-render-value .rank-render-like-heart {
  transform-origin: center;
  animation: rank-like-heartbeat 2.2s ease-in-out infinite;
}

@keyframes rank-like-heartbeat {
  0%, 68%, 100% { transform: scale(1); }
  74% { transform: scale(1.18); }
  81% { transform: scale(.96); }
  88% { transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .rank-render-value .rank-render-like-heart {
    animation: none;
  }
}

.rank-render-empty {
  padding: 14px;
  border-radius: 8px;
  text-align: center;
  color: rgba(255,255,255,.78);
  background: rgba(0,0,0,.28);
  font: 800 13px/1.2 system-ui, sans-serif;
}

.rank-render[data-background="transparent"] .rank-render-empty {
  background: transparent;
}

.rank-render-shell {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}

.rank-render-shell[data-direction="right"] {
  justify-content: flex-end;
}

.rank-render-shell[data-direction="center"] {
  justify-content: center;
}

.rank-render-shell .rank-render {
  width: min(100vw, 500px);
  max-width: 100vw;
}

.rank-render-shell .rank-render-row {
  min-height: 96px;
  grid-template-columns: 40px 80px minmax(0, 1fr);
  gap: 14px;
}

.rank-render-shell .rank-render[data-direction="right"] .rank-render-row {
  grid-template-columns: minmax(0, 1fr) 80px 40px;
}

.rank-render-shell .rank-render-avatar {
  width: 80px;
  height: 80px;
  border-width: 4px;
}

.rank-render-shell .rank-render-avatar-frame {
  width: 100px;
  height: 100px;
}

.rank-render-shell .rank-render-avatar-frame .rank-render-avatar,
.rank-render-shell .rank-render-avatar-frame.is-like-frame .rank-render-avatar {
  width: 62px;
  height: 62px;
}

.rank-render-weekly {
  position: relative;
  overflow: hidden;
  max-width: 620px;
  padding: 18px;
  box-sizing: border-box;
}

.rank-render-weekly[data-background="transparent"] {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.rank-render-weekly[data-background="glass"] {
  border: 1px solid color-mix(in srgb, var(--rank-secondary) 32%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rank-primary) 18%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(9, 12, 18, .72), rgba(5, 7, 12, .42));
  box-shadow: inset 0 0 24px rgba(255,255,255,.045), 0 20px 70px rgba(0,0,0,.34);
}

.rank-render-weekly[data-background="solid"] {
  border-radius: 16px;
  background: rgba(6, 8, 13, .92);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rank-secondary) 20%, transparent);
}

.rank-render-weekly[data-theme="Blue"] {
  --rank-primary: #2d8cff;
  --rank-secondary: #43f3ff;
  --rank-value: #eaf8ff;
}

.rank-render-weekly[data-theme="Pink"] {
  --rank-primary: #ff2f9a;
  --rank-secondary: #ff7ad1;
  --rank-value: #ffe1f3;
}

.rank-render-weekly[data-theme="Gold"] {
  --rank-primary: #ffd66b;
  --rank-secondary: #ffb02e;
  --rank-value: #fff15a;
}

.rank-render-weekly[data-theme="RGB"] {
  --rank-primary: #ff2f9a;
  --rank-secondary: #43f3ff;
  --rank-value: #fff15a;
}

.weekly-rank-title {
  position: relative;
  z-index: 4;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(200px, 38vw, 228px);
  margin: -2px auto -2px;
  overflow: visible;
  pointer-events: none;
}

.weekly-rank-title::after {
  content: "";
  position: absolute;
  inset: 14% 23% 8%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, color-mix(in srgb, var(--rank-value) 28%, transparent), transparent 58%),
    radial-gradient(ellipse, color-mix(in srgb, var(--rank-primary) 38%, transparent), transparent 74%);
  filter: blur(36px);
  transform: scale(1.5, 1.28);
}

.weekly-rank-title img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(76%, 330px);
  height: auto;
  object-fit: contain;
  filter:
    saturate(1.1)
    contrast(1.08)
    drop-shadow(0 0 10px rgba(255, 185, 43, .32))
    drop-shadow(0 0 16px rgba(149, 42, 255, .24));
}

.weekly-podium {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  align-items: end;
  gap: 16px;
  min-height: 232px;
  margin-top: -16px;
  padding: 16px 8px 12px;
}

.weekly-podium::before {
  content: "";
  position: absolute;
  inset: auto 8% 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rank-secondary) 62%, transparent), transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--rank-secondary) 45%, transparent);
}

.weekly-podium-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  transform: translateY(10px);
}

.weekly-podium-card.is-first {
  transform: translateY(-6px);
}

.weekly-podium-card::before {
  content: "";
  position: absolute;
  top: 26px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--rank-primary) 28%, transparent), transparent 66%);
  filter: blur(4px);
  opacity: .9;
}

.weekly-rank-badge {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--rank-value) 72%, #fff 18%);
  border-radius: 999px;
  color: #fff;
  background: rgba(5, 7, 12, .72);
  font: 1000 12px/1 "Arial Black", Arial, sans-serif;
  text-shadow: 0 2px 0 rgba(0,0,0,.8), 0 0 10px color-mix(in srgb, var(--rank-value) 55%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--rank-value) 35%, transparent);
}

.weekly-medal-frame {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  isolation: isolate;
}

.weekly-podium-card.is-first .weekly-medal-frame {
  width: 150px;
  height: 150px;
}

.weekly-medal-art {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter:
    drop-shadow(0 0 12px color-mix(in srgb, var(--rank-value) 45%, transparent))
    drop-shadow(0 10px 16px rgba(0,0,0,.48));
}

.weekly-podium-avatar {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: #171b24;
  border: 4px solid color-mix(in srgb, var(--rank-secondary) 70%, #fff 30%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.16),
    0 0 22px color-mix(in srgb, var(--rank-secondary) 55%, transparent),
    inset 0 0 12px rgba(255,255,255,.18);
}

.weekly-medal-frame .weekly-podium-avatar {
  width: 64%;
  height: 64%;
  border: 0;
  box-shadow:
    0 0 18px rgba(0,0,0,.55),
    inset 0 0 16px rgba(255,255,255,.14);
}

.weekly-podium-card.is-first .weekly-podium-avatar {
  width: 64%;
  height: 64%;
  border-color: #ffe66f;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.22),
    0 0 28px rgba(255,226,83,.72),
    0 0 46px color-mix(in srgb, var(--rank-primary) 36%, transparent);
}

.weekly-podium-name {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font: 1000 13px/1.05 "Arial Black", Arial, system-ui, sans-serif;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0,0,0,.9), 0 0 9px rgba(255,255,255,.25);
}

.weekly-podium-card.is-first .weekly-podium-name {
  font-size: 15px;
}

.weekly-podium-value {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--rank-value);
  font: 1000 18px/1 "Arial Black", Arial, system-ui, sans-serif;
  text-shadow: 0 2px 0 #000, 0 0 12px color-mix(in srgb, var(--rank-value) 46%, transparent);
}

.weekly-podium-value i {
  color: #ffdf52;
  font-style: normal;
  font-size: 11px;
  filter: drop-shadow(0 0 6px rgba(255,223,82,.8));
}

.weekly-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.weekly-particles span {
  position: absolute;
  left: var(--x);
  bottom: -18px;
  width: var(--size);
  height: var(--size);
  border-radius: 48% 52% 44% 56%;
  background:
    radial-gradient(circle at 34% 30%, #fff, transparent 32%),
    color-mix(in srgb, var(--rank-value) 84%, #fff 16%);
  opacity: 0;
  box-shadow:
    0 0 10px color-mix(in srgb, var(--rank-value) 75%, transparent),
    0 0 20px color-mix(in srgb, var(--rank-secondary) 45%, transparent);
  animation: weeklyParticleRise var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
  will-change: transform, opacity;
}

.weekly-particles span:nth-child(3n) {
  border-radius: 2px;
  background:
    linear-gradient(135deg, #fff 0 18%, transparent 19%),
    color-mix(in srgb, var(--rank-secondary) 80%, #fff 20%);
}

.weekly-particles span:nth-child(4n) {
  width: calc(var(--size) * 1.8);
  height: 2px;
  border-radius: 999px;
}

@keyframes weeklyParticleRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) rotate(0deg) scale(.5);
  }
  12% {
    opacity: .82;
  }
  48% {
    opacity: .68;
    transform: translate3d(calc(var(--drift) * .45), -128px, 0) rotate(calc(var(--rotate) * .55)) scale(1);
  }
  82% {
    opacity: .42;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift), -285px, 0) rotate(var(--rotate)) scale(1.18);
  }
}

.weekly-rank-tail {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--rank-secondary) 22%, transparent);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rank-primary) 14%, transparent), transparent 55%),
    rgba(5, 7, 12, .36);
  box-shadow: inset 0 0 18px rgba(255,255,255,.035);
}

.rank-render-weekly[data-background="transparent"] .weekly-rank-tail {
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.weekly-tail-row {
  display: grid;
  grid-template-columns: 42px 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--rank-secondary) 20%, transparent);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(8, 10, 16, .72), rgba(12, 15, 24, .48));
}

.rank-render-weekly[data-background="transparent"] .weekly-tail-row {
  border-color: color-mix(in srgb, var(--rank-secondary) 24%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rank-primary) 13%, transparent), transparent 70%),
    rgba(0, 0, 0, .14);
  box-shadow: none;
}

.rank-render-weekly[data-background="transparent"][data-style="Podium"] .weekly-tail-row {
  background: transparent;
}

.rank-render-weekly[data-style="Crown"] .weekly-tail-row {
  border-color: color-mix(in srgb, var(--rank-value) 42%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--rank-value) 12%, transparent);
}

.rank-render-weekly[data-style="Cards"] .weekly-tail-row {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rank-primary) 22%, transparent), color-mix(in srgb, var(--rank-secondary) 8%, transparent)),
    rgba(7, 9, 16, .62);
}

.weekly-tail-row span {
  color: var(--rank-secondary);
  font: 1000 14px/1 "Arial Black", Arial, sans-serif;
  text-shadow: 0 0 9px color-mix(in srgb, var(--rank-secondary) 45%, transparent);
}

.weekly-tail-row img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--rank-secondary) 60%, #fff 20%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--rank-secondary) 28%, transparent);
}

.weekly-tail-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font: 900 14px/1 "Arial Black", Arial, sans-serif;
}

.weekly-tail-row b {
  color: var(--rank-value);
  font: 1000 16px/1 "Arial Black", Arial, sans-serif;
  text-shadow: 0 2px 0 #000;
}

.rank-render-weekly[data-style="Crown"] .weekly-podium-card::before,
.rank-render-weekly[data-theme="RGB"] .weekly-podium-card::before {
  background:
    conic-gradient(from 90deg, rgba(255,47,154,.35), rgba(67,243,255,.35), rgba(255,214,107,.32), rgba(255,47,154,.35));
}

.rank-render-weekly[data-style="Cards"] .weekly-podium {
  gap: 10px;
}

.rank-render-weekly[data-style="Cards"] .weekly-podium-card {
  padding: 10px 6px;
  border: 1px solid color-mix(in srgb, var(--rank-secondary) 28%, transparent);
  border-radius: 14px;
  background: rgba(8, 10, 16, .55);
}

@media (min-width: 700px) and (min-height: 700px) {
  .rank-render-shell {
    padding: 18px;
  }

  .rank-render-shell .rank-render {
    width: min(100%, 620px);
    max-width: 620px;
  }

  .rank-render-shell .rank-render-list {
    gap: 12px;
  }

  .rank-render-shell .rank-render-row {
    min-height: 108px;
    grid-template-columns: 46px 80px minmax(0, 1fr);
    gap: 18px;
    padding: 12px 18px 12px 12px;
    border-radius: 10px;
  }

  .rank-render-shell .rank-render[data-direction="right"] .rank-render-row {
    grid-template-columns: minmax(0, 1fr) 80px 46px;
  }

  .rank-render-shell .rank-render-place {
    min-width: 46px;
    font-size: 24px;
  }

  .rank-render-shell .rank-render-avatar {
    width: 80px;
    height: 80px;
    border-width: 4px;
  }

  .rank-render-shell .rank-render-avatar-frame {
    width: 116px;
    height: 116px;
  }

  .rank-render-shell .rank-render-avatar-frame .rank-render-avatar,
  .rank-render-shell .rank-render-avatar-frame.is-like-frame .rank-render-avatar {
    width: 70px;
    height: 70px;
  }

  .rank-render-shell .rank-render-name {
    font-size: 36px;
  }

  .rank-render-shell .rank-render-value {
    font-size: 38px;
  }

  .rank-render-shell .rank-render-value i {
    font-size: 24px;
  }
}