:root{
  --bg:#060812; --text:#e6e6f0; --muted:#a9a9c6; --border:rgba(255,255,255,.1);
  --blue:#0066ff; --red:#ff2748; --purple:#a46bff; --green:#33ff8c; --pink:#ff42c6; --gold:#ffb700;
}

.members-neon{padding:64px 0 24px}
.members-neon h2{font-size:clamp(2rem,4vw,3.2rem);margin:0 auto 24px; text-align:center}

/* cards row */
.member-row{
  display:flex; justify-content:center; align-items:flex-start; gap:16px;
  list-style:none; margin:0; padding:0 12px;
  position:relative; z-index:2;
  flex-wrap: wrap;
}
.member-card .card-btn{
  --s: clamp(120px, 14vw, 180px);
  width:var(--s); height:calc(var(--s) + 48px);
  display:grid; grid-template-rows:1fr auto;
  padding:0; border:none; background:transparent; border-radius:22px; overflow:hidden; cursor:pointer;
  box-shadow:0 0 0 1px var(--border) inset; transition:transform .25s ease, box-shadow .25s ease;
}
.member-card .card-btn img{width:100%; height:100%; object-fit:cover; filter:contrast(1.05) brightness(.9)}
.member-card .card-name{display:block; padding:10px 12px; background:rgba(0,0,0,.55); font-weight:800}
.member-card .card-btn:hover{transform:translateY(-6px); box-shadow:0 18px 56px rgba(0,0,0,.5)}
.member-card.active .card-btn{transform:translateY(-4px);}

/* subtle glow per color when active */
.member-card.active[data-color="blue"]  .card-btn{ box-shadow:0 0 0 1px rgba(0,102,255,.35) inset, 0 0 36px rgba(0,102,255,.26);}
.member-card.active[data-color="red"]   .card-btn{ box-shadow:0 0 0 1px rgba(255,39,72,.35) inset, 0 0 36px rgba(255,39,72,.26);}
.member-card.active[data-color="purple"] .card-btn{box-shadow:0 0 0 1px rgba(164,107,255,.35) inset,0 0 36px rgba(164,107,255,.26);}
.member-card.active[data-color="green"] .card-btn{ box-shadow:0 0 0 1px rgba(51,255,140,.35) inset,0 0 36px rgba(51,255,140,.26);}
.member-card.active[data-color="pink"]  .card-btn{ box-shadow:0 0 0 1px rgba(255,66,198,.35) inset,0 0 36px rgba(255,66,198,.26);}
.member-card.active[data-color="gold"]  .card-btn{ box-shadow:0 0 0 1px rgba(255,183,0,.35) inset,0 0 36px rgba(255,183,0,.26);}

/* wiring surface (SVG over cards + gap to bio) */
.cards-and-wires{position:relative; z-index:1;}
.wires-svg{
  display: none; /* Hidden for now - not working properly */
  position:absolute; inset:0 0 0 0;
  width:100%; height:calc(100% + 240px); /* extends into gap for lines */
  transform:translateY(0); pointer-events:none; z-index:1;
}

/* wire aesthetics */
.wires-svg .spine{
  stroke:rgba(164,107,255,.18); stroke-width:2; stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(164,107,255,.25));
}
.wires-svg .wire{
  fill:none; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor);
}
.wires-svg .wire.animate{
  transition: stroke-dashoffset 520ms cubic-bezier(.22,.8,.2,1);
}

/* space for the wires (creates the gap) */
.members-neon .cards-and-wires{padding-bottom:60px}

/* bio panel */
.bio-panel{
  position:relative; z-index:3;
  width:min(1100px, 94vw); margin:0 auto;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:22px; padding:18px 20px 22px;
  box-shadow:0 28px 120px rgba(0,0,0,.5);
}
.bio-header{display:flex; align-items:center; gap:16px; margin-bottom:8px}
.bio-photo{width:80px;height:100px;border-radius:12px; overflow:hidden; flex:0 0 auto; box-shadow:0 0 0 1px var(--border) inset;}
.bio-photo img{width:100%;height:100%;object-fit:cover}
.bio-title h3{margin:0; font-size:clamp(1.25rem,2.5vw,1.8rem)}
.bio-role{margin:.25rem 0 0;color:#cbd0ff}
.chip{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.06);font-size:.85rem}

.bio-grid{display:grid; grid-template-columns: 1fr 2fr; gap:14px; margin-top:10px}
.bio-facts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bio-facts li{padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.03)}
.bio-text{margin:0; line-height:1.6; color:#dfe1ff}

/* themed left accent bar */
.bio-panel::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px; border-radius:22px 0 0 22px;
  background:linear-gradient(var(--accent1), var(--accent2));
  filter:drop-shadow(0 0 10px var(--accent1));
}

/* theme vars by member */
.bio-panel[data-theme="blue"]  {--accent1:#0066ff; --accent2:#4d94ff;}
.bio-panel[data-theme="red"]   {--accent1:#ff2748; --accent2:#ff7c93;}
.bio-panel[data-theme="purple"]{--accent1:#a46bff; --accent2:#d2b6ff;}
.bio-panel[data-theme="green"] {--accent1:#33ff8c; --accent2:#9fffd1;}
.bio-panel[data-theme="pink"]  {--accent1:#ff42c6; --accent2:#ff9be2;}
.bio-panel[data-theme="gold"]  {--accent1:#ffb700; --accent2:#ffd966;}

/* Mobile responsive styles */
@media (max-width: 768px) {
  .members-neon {
    padding: 20px 0 16px;
  }
  
  .member-row {
    display: grid;
    grid-template-columns: repeat(6, 55px);
    column-gap: 4px;
    row-gap: 0;
    padding: 0 16px;
    justify-content: center;
  }
  
  /* First row - 3 cards */
  .member-card:nth-child(1) { grid-column: span 2; }
  .member-card:nth-child(2) { grid-column: span 2; }
  .member-card:nth-child(3) { grid-column: span 2; }
  
  /* Second row - 2 cards centered */
  .member-card:nth-child(4) { 
    grid-column: 2 / span 2;
    margin-top: -90px;
  }
  .member-card:nth-child(5) { 
    grid-column: 4 / span 2;
    margin-top: -90px;
  }
  
  .member-card {
    width: 110px;
  }
  
  .member-card .card-btn {
    --s: 100%;
    width: 100%;
    height: 140px;
  }
  
  .member-card .card-name {
    font-size: 0.7rem;
    padding: 4px 6px;
  }
  
  .member-card .card-name em {
    display: none; /* Hide Korean names on mobile to save space */
  }
  
  /* Reduce gap between cards and bio */
  .members-neon .cards-and-wires {
    padding-bottom: 2px;
  }
  
  /* Make bio panel more visible on mobile */
  .bio-panel {
    padding: 14px;
    margin-top: 0;
    border: 2px solid var(--accent1);
    box-shadow: 0 0 20px rgba(0,0,0,0.3), 0 0 40px var(--accent1, #a46bff);
  }
  
  .bio-header {
    gap: 12px;
    margin-bottom: 8px;
  }
  
  .bio-photo {
    width: 50px;
    height: 65px;
  }
  
  .bio-title h3 {
    font-size: 1rem;
  }
  
  .bio-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .bio-facts {
    display: grid;
    gap: 4px;
    margin-bottom: 8px;
  }
  
  .bio-facts li {
    padding: 6px 8px;
    font-size: 0.85rem;
  }
  
  .bio-text {
    font-size: 0.9rem;
    line-height: 1.5;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .wires-svg .wire.animate{transition:none}
}