/**
 * ranking.css — Ranking page styles
 */

.ranking-loading-screen { font-size: 18px; color: #d4b99c; text-align: center; padding: 50px 0; position: relative; }
.ranking-loading-spinner {
    border: 4px solid rgba(255,255,255,.2);
    border-top: 4px solid var(--c-orange);
    border-radius: 50%; width: 40px; height: 40px;
    animation: rank-spin 1s linear infinite;
    margin: 0 auto 15px;
}
@keyframes rank-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.rank-table { width: 100%; border-collapse: collapse; }
.rank-table th { padding: 10px 15px; color: #ffdda9; font-size: 13px; border: 1px solid var(--border-subtle); background: rgba(0,0,0,.3); }
.rank-table td { padding: 8px 15px; border: 1px solid var(--border-subtle); font-size: 13px; background: rgba(255,255,255,.02); }
.rank-table tr:hover td { background: rgba(var(--c-orange-rgb),.08); }
.rank-pos { font-weight: bold; color: var(--c-orange); text-align: center; width: 40px; }
.rank-1 { color: var(--rank-gold); }
.rank-2 { color: var(--rank-silver); }
.rank-3 { color: var(--rank-bronze); }
.rank-class-icon { width: 28px; height: 28px; vertical-align: middle; }