/* =========================================================
   RANKING MODULE — xGunZ Dark Military Cyberpunk
   ========================================================= */

/* ── Tab navigation ──────────────────────────────────────── */
.ranking-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 20px;
    align-items: stretch;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--clr-border, rgba(57,255,20,0.18));
    border-radius: 4px;
    padding: 6px 8px;
    width: fit-content;
    max-width: 100%;
}

.ranking-nav a {
    display: inline-block;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--clr-text-dim, #6a7290);
    padding: 5px 18px;
    line-height: 1.5;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 3px;
    white-space: nowrap;
    user-select: none;
    transition: color 0.15s, border-color 0.15s;
}

.ranking-nav a:hover:not(.active) {
    color: var(--clr-text, #c8cfe0);
    border-color: var(--clr-border, rgba(57,255,20,0.18));
}

.ranking-nav a.active {
    background: var(--clr-red-bright, #39ff14);
    color: #000;
    border-color: transparent;
    text-shadow: none;
}

/* =========================================================
   GLASS PANEL — wraps the table
   ========================================================= */
.rr-panel {
    background: rgba(13,13,30,0.72);
    border: 1px solid rgba(57,255,20,0.1);
    border-radius: 8px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.45),
                0 0 0 1px rgba(57,255,20,0.04) inset;
    animation: fadeSlideUp 0.4s ease both;
}

/* Shimmer line at panel top */
.rr-panel::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(57,255,20,0.35), transparent);
}

.rr-panel .ranking-table-wrap { padding: 0 4px 8px; }
.rr-panel .rr-table thead th  { padding-top: 18px; }

/* =========================================================
   ROSTER TABLE  (rr-*)
   ========================================================= */

.ranking-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rr-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

/* Headers */
.rr-table thead th {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(106,114,144,0.6);
    padding: 0 14px 14px;
    border-bottom: 1px solid rgba(57,255,20,0.1);
    text-align: left;
    white-space: nowrap;
}
.rr-th-sort {
    color: rgba(57,255,20,0.5);
    margin-left: 3px;
    font-size: 9px;
}

/* Body rows */
.rr-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
    animation: fadeSlideUp 0.32s ease both;
}
.rr-table tbody tr:nth-child(1)   { animation-delay: 0.03s; }
.rr-table tbody tr:nth-child(2)   { animation-delay: 0.07s; }
.rr-table tbody tr:nth-child(3)   { animation-delay: 0.10s; }
.rr-table tbody tr:nth-child(4)   { animation-delay: 0.13s; }
.rr-table tbody tr:nth-child(5)   { animation-delay: 0.16s; }
.rr-table tbody tr:nth-child(6)   { animation-delay: 0.18s; }
.rr-table tbody tr:nth-child(7)   { animation-delay: 0.20s; }
.rr-table tbody tr:nth-child(8)   { animation-delay: 0.22s; }
.rr-table tbody tr:nth-child(n+9) { animation-delay: 0.24s; }

.rr-table tbody tr:hover { background: rgba(57,255,20,0.035); }
.rr-table td { padding: 10px 14px; vertical-align: middle; }

/* Top 3 */
.rr-table tbody tr.rr-top1 {
    border-left: 2px solid var(--clr-gold, #ffd700);
    background: linear-gradient(90deg, rgba(255,215,0,0.05) 0%, transparent 35%);
}
.rr-table tbody tr.rr-top2 {
    border-left: 2px solid var(--clr-silver, #c0c0c0);
    background: linear-gradient(90deg, rgba(192,192,192,0.04) 0%, transparent 35%);
}
.rr-table tbody tr.rr-top3 {
    border-left: 2px solid var(--clr-bronze, #cd7f32);
    background: linear-gradient(90deg, rgba(205,127,50,0.04) 0%, transparent 35%);
}

/* Position */
.rr-pos {
    width: 36px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: rgba(106,114,144,0.55);
    text-align: right;
    padding-right: 8px;
    white-space: nowrap;
}
.rr-pos.p1 { color: var(--clr-gold,   #ffd700); text-shadow: 0 0 10px rgba(255,215,0,0.45); }
.rr-pos.p2 { color: var(--clr-silver, #c0c0c0); text-shadow: 0 0 8px rgba(192,192,192,0.35); }
.rr-pos.p3 { color: var(--clr-bronze, #cd7f32); text-shadow: 0 0 8px rgba(205,127,50,0.35); }

/* Avatar */
.rr-av { width: 56px; padding-right: 4px; }
.rr-av-wrap {
    width: 40px;
    height: 40px;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid rgba(57,255,20,0.18);
    background: rgba(0,0,0,0.45);
}
.rr-top1 .rr-av-wrap { border-color: rgba(255,215,0,  0.45); box-shadow: 0 0 10px rgba(255,215,0,  0.15); }
.rr-top2 .rr-av-wrap { border-color: rgba(192,192,192,0.4);  box-shadow: 0 0 8px  rgba(192,192,192,0.12); }
.rr-top3 .rr-av-wrap { border-color: rgba(205,127,50, 0.4);  box-shadow: 0 0 8px  rgba(205,127,50, 0.12); }
.rr-av-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(25%);
    transition: filter 0.18s;
}
.rr-table tr:hover .rr-av-img { filter: grayscale(0%); }

/* Identity */
.rr-identity { min-width: 140px; }
.rr-name {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--clr-text-bright, #eef1fa);
    text-decoration: none;
    line-height: 1.2;
    transition: color 0.12s;
}
.rr-name:hover { color: var(--clr-red-bright, #39ff14); }

/* Easter egg — Captured */
.rr-name[data-easter] { position: relative; }
.rr-name[data-easter]:hover { font-size: 0; }
.rr-name[data-easter]:hover::after {
    content: attr(data-easter);
    font-size: 15px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    color: var(--clr-red-bright, #39ff14);
}
.rr-rank {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: rgba(57,255,20,0.4);
    margin-top: 2px;
    line-height: 1;
}
.rr-top1 .rr-rank { color: rgba(255,215,0,   0.7); }
.rr-top2 .rr-rank { color: rgba(192,192,192, 0.6); }
.rr-top3 .rr-rank { color: rgba(205,127,50,  0.6); }

/* Stats */
.rr-stat-main {
    font-family: 'Share Tech Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--clr-red-bright, #39ff14);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.rr-stat {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: var(--clr-text-dim, #6a7290);
    white-space: nowrap;
}

/* Clan badge */
.rr-clan-badge {
    display: inline-block;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 3px;
    background: rgba(0,180,216,0.08);
    border: 1px solid rgba(0,180,216,0.22);
    color: var(--clr-blue, #00b4d8);
    white-space: nowrap;
}
.rr-dash {
    color: rgba(106,114,144,0.4);
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
}

/* View button */
.rr-btn {
    display: inline-block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 5px 13px;
    border: 1px solid rgba(57,255,20,0.18);
    border-radius: 3px;
    color: rgba(57,255,20,0.45);
    text-decoration: none;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
    white-space: nowrap;
}
.rr-btn:hover {
    border-color: var(--clr-red-bright, #39ff14);
    color: var(--clr-red-bright, #39ff14);
    background: rgba(57,255,20,0.05);
}

/* Wins / Losses */
.rr-win  { color: #4dff80; font-family: 'Share Tech Mono', monospace; font-size: 13px; }
.rr-loss { color: #ff4d4d; font-family: 'Share Tech Mono', monospace; font-size: 13px; }

/* Empty state */
.ranking-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--clr-text-dim, #6a7290);
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
}

/* =========================================================
   CHARACTER PROFILE PAGE
   ========================================================= */
.ranking-profile {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    animation: fadeSlideUp 0.4s ease both;
}

.ranking-profile-left {
    flex: 0 0 200px;
    text-align: center;
    padding: 24px 16px;
    background: var(--clr-panel, #0d0d1e);
    border: 1px solid var(--clr-border, rgba(57,255,20,0.18));
    border-radius: 4px;
}

.ranking-profile-avatar {
    width: 130px;
    height: 130px;
    border: 2px solid rgba(57,255,20,0.4);
    border-radius: 4px;
    display: block;
    margin: 0 auto 16px;
    object-fit: cover;
    box-shadow: 0 0 18px rgba(57,255,20,0.18);
}

.ranking-profile-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--clr-text-bright, #eef1fa);
    margin: 0 0 6px;
    line-height: 1.2;
}

.ranking-profile-clan {
    font-size: 13px;
    color: var(--clr-blue, #00b4d8);
    margin-bottom: 10px;
}

.ranking-profile-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 12px;
    font-size: 11px;
    font-family: 'Share Tech Mono', monospace;
    color: var(--clr-red-bright, #39ff14);
    border: 1px solid rgba(57,255,20,0.4);
    border-radius: 2px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(57,255,20,0.07);
}

.ranking-profile-right {
    flex: 1;
    min-width: 260px;
}

.ranking-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.ranking-stat-card {
    background: var(--clr-panel, #0d0d1e);
    border: 1px solid var(--clr-border, rgba(57,255,20,0.18));
    border-radius: 4px;
    padding: 14px 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
    animation: fadeSlideUp 0.4s ease both;
}
.ranking-stat-card:hover {
    border-color: rgba(57,255,20,0.35);
    box-shadow: 0 0 10px rgba(57,255,20,0.1);
}
.ranking-stat-card:nth-child(1) { animation-delay: 0.10s; }
.ranking-stat-card:nth-child(2) { animation-delay: 0.15s; }
.ranking-stat-card:nth-child(3) { animation-delay: 0.20s; }
.ranking-stat-card:nth-child(4) { animation-delay: 0.25s; }
.ranking-stat-card:nth-child(5) { animation-delay: 0.30s; }
.ranking-stat-card:nth-child(6) { animation-delay: 0.35s; }
.ranking-stat-card:nth-child(7) { animation-delay: 0.40s; }
.ranking-stat-card:nth-child(8) { animation-delay: 0.45s; }

.ranking-stat-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-dim, #6a7290);
    margin-bottom: 6px;
}

.ranking-stat-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 22px;
    color: var(--clr-red-bright, #39ff14);
    font-weight: 700;
    line-height: 1;
}

.ranking-back { margin-top: 24px; font-size: 13px; font-family: 'Rajdhani', sans-serif; }
.ranking-back a { color: var(--clr-text-dim, #6a7290); text-decoration: none; transition: color 0.12s; }
.ranking-back a:hover { color: var(--clr-red-bright, #39ff14); }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ranking-nav { width: 100%; }
    .rr-table { min-width: 480px; }
    .rr-panel { border-radius: 6px; }
    .ranking-profile { flex-direction: column; }
    .ranking-profile-left { flex: none; }
}