/* Fixed, server-owned animated frames and Alliance Rank badges. */
.member-frame-stack {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  border-color: transparent !important;
  box-shadow: 0 0 16px rgba(142, 207, 234, .28);
}

.member-frame-stack > :not(.member-frame-layer) {
  position: relative;
  z-index: 10;
}

.member-frame-layer {
  --mf-gradient: conic-gradient(#fff, #8ecfea, #fff, #8ecfea, #fff);
  --mf-glow: rgba(142, 207, 234, .45);
  --mf-speed: 4s;
  position: absolute !important;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.member-frame-layer--rank { inset: 0; z-index: 1; }
.member-frame-layer--manual { inset: 4px; z-index: 2; border-radius: 8px; }

.member-frame-layer::before,
.member-frame-layer::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.member-frame-layer::before {
  inset: -75%;
  width: 250%;
  height: 250%;
  background: var(--mf-gradient);
  opacity: .95;
  animation: member-frame-spin var(--mf-speed) linear infinite;
  transform-origin: center;
}

.member-frame-layer::after {
  inset: 3px;
  border-radius: 9px;
  background: rgba(9, 28, 43, .97);
  box-shadow: inset 0 0 13px var(--mf-glow);
  animation: member-frame-pulse 2.2s ease-in-out infinite;
}

.member-frame-layer--manual::after { border-radius: 6px; }

.member-frame-layer--fire {
  --mf-gradient: conic-gradient(from 30deg, #ffef87, #ff9d00, #ff2d00, #7b0800, #ff5a00, #ffd65a, #ff2d00, #ffef87);
  --mf-glow: rgba(255, 88, 0, .62);
  --mf-speed: 2.8s;
}
.member-frame-layer--ice {
  --mf-gradient: conic-gradient(from 10deg, #ffffff, #8ff3ff, #168dff, #dffcff, #4dc9ff, #ffffff, #168dff, #ffffff);
  --mf-glow: rgba(78, 214, 255, .62);
  --mf-speed: 5s;
}
.member-frame-layer--lightning {
  --mf-gradient: repeating-conic-gradient(from 20deg, #eaf7ff 0 5deg, #4b8cff 5deg 18deg, #872fff 18deg 24deg, #071a52 24deg 38deg);
  --mf-glow: rgba(104, 86, 255, .72);
  --mf-speed: 1.7s;
}
.member-frame-layer--magic {
  --mf-gradient: conic-gradient(from 90deg, #ff4fd8, #7f4dff, #35e6d2, #ffd15c, #ff4fd8, #583cff, #35e6d2, #ff4fd8);
  --mf-glow: rgba(209, 72, 255, .62);
  --mf-speed: 4.2s;
}

.member-frame-stack:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35), 0 0 25px rgba(142, 207, 234, .38) !important;
}

.alliance-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 2px 8px;
  margin-right: 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: .8px;
  vertical-align: middle;
}
.alliance-rank-badge--r1 { color:#a9b4bf; background:rgba(169,180,191,.12); }
.alliance-rank-badge--r2 { color:#69db8b; background:rgba(71,190,105,.13); }
.alliance-rank-badge--r3 { color:#69b8ff; background:rgba(52,139,224,.14); }
.alliance-rank-badge--r4 { color:#d98cff; background:rgba(180,70,235,.16); box-shadow:0 0 9px rgba(201,86,255,.28); }
.alliance-rank-badge--r5 { color:#ffd36b; background:rgba(217,61,25,.18); box-shadow:0 0 10px rgba(255,92,24,.35); }

@keyframes member-frame-spin { to { transform: rotate(360deg); } }
@keyframes member-frame-pulse {
  0%, 100% { box-shadow: inset 0 0 8px var(--mf-glow); }
  50% { box-shadow: inset 0 0 18px var(--mf-glow); }
}

@media (prefers-reduced-motion: reduce) {
  .member-frame-layer::before,
  .member-frame-layer::after { animation: none !important; }
}