:root{
  --bg:#0a001a;           /* dark purple background */
  --card:#1a0a2a;         /* card background */
  --border:#330033;       /* border for cards and rows */
  --text:#e5e7eb;         /* light text */
  --muted:#b0b0b0;        /* muted text for pills/footer */
  --purple:#a855f7;       /* primary purple accent */
  --purple2:#7e22ce;      /* secondary gradient purple */
  --glow:rgba(168,85,247,0.35); /* purple glow */
  --shadow:0 10px 30px rgba(0,0,0,0.45);
}

*{box-sizing:border-box;}
body{
  margin:0;
  padding:20px;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:radial-gradient(circle at top,#1a0a2a 0%,#0a001a 60%);
}

.wrap{max-width:1200px;margin:0 auto;}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}
.brand img{height:42px;filter:drop-shadow(0 0 10px var(--glow));}
.brand h1{margin:0;font-size:1.8rem;color:var(--purple);}

/* ===============================
   Team totals cards
================================ */
.team-totals{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:20px;
  justify-content:center;
}
.team-totals .card{
  flex:1 1 160px;
  max-width:240px;
  text-align:center;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  box-shadow:var(--shadow);
}
.team-totals .card .val{
  font-size:1.6rem;
  font-weight:900;
  color:var(--purple);
}

/* ===============================
   Member rows
================================ */
.list{display:flex;flex-direction:column;gap:12px;overflow-x:auto;}
.member-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:var(--shadow);
}
.m-left{display:flex;flex-direction:column;gap:6px;}
.m-name{font-size:1.05rem;font-weight:800;}
.m-sub{display:flex;flex-wrap:wrap;gap:8px;}
.pill{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(26,0,26,0.25);
  border:1px solid rgba(51,0,51,0.8);
  font-size:.82rem;
  color:var(--muted);
}
.tier-chip{
  padding:7px 12px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  color:#0a001a;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  box-shadow:0 0 18px var(--glow);
  white-space:nowrap;
}

footer{margin-top:18px;text-align:center;font-size:.78rem;color:var(--muted);}

/* ===============================
   Tablet / Mobile
================================ */
@media(max-width:768px){
  .team-totals{
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
  }
  .member-row{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .m-right{
    margin-top:8px;
    width:100%;
    display:flex;
    justify-content:flex-start;
  }
}

/* Small phones <=480px */
@media(max-width:480px){
  .team-totals .card{
    flex:1 1 45%;
    max-width:180px;
    padding:12px;
    font-size:0.9rem;
  }
  .team-totals .card .val{
    font-size:1.4rem;
  }

  .m-sub{gap:6px;}
  .pill{font-size:0.75rem;padding:5px 8px;}
  .tier-chip{font-size:0.72rem;padding:6px 10px;}

  footer{font-size:0.7rem;}
}

/* Ultra-small phones <400px */
@media(max-width:400px){
  .team-totals{
    justify-content:center;
    gap:10px;
  }
  .team-totals .card{
    flex:1 1 80%;
    max-width:none;
    padding:10px;
    font-size:0.85rem;
  }
  .team-totals .card .val{
    font-size:1.2rem;
  }
}