/* LYNX ROLEPLAY v7 — rank-aware administration cards */

/* Every staff rank owns a single accent color.  RGB is kept separately for transparent glows. */
.staff-profile {
  --rank: #d4af37;
  --rank-rgb: 212, 175, 55;
  --rank-soft: rgba(var(--rank-rgb), .09);
  --rank-line: rgba(var(--rank-rgb), .58);
  --rank-glow: rgba(var(--rank-rgb), .18);
  border-color: rgba(var(--rank-rgb), .19) !important;
  background:
    radial-gradient(150px 100px at 50% -5%, rgba(var(--rank-rgb), .10), transparent 74%),
    linear-gradient(165deg, rgba(17,17,18,.985), rgba(6,6,8,.997)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 0 42px rgba(var(--rank-rgb), .018);
}

.staff-profile::before {
  left: 15px !important;
  right: 15px !important;
  top: 13px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(var(--rank-rgb), .80), transparent) !important;
  opacity: .48 !important;
}

.staff-profile-bg {
  background:
    radial-gradient(circle at 50% 21%, rgba(var(--rank-rgb), .12), transparent 39%),
    linear-gradient(to bottom, rgba(var(--rank-rgb), .022), rgba(5,5,7,.64)) !important;
}

.staff-profile:hover {
  border-color: rgba(var(--rank-rgb), .88) !important;
  box-shadow:
    0 22px 62px rgba(0,0,0,.42),
    0 0 0 1px rgba(var(--rank-rgb), .06),
    0 0 34px rgba(var(--rank-rgb), .095),
    inset 0 0 42px rgba(var(--rank-rgb), .035) !important;
}

.staff-avatar-wrap::before {
  background: conic-gradient(
    from 90deg,
    transparent 0 19%,
    rgba(var(--rank-rgb), .58) 22%,
    transparent 26% 62%,
    rgba(var(--rank-rgb), .30) 65%,
    transparent 70%
  ) !important;
}

.staff-avatar-wrap::after {
  border-color: rgba(var(--rank-rgb), .50) !important;
  box-shadow:
    0 0 0 1px rgba(var(--rank-rgb), .04),
    0 0 30px rgba(var(--rank-rgb), .07) inset !important;
}

.staff-avatar-img,
.staff-profile:nth-child(1) .staff-avatar-img,
.staff-profile:nth-child(2) .staff-avatar-img {
  border-color: rgba(var(--rank-rgb), .96) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.55),
    0 0 0 3px rgba(var(--rank-rgb), .035),
    0 0 28px rgba(var(--rank-rgb), .12) !important;
}

.staff-profile:hover .staff-avatar-img {
  box-shadow:
    0 18px 42px rgba(0,0,0,.58),
    0 0 0 3px rgba(var(--rank-rgb), .045),
    0 0 36px rgba(var(--rank-rgb), .20) !important;
}

.staff-profile-role {
  position: relative;
  color: var(--rank) !important;
  border-color: rgba(var(--rank-rgb), .82) !important;
  background: linear-gradient(180deg, rgba(var(--rank-rgb), .10), rgba(var(--rank-rgb), .035)) !important;
  box-shadow:
    inset 0 0 12px rgba(var(--rank-rgb), .025),
    0 0 18px rgba(var(--rank-rgb), .035);
  text-shadow: 0 0 15px rgba(var(--rank-rgb), .26);
}

.staff-profile-role::before {
  content: '';
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--rank);
  box-shadow: 0 0 8px rgba(var(--rank-rgb), .92);
}

.staff-profile h3 {
  color: #f6f3ed !important;
}

.staff-profile:hover h3 {
  text-shadow: 0 0 20px rgba(var(--rank-rgb), .10);
}

.staff-discord-name i {
  background: var(--rank) !important;
  box-shadow: 0 0 11px rgba(var(--rank-rgb), .45) !important;
}

.staff-rank-crown {
  position: absolute;
  z-index: 8;
  left: calc(50% + 31px);
  top: calc(50% - 50px);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(var(--rank-rgb), .95);
  background: #080808;
  color: var(--rank);
  box-shadow: 0 0 0 3px #080808, 0 0 18px rgba(var(--rank-rgb), .18);
}
.staff-rank-crown svg { width: 13px; height: 13px; }

/* Rank palette — based on the hierarchy shown in the supplied reference. */
.staff-rank-founder,
.staff-rank-coowner {
  --rank: #f5c518;
  --rank-rgb: 245, 197, 24;
}

.staff-rank-management {
  --rank: #ff2ebd;
  --rank-rgb: 255, 46, 189;
}

.staff-rank-developer {
  --rank: #66e6a5;
  --rank-rgb: 102, 230, 165;
}

.staff-rank-headadmin {
  --rank: #ff4665;
  --rank-rgb: 255, 70, 101;
}

.staff-rank-administrator {
  --rank: #ff5b5b;
  --rank-rgb: 255, 91, 91;
}

.staff-rank-seniormod {
  --rank: #ff8a00;
  --rank-rgb: 255, 138, 0;
}

.staff-rank-moderator {
  --rank: #ffb347;
  --rank-rgb: 255, 179, 71;
}

.staff-rank-support {
  --rank: #65a9ff;
  --rank-rgb: 101, 169, 255;
}

.staff-rank-trialsupport {
  --rank: #8ff3f1;
  --rank-rgb: 143, 243, 241;
}

/* More cards are displayed in the test catalogue. Flex keeps incomplete rows centered like the reference. */
.staff-showcase {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 14px !important;
  max-width: 1440px;
  margin-inline: auto;
}
.staff-profile,
.staff-profile:nth-child(1),
.staff-profile:nth-child(2) {
  grid-column: auto !important;
  flex: 0 1 calc((100% - 70px) / 6);
  min-width: 0;
  min-height: 306px !important;
}

@media (max-width: 1280px) {
  .staff-profile,
  .staff-profile:nth-child(1),
  .staff-profile:nth-child(2) { flex-basis: calc((100% - 42px) / 4); }
}
@media (max-width: 1000px) {
  .staff-profile,
  .staff-profile:nth-child(1),
  .staff-profile:nth-child(2) { flex-basis: calc((100% - 28px) / 3); }
}
@media (max-width: 760px) {
  .staff-showcase { gap: 10px !important; }
  .staff-profile,
  .staff-profile:nth-child(1),
  .staff-profile:nth-child(2) {
    flex-basis: calc((100% - 10px) / 2);
    min-height: 292px !important;
  }
  .staff-profile-content { padding-inline: 13px !important; }
  .staff-profile-role { font-size: 6px !important; letter-spacing: .13em !important; padding-inline: 9px !important; }
  .staff-profile h3 { font-size: 15px !important; }
}
@media (max-width: 500px) {
  .staff-profile,
  .staff-profile:nth-child(1),
  .staff-profile:nth-child(2) { flex-basis: 100%; }
}