:root{
  --bg:#070A12;
  --card: rgba(255,255,255,.04);
  --card2: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.60);
  --accent: #8B5CF6; /* violet */
  --accent2:#22D3EE; /* cyan */
  --warn:#F59E0B;
  --ok:#34D399;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 14px;
  --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background: var(--bg);
  color: var(--text);
}

.container{max-width: 1180px; margin:0 auto; padding: 24px;}

.bg{position:fixed; inset:0; pointer-events:none; overflow:hidden;}
.bg__glow{
  position:absolute; width: 900px; height: 900px; filter: blur(60px);
  opacity:.35; border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--accent), transparent 55%);
}
.bg__glow--a{left:-280px; top:-260px;}
.bg__glow--b{
  right:-320px; bottom:-320px;
  background: radial-gradient(circle at 40% 40%, var(--accent2), transparent 58%);
}
.bg__noise{
  position:absolute; inset:-20%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.06; transform: rotate(8deg);
}

.header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(7,10,18,.82), rgba(7,10,18,.55));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand__mark{
  width:44px; height:44px; border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(139,92,246,.25), rgba(34,211,238,.18));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  font-weight:800;
}
.brand__title{font-weight:800; letter-spacing:.2px;}
.brand__subtitle{font-size:12px; color: var(--muted); margin-top:2px;}

.header__right{display:flex; align-items:center; gap:10px;}
.pill{
  padding:8px 10px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size:12px; color: var(--muted);
}

.btn{
  padding:10px 12px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(139,92,246,.28), rgba(34,211,238,.20));
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text); font-weight:600;
  cursor:pointer;
}
.btn:hover{filter: brightness(1.07);}

.panel{
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel__top{
  padding: 18px 18px 14px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.h1{margin:0; font-size:22px; font-weight:800;}
.muted{margin:6px 0 0; color: var(--muted); font-size:13px;}
.controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end;}

.seg{
  display:flex; border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.seg__btn{
  padding:10px 12px; border:0; background:transparent; color: var(--muted);
  cursor:pointer; font-weight:600;
}
.seg__btn.is-active{
  color: var(--text);
  background: rgba(255,255,255,.08);
}

.select select, .input input{
  height:40px; border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  padding: 0 12px;
  outline:none;
}
.input input{min-width: 220px;}
.select select{cursor:pointer;}

.tableWrap{overflow:auto;}
.table{width:100%; border-collapse:collapse; font-size:13px;}
.table thead th{
  text-align:left; padding: 12px 14px;
  color: rgba(255,255,255,.70);
  font-weight:700; letter-spacing:.2px;
  background: rgba(255,255,255,.03);
}
.table tbody td{
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  vertical-align:middle;
}
.table tbody tr:hover{background: rgba(255,255,255,.03);}

.col-rank{width:54px;}
.num{text-align:right;}
.empty{text-align:center; color: var(--muted); padding: 22px !important;}

.player{
  display:flex; align-items:center; gap:10px; min-width: 210px;
}
.avatar{
  width:34px; height:34px; border-radius: 12px; object-fit:cover;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-weight:700;
}
.badge--top{border-color: rgba(245,158,11,.30); background: rgba(245,158,11,.10);}
.kpi{color: rgba(255,255,255,.85); font-weight:700;}

.footer{padding: 18px 4px;}
.footer__text{margin:0; color: rgba(255,255,255,.50); font-size:12px; line-height:1.4;}
/* -----------------------------
   Sortable headers
----------------------------- */
.th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.th-sort:hover {
  opacity: 0.9;
}
.sort-ind {
  display: inline-block;
  margin-left: .35rem;
  opacity: .8;
}
th[data-sort-active="true"] .sort-ind::after {
  content: "▲";
}
th[data-sort-active="true"][data-sort-dir="desc"] .sort-ind::after {
  content: "▼";
}

/* -----------------------------
   Podium badges (1/2/3)
----------------------------- */
.podium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 1.55rem;
  padding: 0 .5rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: .85rem;
  border: 1px solid rgba(255,255,255,.15);
}
.podium--gold {
  background: rgba(255, 215, 0, .18);
  border-color: rgba(255, 215, 0, .35);
}
.podium--silver {
  background: rgba(192, 192, 192, .18);
  border-color: rgba(192, 192, 192, .35);
}
.podium--bronze {
  background: rgba(205, 127, 50, .18);
  border-color: rgba(205, 127, 50, .35);
}

/* -----------------------------
   Rank cell with emblem
----------------------------- */
.rankCell {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.rankEmblem {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0,0,0,.35));
}
.rankText {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
}
.rankTier {
  font-weight: 700;
}
.rankDiv {
  opacity: .85;
  font-weight: 600;
}

/* -----------------------------
   Fix select dropdown (dark)
----------------------------- */
.select select {
  background: rgba(10, 12, 18, .92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
}
.select select:focus {
  outline: none;
  border-color: rgba(255,255,255,.28);
}
.select option {
  background: #0b0f1a;
  color: #fff;
}