/* === RANKS === */
.rank-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); }
.rank-table th, .rank-table td { padding: 16px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.rank-table th { background: rgba(255, 42, 42, 0.12); color: var(--text); font-weight: 800; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; }
.rank-table tr:hover td { background: rgba(255, 255, 255, 0.03); }
.rank-table .player { display: flex; align-items: center; gap: 12px; }
.rank-table .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.rank-table .name { font-weight: 700; }
.rank-table .clan { font-size: 0.8rem; color: var(--muted); }
.rank-tier { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }
.tier-legendary { background: linear-gradient(135deg, #ffd700, #ff8c00); color: #000; }
.tier-epic { background: linear-gradient(135deg, #a855f7, #ec4899); color: white; }
.tier-rare { background: linear-gradient(135deg, #3b82f6, #06b6d4); color: white; }
.tier-common { background: rgba(255, 255, 255, 0.15); color: var(--text); }
.tier-veteran { background: linear-gradient(135deg, #22c55e, #16a34a); color: white; }
.tier-soldier { background: rgba(255, 255, 255, 0.15); color: var(--text); }

.rank-legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.rank-legend .tier { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.rank-legend .dot { width: 14px; height: 14px; border-radius: 50%; }