/* Shared ELO/table styles used by index.html and elo.html */

/* Table layout */
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{
  position:sticky;top:0;background:var(--panel-2);
  border-bottom:none;padding:10px 12px;text-align:left;color:var(--muted);font-weight:600
}
.table tbody tr{background:transparent;border-bottom:none}
.table tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}
.table tbody td{padding:10px 12px;vertical-align:middle}

/* Rank chip + delta pill + rating badge */
.rank-chip{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  background:#2a3542;color:#fff;font-weight:700
}
.delta-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:none;background:#0f1317;font-weight:800;white-space:nowrap}
.delta-up{color:#20CE88}
.delta-down{color:#FF6B6B}
.delta-zero{color:var(--muted)}
.delta-new{color:#f7cc0b}
.rating-badge{display:inline-block;padding:4px 10px;border-radius:9999px;background:#0f1317;border:none;font-weight:700;margin-right:8px}

/* Make .elo-chip and .elo-card-badge use the same unified badge style */
.elo-chip, .elo-card-badge {
  display:inline-block;
  margin-top:6px;
  padding:4px 10px;
  border-radius:9999px;
  background:#0f1317;
  border:none;
  color:var(--text);
  font-weight:700;
  font-size:.85rem;
  align-self:flex-start;
}

/* Games bar */
.games-bar{position:relative;background:#0f1317;border:none;border-radius:8px;height:22px;overflow:hidden}
.games-bar span{position:absolute;inset:0;transform-origin:left;background:#259218;opacity:.7}
.games-bar b{position:relative;z-index:2;font-size:.8rem;padding:0 8px;color:#fff}

/* Pagination */
.pagination{display:flex;gap:6px;justify-content:center;align-items:center;padding:12px;border-top:none;background:#0f1317}
.pagination button{padding:8px 10px;border:none;background:#0f1317;border-radius:10px;color:#fff;cursor:pointer;font-weight:600}
.pagination button.active,.pagination button:hover{background:var(--brand);color:var(--brand-ink)}

@media (max-width:540px){
  .table thead th,.table tbody td{padding:8px}
  .rating-badge,.badge{font-size:.72rem}
  .games-bar{height:18px}
}