:root{
  --gold:#d4af37;
  --gold-strong:#b8891f;
  --bronze:#8b5e3c;
  --dark:#0f141c;
  --dark2:#121a25;
  --red:#b3261e;

  /* paleta dos seus cards (mesma vibe do card-glass) */
  --card-a: rgba(255,255,255,.075);
  --card-b: rgba(255,255,255,.025);
  --card-border: rgba(255,255,255,.12);
  --card-border-in: rgba(255,255,255,.04);
  --card-shadow: rgba(0,0,0,.68);
}

/* tipografia */
.title-medieval{ font-family:"Cinzel",serif; letter-spacing:2px; }
.font-inter{ font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }

/* glow dourado */
.gold-glow{
  text-shadow:
    0 0 15px rgba(212,175,55,.35),
    0 0 35px rgba(212,175,55,.25);
}

/* botão */
.btn-gold{
  background: linear-gradient(180deg,var(--gold),var(--gold-strong));
  color:#1a1a1a;
  font-weight:600;
  transition:.3s;
}
.btn-gold:hover{
  transform: translateY(-3px);
  box-shadow:0 12px 30px rgba(212,175,55,.45);
}

/* ================= FUNDO GLOBAL (PRETO) ================= */
body{
  font-family:"Inter",sans-serif;
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(212,175,55,.08), transparent 60%),
    radial-gradient(900px 520px at 82% 70%, rgba(179,38,30,.06), transparent 60%),
    linear-gradient(180deg, #050506 0%, #070708 50%, #050506 100%);
}

/* ================= FUNDO ESTILOSO PADRÃO ================= */
.section-dark{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1000px 600px at 15% 15%, rgba(212,175,55,.12), transparent 60%),
    radial-gradient(900px 500px at 85% 70%, rgba(179,38,30,.10), transparent 65%),
    linear-gradient(180deg, #060608 0%, #0a0a0e 40%, #070708 100%);
}
.section-dark::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 350px at 50% 50%, rgba(255,255,255,.025), transparent 70%);
  pointer-events:none;
}

/* ================= VARIAÇÃO MAIS PROFUNDA ================= */
.section-dark-strong{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(700px 400px at 50% 100%, rgba(179,38,30,.08), transparent 70%),
    linear-gradient(180deg, #050506 0%, #09090c 100%);
}
.section-dark-strong::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 320px at 50% 55%, rgba(255,255,255,.02), transparent 65%);
  pointer-events:none;
}

/* texto muted (vivo, sem apagar) */
.muted{ color: rgba(226,232,240,.78); }

/* cards vivos (MESMO DA OUTRA SECTION) */
.card-glass{
  background: linear-gradient(145deg, var(--card-a), var(--card-b));
  border:1px solid var(--card-border);
  box-shadow:
    inset 0 0 0 1px var(--card-border-in),
    0 22px 85px var(--card-shadow);
  backdrop-filter: blur(10px);
  transition: transform .35s, box-shadow .35s, border-color .35s;
}
.card-glass:hover{
  transform: translateY(-6px);
  border-color: rgba(212,175,55,.42);
  box-shadow:
    0 28px 100px rgba(0,0,0,.78),
    0 0 48px rgba(212,175,55,.10);
}

.icon-chip{
  width:44px; height:44px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(212,175,55,.12);
  border:1px solid rgba(212,175,55,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* ================= TOPS: usando o MESMO card-glass ================= */
.rank-panel{
  border-radius: 16px;
  overflow: hidden;
  min-height: 340px;
}
.rank-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.rank-header .hicon{
  width:18px; height:18px;
  color: var(--gold);
  filter: drop-shadow(0 0 12px rgba(212,175,55,.25));
}
.rank-header h3{
  font-family:"Cinzel",serif;
  letter-spacing:1px;
  font-size: 14px;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
}
.rank-body{
  padding: 12px 14px 14px;
}
.rank-table{
  width:100%;
  border-collapse: collapse;
  font-size: 12px;
}
.rank-table thead th{
  text-align:left;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(226,232,240,.58);
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.rank-table tbody td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: rgba(226,232,240,.88);
  vertical-align: middle;
}
.rank-table tbody tr:hover{
  background: rgba(255,255,255,.03);
}
.rank-num{
  width: 34px;
  color: var(--gold);
  font-weight: 800;
}
.rank-classe{
  width: 140px;
  display:flex;
  align-items:center;
  gap:10px;
}
.rank-avatar{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
  object-fit: cover;
}
.rank-personagem{
  font-weight: 800;
  letter-spacing: .02em;
}
.rank-value{
  text-align:right;
  font-weight: 900;
  color: var(--gold);
}
.rank-kill{
  text-align:right;
  font-weight: 900;
  color: #ef4444; /* como no print */
}

/* Leader cards também no mesmo card-glass */
.leader-card{
  border-radius: 16px;
  overflow:hidden;
  min-height: 155px;
}
.leader-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.leader-title .hicon{ width:18px; height:18px; color: var(--gold); }
.leader-title h3{
  font-family:"Cinzel",serif;
  letter-spacing:1px;
  font-size: 14px;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
}
.leader-body{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 18px 18px 18px;
}
.clan-badge{
  display:flex;
  align-items:center;
  gap:14px;
}
.clan-logo{
  width:64px;
  height:64px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.35);
  background: rgba(0,0,0,.25);
  box-shadow: 0 18px 50px rgba(0,0,0,.65);
  object-fit: cover;
}
.clan-name{
  font-family:"Cinzel",serif;
  font-size: 20px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.90);
}
.clan-sub{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(226,232,240,.62);
}
.leader-metas{
  text-align:right;
  min-width: 170px;
}
.meta-big{
  font-size: 20px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: .02em;
}
.meta-small{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(226,232,240,.62);
}
.meta-small b{
  color: rgba(255,255,255,.86);
  font-weight: 900;
}

/* ================= FILTER BUTTON EFFECT ================= */

.filter-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

/* glow */
.filter-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(212,175,55,0.25), transparent 70%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* linha animada */
.filter-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

/* hover */
.filter-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(212,175,55,.55);
  color: var(--gold);
  background: rgba(212,175,55,.06);
}

.filter-btn:hover::before {
  opacity: 1;
}

.filter-btn:hover::after {
  width: 70%;
}

/* ativo */
.filter-btn.active {
  border-color: rgba(212,175,55,.6);
  background: rgba(212,175,55,.08);
  color: var(--gold);
}

.filter-btn.active::after {
  width: 80%;
}