.rank-chip {
  --rank-color: #a78bfa;
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
  padding: 0.28rem 0.58rem;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--rank-color) 52%, transparent);
  background: color-mix(in srgb, var(--rank-color) 16%, #121214);
  color: var(--rank-color);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 10px color-mix(in srgb, var(--rank-color) 42%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--rank-color) 18%, transparent);
}

.rank-chip::before {
  content: "";
  position: absolute;
  inset: -60% -20%;
  background: linear-gradient(
    115deg,
    transparent 18%,
    color-mix(in srgb, var(--rank-color) 28%, #ffffff) 40%,
    rgba(255, 255, 255, 0.82) 50%,
    color-mix(in srgb, #67e8f9 55%, var(--rank-color)) 60%,
    transparent 82%
  );
  animation: rank-sheen 3.1s ease-in-out infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: 0.9;
}

.rank-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--rank-color) 0%, transparent),
    color-mix(in srgb, var(--rank-color) 22%, transparent) 50%,
    transparent
  );
  animation: rank-glow 5.5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

.rank-chip--leader { --rank-color: #f1c40f; }
.rank-chip--deputy-leader { --rank-color: #e67e22; }
.rank-chip--deputy-head { --rank-color: #e056fd; }
.rank-chip--fc-leader { --rank-color: #00d4ff; }
.rank-chip--starshyi { --rank-color: #1abc9c; }
.rank-chip--serzhant { --rank-color: #2ecc71; }
.rank-chip--molodshyi { --rank-color: #57f287; }
.rank-chip--dosvidchenyi { --rank-color: #5865f2; }
.rank-chip--novachok { --rank-color: #eb459e; }
.rank-chip--rekrut { --rank-color: #99aab5; }
.rank-chip--unknown { --rank-color: #a78bfa; }

@keyframes rank-sheen {
  0% { transform: translateX(-42%) rotate(8deg); }
  100% { transform: translateX(42%) rotate(8deg); }
}

@keyframes rank-glow {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .rank-chip::before,
  .rank-chip::after {
    animation: none;
  }
}