:root{
  --ss-accent-color: #7c3aed;
  --neon-green: #3fffa6;
  --neon-red: #ff6b6b;
}

/* root container centers content and allows cards to stretch */
#bm-es-root { color: #e6eef8; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; display:flex; justify-content:center; width:100%; }

/* responsive grid */
.grid-gaming {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:22px;
  width:100%;
  max-width:1200px;
}

/* card */
.card-gaming {
  width:100%;
  min-height:140px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:14px;
  padding:18px;
  box-shadow: 0 18px 60px rgba(2,6,23,0.7);
  transition: transform .18s, box-shadow .18s;
  position:relative;
  overflow:visible;
  border: 1px solid rgba(255,255,255,0.02);
}

/* header layout */
.card-header { display:flex; align-items:flex-start; gap:12px; position:relative; padding-right:120px; }
.header-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.server-avatar { width:64px; height:64px; border-radius:10px; overflow:visible; display:flex; align-items:center; justify-content:center; background:transparent; flex:0 0 64px; }
.server-avatar img { width:64px; height:64px; object-fit:contain; display:block; background:transparent; }

/* title */
.title-wrap { min-width:0; }
.title-wrap h3 { margin:0; font-size:1.05rem; font-weight:800; letter-spacing:0.2px; line-height:1.1; word-break:break-word; }

/* status */
.status-wrap { position:absolute; right:14px; top:12px; display:flex; align-items:center; justify-content:flex-end; }
.status-pill { padding:8px 14px; border-radius:999px; font-weight:800; display:inline-flex; gap:10px; align-items:center; font-size:0.9rem; min-width:88px; justify-content:center; }
.status-pill.online { color: var(--neon-green); background: rgba(63,255,166,0.06); box-shadow: 0 6px 28px rgba(63,255,166,0.06); border:1px solid rgba(63,255,166,0.12); }
.status-pill.offline { color: var(--neon-red); background: rgba(255,107,107,0.06); box-shadow: 0 6px 28px rgba(255,107,107,0.06); border:1px solid rgba(255,107,107,0.12); }

/* body */
.center-body { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; margin-top:12px; }

.players-block { display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; }
.player-count { font-size:2.4rem; font-weight:900; margin-top:6px;
  /* use per-card local accent if present, otherwise fallback to global accent */
  background: linear-gradient(90deg, var(--local-accent, var(--ss-accent-color)), var(--local-accent, var(--ss-accent-color)));
  -webkit-background-clip: text; color: transparent;
}
.player-meta { color: rgba(148,163,184,1); margin-top:6px; font-size:0.95rem; }

/* buttons and accents use local accent variable with fallback */
.btn.primary { background: linear-gradient(90deg, var(--local-accent, var(--ss-accent-color)), var(--local-accent, var(--ss-accent-color))); color:white; box-shadow: 0 10px 40px rgba(7,12,32,0.7); }
.btn.ghost { background:transparent; color:var(--local-accent, var(--ss-accent-color)); border:1px solid rgba(255,255,255,0.03); }

.card-bottom { display:flex; justify-content:center; gap:12px; margin-top:14px; }

/* responsive tweaks */
@media(max-width:420px){
  .card-header { padding-right:14px; }
  .status-wrap { position:static; margin-left:auto; }
}