/* =====================================================================
   MEMBERS ページ専用：ON AIR（赤く光る）／ OFF LINE の表示
   ===================================================================== */

/* ---------- ON AIR / OFF LINE のバッジ ----------
   写真（顔）にかからないよう、金の枠の「上の飾りの帯」の上に、真ん中で重ねる。
   光り（drop-shadow）は clip-path で切られてしまうので、外側の span（.air-wrap）に付ける。
   位置は top（枠の高さに対する％）、大きさは font-size で変えられる */
.member-frame .air-wrap {
  position: absolute;
  left: 50%;
  top: 10.5%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
}

.member-frame .air-wrap .badge {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

@media (max-width: 640px) {
  .member-frame .air-wrap .badge {
    font-size: 0.56rem;
    letter-spacing: 0.1em;
  }
}

.member-frame .air-wrap .badge {
  position: static;
}

.air-wrap.is-on {
  filter: drop-shadow(0 0 6px rgba(var(--air-rgb), 0.95)) drop-shadow(0 0 16px rgba(var(--air-rgb), 0.7));
  animation: air-glow 1.8s ease-in-out infinite;
}

@keyframes air-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 5px rgba(var(--air-rgb), 0.8)) drop-shadow(0 0 12px rgba(var(--air-rgb), 0.5));
  }
  50% {
    filter: drop-shadow(0 0 9px rgba(var(--air-rgb), 1)) drop-shadow(0 0 24px rgba(var(--air-rgb), 0.85));
  }
}

.badge-off {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: #cfd2da;
  background: rgba(0, 0, 0, 0.72);
}

/* ---------- ON AIR 中のカード ---------- */
.member-card.is-air .member-frame-ring {
  filter: drop-shadow(0 0 10px rgba(var(--air-rgb), 0.6)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}

.member-viewers {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--font-num);
  font-size: 0.92rem;
  font-weight: 700;
  color: #ff8d99;
}

/* ---------- グループの見出し ---------- */
.group-label--air {
  color: #ff8d99;
  text-shadow: 0 0 10px rgba(var(--air-rgb), 0.7);
}

.group-label--air::after {
  background: linear-gradient(90deg, rgba(var(--air-rgb), 0.7), transparent);
}

.group-label--air .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--air);
  box-shadow: 0 0 10px var(--air);
  animation: pulse 1.2s ease-in-out infinite;
}

.group-label--air small {
  font-family: var(--font-num);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .air-wrap.is-on,
  .badge-air .dot,
  .group-label--air .dot {
    animation: none;
  }
}