/* Deron Online - Ranking Visual Pro */
.ic-rank-container{
  --ic-bg:#0e101a;
  --ic-card:#151827;
  --ic-border:#24283f;
  --ic-text:#e6e8f0;
  --ic-muted:#8b8fa3;
  --ic-gold:#ffcc33;
  --ic-silver:#c0c6d6;
  --ic-bronze:#d98a4a;
  --ic-accent:#7c5cff;
  --ic-accent-2:#3ee7ff;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  max-width:860px;
  margin:30px auto;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(124,92,255,.25), transparent), radial-gradient(800px 400px at 90% 0%, rgba(62,231,255,.18), transparent), var(--ic-bg);
  border:1px solid var(--ic-border);
  border-radius:20px;
  overflow:hidden;
  color:var(--ic-text);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
.ic-rank-header{
  padding:26px 28px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--ic-border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
}
.ic-rank-header h3{
  margin:0;
  font-size:22px;
  letter-spacing:.5px;
  font-weight:800;
  text-transform:uppercase;
  display:flex;
  gap:12px;
  align-items:center;
}
.ic-rank-header h3 span.icon{
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(135deg, var(--ic-accent), var(--ic-accent-2));
  display:grid; place-items:center;
  font-size:18px;
  box-shadow: 0 6px 20px rgba(124,92,255,.4);
}
.ic-rank-sub{
  font-size:12px; color:var(--ic-muted); letter-spacing:.8px; text-transform:uppercase;
}
.ic-podium{
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  gap:14px;
  padding:22px;
  align-items:end;
}
.ic-podium-card{
  background: var(--ic-card);
  border:1px solid var(--ic-border);
  border-radius:16px;
  padding:16px 12px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.ic-podium-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--ic-accent), var(--ic-accent-2));
  opacity:.8;
}
.ic-podium-card.pos-1{ transform: translateY(-10px); border-color: rgba(255,204,51,.4); box-shadow: 0 10px 30px rgba(255,204,51,.15); }
.ic-podium-card.pos-1::before{ background: linear-gradient(90deg, var(--ic-gold), #ff8a00); }
.ic-podium-card.pos-2::before{ background: linear-gradient(90deg, var(--ic-silver), #8a93a8); }
.ic-podium-card.pos-3::before{ background: linear-gradient(90deg, var(--ic-bronze), #a85a2a); }

.ic-podium-rank{ font-size:11px; font-weight:800; letter-spacing:1px; color:var(--ic-muted); margin-bottom:6px; }
.ic-podium-card.pos-1 .ic-podium-rank{ color:var(--ic-gold); }
.ic-podium-avatar{
  width:56px; height:56px; border-radius:50%; margin:6px auto 10px;
  background: linear-gradient(180deg, #2a2e4a, #1a1d2e);
  display:grid; place-items:center;
  font-weight:800; font-size:20px;
  border:2px solid var(--ic-border);
}
.ic-podium-card.pos-1 .ic-podium-avatar{ width:72px; height:72px; font-size:26px; border-color: var(--ic-gold); }
.ic-podium-name{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ic-podium-points{ margin-top:6px; font-size:18px; font-weight:800; }
.ic-podium-card.pos-1 .ic-podium-points{ font-size:22px; color:var(--ic-gold); }

.ic-rank-table-wrap{ padding:0 14px 14px; }
.ic-rank-table{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.ic-rank-table thead th{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--ic-muted); padding:0 14px 6px; text-align:left; }
.ic-rank-table tbody tr{
  background: rgba(255,255,255,.02);
  border:1px solid var(--ic-border);
  transition:.2s;
}
.ic-rank-table tbody tr:hover{ background: rgba(124,92,255,.08); border-color: rgba(124,92,255,.3); transform: translateY(-1px); }
.ic-rank-table tbody td{ padding:12px 14px; }
.ic-rank-table tbody td:first-child{ border-radius:12px 0 0 12px; }
.ic-rank-table tbody td:last-child{ border-radius:0 12px 12px 0; text-align:right; }

.ic-rank-pos{ display:inline-flex; width:28px; height:28px; border-radius:8px; align-items:center; justify-content:center; font-weight:800; font-size:12px; background:#1c1f33; border:1px solid var(--ic-border); }
.ic-rank-pos.top1{ background: linear-gradient(135deg, #ffcc33, #ff8a00); color:#000; border:none; }
.ic-rank-pos.top2{ background: linear-gradient(135deg, #c0c6d6, #8a93a8); color:#000; border:none; }
.ic-rank-pos.top3{ background: linear-gradient(135deg, #d98a4a, #a85a2a); color:#fff; border:none; }

.ic-player-cell{ display:flex; align-items:center; gap:10px; }
.ic-player-avatar-sm{ width:32px; height:32px; border-radius:8px; background:#222540; display:grid; place-items:center; font-weight:800; font-size:13px; }
.ic-player-name{ font-weight:600; }

.ic-points-cell{ display:flex; align-items:center; gap:12px; justify-content:flex-end; }
.ic-points-bar{ width:90px; height:6px; background:#1c1f33; border-radius:99px; overflow:hidden; }
.ic-points-bar span{ display:block; height:100%; background: linear-gradient(90deg, var(--ic-accent), var(--ic-accent-2)); border-radius:99px; }
.ic-points-val{ font-weight:800; min-width:30px; }

.ic-rank-footer{ padding:12px 22px; border-top:1px solid var(--ic-border); display:flex; justify-content:space-between; font-size:11px; color:var(--ic-muted); }

/* Single player card */
.ic-single-card{
  max-width:420px; margin:20px auto; background: var(--ic-bg); border:1px solid var(--ic-border); border-radius:16px; padding:18px;
  display:flex; align-items:center; gap:14px; color:var(--ic-text);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.ic-single-card .ic-single-avatar{ width:52px; height:52px; border-radius:12px; background: linear-gradient(135deg, var(--ic-accent), var(--ic-accent-2)); display:grid; place-items:center; font-weight:900; font-size:20px; }
.ic-single-card .ic-single-info{ flex:1; }
.ic-single-card .ic-single-name{ font-weight:800; font-size:16px; }
.ic-single-card .ic-single-label{ font-size:11px; color:var(--ic-muted); text-transform:uppercase; letter-spacing:.8px; }
.ic-single-card .ic-single-val{ font-size:26px; font-weight:900; color:var(--ic-gold); }

@media(max-width:600px){
  .ic-podium{ grid-template-columns:1fr; }
  .ic-podium-card.pos-1{ order:-1; transform:none; }
  .ic-points-bar{ display:none; }
}