/* =========================================
   FIREFLYSMP SIMPLE STAFF PAGE
========================================= */

.staff-page {
  min-height: 760px;
  background:
    radial-gradient(circle at 10% 15%, rgba(255, 194, 26, .08), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(142, 220, 242, .13), transparent 25%),
    linear-gradient(180deg, #ffffff, #f8fcfd 70%, #ffffff);
}

.staff-simple-section {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: 105px 0 135px;
}

.staff-simple-heading {
  max-width: 650px;
  margin-bottom: 46px;
}

.staff-simple-heading h1 {
  margin: 9px 0 12px;
  color: #111719;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(48px, 5.5vw, 72px);
  line-height: 1;
  letter-spacing: -.045em;
}

.staff-simple-heading p {
  margin: 0;
  color: #687477;
  font-size: 12px;
  line-height: 1.7;
}

.simple-staff-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.simple-staff-card {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(10,109,137,.10);
  border-radius: 15px;
  background: #ffffff;
  box-shadow:
    0 5px 0 rgba(17,73,88,.045),
    0 16px 36px rgba(25,76,89,.055);
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.simple-staff-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 7px 0 rgba(17,73,88,.05),
    0 25px 48px rgba(25,76,89,.09);
}

.staff-skin-area {
  position: relative;
  height: 245px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.88), transparent 26%),
    linear-gradient(180deg, #eef9fc 0%, #e5f5f8 58%, #d7ece2 58%, #c7e1cf 100%);
}

.staff-skin-area::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 14px;
  height: 24px;
  border-radius: 50%;
  background: rgba(26,70,78,.12);
  filter: blur(8px);
}

.staff-skin {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 225px;
  object-fit: contain;
  object-position: bottom center;
  image-rendering: pixelated;
  filter: drop-shadow(0 9px 4px rgba(20,55,65,.14));
  transition: transform .22s ease;
}

.simple-staff-card:hover .staff-skin {
  transform: translateY(-4px) scale(1.025);
}

.staff-info {
  min-height: 115px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 17px 17px;
}

.staff-role {
  width: max-content;
  margin-bottom: 7px;
  padding: 5px 8px;
  border-radius: 5px;
  color: #ffffff;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;
}

.role-owner {
  color: #392803;
  background: #ffc21a;
  box-shadow: 0 3px 0 #d98900;
}

.role-admin {
  background: #df4d4d;
  box-shadow: 0 3px 0 #ae3434;
}

.role-developer {
  background: #6258f4;
  box-shadow: 0 3px 0 #443cd1;
}

.role-moderator {
  background: #0a7897;
  box-shadow: 0 3px 0 #075b73;
}

.role-helper {
  background: #55a54b;
  box-shadow: 0 3px 0 #397a34;
}

.staff-info strong {
  overflow: hidden;
  color: #162226;
  font-family: "Archivo Black", sans-serif;
  font-size: 17px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-info small {
  margin-top: 4px;
  overflow: hidden;
  color: #899396;
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-firefly {
  position: absolute;
  z-index: 3;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #ffe157;
  box-shadow: 0 0 12px #ffd128;
  animation: staff-fly 3.8s ease-in-out infinite;
}

.staff-firefly.one {
  left: 18px;
  top: 38px;
}

.staff-firefly.two {
  right: 19px;
  top: 72px;
  animation-delay: -1.6s;
}

@keyframes staff-fly {
  0%,100% {
    transform: translate(0,0) rotate(0);
  }
  50% {
    transform: translate(5px,-10px) rotate(12deg);
  }
}

@media (max-width: 1100px) {
  .simple-staff-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .simple-staff-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .staff-simple-section {
    width: calc(100% - 30px);
    padding-top: 75px;
  }

  .simple-staff-grid {
    grid-template-columns: 1fr;
  }

  .staff-skin-area {
    height: 275px;
  }

  .staff-skin {
    width: 175px;
    height: 255px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .staff-firefly {
    animation: none;
  }

  .simple-staff-card,
  .staff-skin {
    transition: none;
  }
}


/* =========================================
   V22 — STAFF RANK ROWS
========================================= */

.staff-rank-list {
  display: flex;
  flex-direction: column;
  gap: 74px;
}

.staff-rank-section {
  width: 100%;
}

.staff-rank-heading {
  display: grid;
  grid-template-columns: minmax(25px, 1fr) auto auto minmax(25px, 1fr);
  align-items: center;
  gap: 13px;
  margin-bottom: 24px;
}

.staff-rank-heading h2 {
  margin: 0;
  color: #172326;
  font-family: "Archivo Black", sans-serif;
  font-size: 18px;
  letter-spacing: .04em;
}

.rank-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10,120,151,.16));
}

.rank-line:last-child {
  background: linear-gradient(90deg, rgba(10,120,151,.16), transparent);
}

.rank-count {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #0a7897;
  background: #eaf7fa;
  font-size: 8px;
  font-weight: 800;
}

.staff-rank-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

.staff-rank-row .simple-staff-card {
  width: 218px;
  flex: 0 0 218px;
}

.rank-section-owner .staff-rank-heading h2 {
  color: #c27b00;
}

.rank-section-owner .rank-count {
  color: #8b5b00;
  background: #fff4cc;
}

.rank-section-developer .staff-rank-heading h2 {
  color: #554bdd;
}

.rank-section-developer .rank-count {
  color: #554bdd;
  background: #efedff;
}

.rank-section-admin .staff-rank-heading h2 {
  color: #c84141;
}

.rank-section-admin .rank-count {
  color: #c84141;
  background: #fff0f0;
}

.rank-section-moderator .staff-rank-heading h2 {
  color: #087794;
}

.rank-section-helper .staff-rank-heading h2 {
  color: #4b9442;
}

.rank-section-helper .rank-count {
  color: #4b9442;
  background: #eef8ed;
}

.staff-rank-empty {
  width: min(100%, 500px);
  min-height: 82px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px dashed rgba(10,120,151,.15);
  border-radius: 11px;
  background: rgba(247,251,252,.65);
}

.staff-rank-empty span {
  color: #9aa5a8;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .13em;
}

.staff-rank-empty strong {
  color: #69777a;
  font-size: 10px;
}

/* Neutralize old grid rule from V21 */
.simple-staff-grid {
  display: block;
}

@media (max-width: 760px) {
  .staff-rank-list {
    gap: 58px;
  }

  .staff-rank-row .simple-staff-card {
    width: min(100%, 260px);
    flex-basis: min(100%, 260px);
  }
}