/* ============================================================
   MUTRETAS RANKINGS PREMIUM CSS — Scoped under .rk-premium
   Evita conflitos com override.css usando seletores específicos
   ============================================================ */

/* ---------- Barra de Busca ---------- */
.rk-premium .rk-search {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 18px 0;
    flex-wrap: wrap;
}

.rk-premium .rk-search input[type="text"] {
    background: rgba(15, 15, 15, 0.95) !important;
    border: 1px solid rgba(255, 49, 49, 0.25) !important;
    color: #ccc !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    width: 200px;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.5) !important;
}

.rk-premium .rk-search input[type="text"]:focus {
    border-color: #dfa100 !important;
    box-shadow: 0 0 8px rgba(223,161,0,0.25) !important;
}

.rk-premium .rk-search select {
    background: rgba(15, 15, 15, 0.95) !important;
    border: 1px solid rgba(255,49,49,0.25) !important;
    color: #ccc !important;
    padding: 8px 10px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
}

.rk-premium .rk-btn-search {
    background: linear-gradient(135deg, #dfa100, #8b0000) !important;
    border: none !important;
    color: #fff !important;
    padding: 8px 18px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    font-size: 12px !important;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
}

.rk-premium .rk-btn-search:hover {
    background: linear-gradient(135deg, #ff3131, #dfa100) !important;
    box-shadow: 0 0 10px rgba(255,49,49,0.4) !important;
}

.rk-premium .rk-btn-clear {
    background: rgba(40,40,40,0.8) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #888 !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    text-decoration: none !important;
}

.rk-premium .rk-btn-clear:hover {
    border-color: #ff3131 !important;
    color: #ff3131 !important;
}

.rk-premium .rk-info {
    text-align: center;
    margin: 8px 0 12px;
    font-size: 13px;
    color: #777 !important;
}

.rk-premium .rk-info strong {
    color: #dfa100 !important;
}

/* ---------- Tabela ---------- */
.rk-premium .rk-table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    background: rgba(8, 8, 8, 0.9) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    border: 1px solid rgba(255,49,49,0.12) !important;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 25px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

/* Cabeçalho */
.rk-premium .rk-table tr.rk-header td {
    background: linear-gradient(180deg, rgba(139,0,0,0.3), rgba(12,12,12,0.95)) !important;
    border-bottom: 2px solid #dfa100 !important;
    border-top: none !important;
    color: #ff3131 !important;
    font-family: 'Cinzel', 'PT Sans', serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    padding: 11px 8px !important;
    text-align: center !important;
    white-space: nowrap;
}

/* Linhas de dados */
.rk-premium .rk-table tr.rk-row td {
    border-bottom: 1px solid rgba(255,255,255,0.035) !important;
    border-top: none !important;
    padding: 7px 8px !important;
    font-size: 14px !important;
    vertical-align: middle !important;
    text-align: center !important;
    color: #b8b8b8 !important;
    background: transparent !important;
    background-image: none !important;
    transition: background-color 0.15s ease !important;
}

/* Zebra premium */
.rk-premium .rk-table tr.rk-row:nth-child(odd) td {
    background: rgba(18,18,18,0.5) !important;
}

.rk-premium .rk-table tr.rk-row:nth-child(even) td {
    background: rgba(10,10,10,0.4) !important;
}

/* Hover */
.rk-premium .rk-table tr.rk-row:hover td {
    background: rgba(255,49,49,0.07) !important;
    color: #e0e0e0 !important;
}

/* ---------- TOP 3 highlight ---------- */
.rk-premium .rk-table tr.rk-top1 td {
    background: linear-gradient(90deg, rgba(255,215,0,0.1), transparent) !important;
    border-left: 3px solid #ffd700;
}

.rk-premium .rk-table tr.rk-top2 td {
    background: linear-gradient(90deg, rgba(192,192,192,0.07), transparent) !important;
    border-left: 3px solid #c0c0c0;
}

.rk-premium .rk-table tr.rk-top3 td {
    background: linear-gradient(90deg, rgba(205,127,50,0.07), transparent) !important;
    border-left: 3px solid #cd7f32;
}

/* ---------- Posição ---------- */
.rk-premium .rk-pos {
    font-weight: bold !important;
    font-size: 15px !important;
    color: #777 !important;
    min-width: 45px;
}

.rk-premium .rk-top1 .rk-pos { color: #ffd700 !important; font-size: 17px !important; text-shadow: 0 0 6px rgba(255,215,0,0.35); }
.rk-premium .rk-top2 .rk-pos { color: #c0c0c0 !important; font-size: 16px !important; }
.rk-premium .rk-top3 .rk-pos { color: #cd7f32 !important; font-size: 16px !important; }

/* ---------- Variação 24h ---------- */
.rk-premium .rk-var { min-width: 52px; text-align: center !important; }
.rk-premium .rk-var-up { color: #2ecc71 !important; font-weight: bold; font-size: 12px; }
.rk-premium .rk-var-down { color: #e74c3c !important; font-weight: bold; font-size: 12px; }
.rk-premium .rk-var-same { color: #3498db !important; font-weight: bold; font-size: 12px; }
.rk-premium .rk-var-new { color: #00ff88 !important; font-weight: bold; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }

/* ---------- Player name ---------- */
.rk-premium .rk-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    text-align: left !important;
}

.rk-premium .rk-name a {
    color: inherit !important;
    text-decoration: none !important;
}

.rk-premium .rk-name a:hover {
    text-decoration: underline !important;
    color: #ff5c5c !important;
    text-shadow: 0 0 6px rgba(255,49,49,0.4) !important;
}

.rk-premium .rk-name-winner {
    color: #ffd700 !important;
    font-weight: bold !important;
}

/* ---------- Crown SVG ---------- */
.rk-premium .rk-crown {
    vertical-align: -4px;
    margin-right: 4px;
}

/* ---------- Stats ---------- */
.rk-premium .rk-stat {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-weight: 600;
    font-size: 14px;
    color: #ccc !important;
}

.rk-premium .rk-stat-gold {
    color: #dfa100 !important;
    font-weight: 700;
}

/* ---------- Class image scoped ---------- */
.rk-premium .rk-class-img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,49,49,0.25) !important;
    box-shadow: 0 0 6px rgba(0,0,0,0.5) !important;
    filter: brightness(1.1) contrast(1.05) !important;
    object-fit: cover;
}

.rk-premium .rk-class-img:hover {
    transform: scale(1.12) !important;
    box-shadow: 0 0 10px rgba(255,49,49,0.3) !important;
}

/* ---------- Gens image ---------- */
.rk-premium .rk-gens-img {
    width: 22px !important;
    height: 22px !important;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.5)) !important;
}

/* ---------- Online Status in rk-premium ---------- */
.rk-premium img.online-status-indicator {
    width: 10px !important;
    height: 10px !important;
    margin-left: 5px;
    vertical-align: middle;
    filter: none !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    max-width: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* ---------- Paginação ---------- */
.rk-premium .rk-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 18px 0;
    flex-wrap: wrap;
}

.rk-premium .rk-pages a,
.rk-premium .rk-pages strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
}

.rk-premium .rk-pages a {
    background: rgba(22,22,22,0.85) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: #777 !important;
}

.rk-premium .rk-pages a:hover {
    background: rgba(255,49,49,0.12) !important;
    border-color: #ff3131 !important;
    color: #ff3131 !important;
}

.rk-premium .rk-pages strong {
    background: linear-gradient(135deg, #dfa100, #8b0000) !important;
    border: 1px solid #dfa100 !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.rk-premium .rk-pages .rk-dots {
    color: #444 !important;
    padding: 3px;
}

/* ---------- Kill Feed Premium ---------- */
.rk-premium .rk-feed {
    margin-top: 28px;
    border: 1px solid rgba(255,49,49,0.12);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(8,8,8,0.9);
    backdrop-filter: blur(12px);
}

.rk-premium .rk-feed-header {
    background: linear-gradient(90deg, rgba(139,0,0,0.25), rgba(12,12,12,0.95));
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,49,49,0.15);
    font-family: 'Cinzel', 'PT Sans', serif;
    font-size: 13px;
    font-weight: 700;
    color: #ff3131 !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.rk-premium .rk-feed table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.rk-premium .rk-feed table tr td {
    padding: 7px 10px !important;
    font-size: 13px !important;
    border-bottom: 1px solid rgba(255,255,255,0.025) !important;
    border-top: none !important;
    color: #999 !important;
    background: transparent !important;
    background-image: none !important;
}

.rk-premium .rk-feed table tr:hover td {
    background: rgba(255,49,49,0.04) !important;
}

.rk-premium .rk-feed .rk-f-killer { color: #e74c3c !important; font-weight: 600; }
.rk-premium .rk-feed .rk-f-victim { color: #3498db !important; }
.rk-premium .rk-feed .rk-f-date { color: #555 !important; font-size: 11px !important; white-space: nowrap; }

/* ---------- Update time ---------- */
.rk-premium .rk-update {
    text-align: right;
    font-size: 11px;
    color: #555 !important;
    padding: 8px 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .rk-premium .rk-table tr.rk-row td { padding: 5px 4px !important; font-size: 12px !important; }
    .rk-premium .rk-search { flex-direction: column; gap: 7px; }
    .rk-premium .rk-search input[type="text"] { width: 100%; }
    .rk-premium .rk-class-img { width: 22px !important; height: 22px !important; }
}

/* ===========================================================
   RANKINGS HEADER PREMIUM — Menu, Title, Class Filter
   Escopo via page.rankings context (seletores altamente específicos)
   =========================================================== */

/* --- Título "TOP Rankings" --- */
.page-title {
    background: linear-gradient(90deg, rgba(139,0,0,0.25), rgba(15,15,15,0.3), rgba(139,0,0,0.15)) !important;
    border: 1px solid rgba(255,49,49,0.2) !important;
    border-left: 4px solid #dfa100 !important;
    border-radius: 6px !important;
    padding: 14px 20px !important;
    margin-bottom: 16px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

.page-title span {
    font-family: 'Cinzel', 'PT Sans', serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(255,49,49,0.4), 0 2px 4px rgba(0,0,0,0.6) !important;
    background: linear-gradient(90deg, #ff3131, #dfa100, #ff3131) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: none !important;
}

/* --- Menu de navegação de rankings --- */
.rankings_menu {
    background: rgba(8,8,8,0.85) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,49,49,0.12) !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.3) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    overflow: visible !important;
}

.rankings_menu span {
    display: none !important;
}

.rankings_menu a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 120px !important;
    width: auto !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(20,20,20,0.8) !important;
    color: #888 !important;
    font-family: 'Cinzel', 'PT Sans', serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    position: relative !important;
    overflow: hidden !important;
}

.rankings_menu a::before {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #dfa100, #ff3131) !important;
    transform: translateX(-50%) !important;
    transition: width 0.3s ease !important;
}

.rankings_menu a:hover {
    background: rgba(255,49,49,0.1) !important;
    border-color: rgba(255,49,49,0.3) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    text-shadow: 0 0 8px rgba(255,49,49,0.3) !important;
}

.rankings_menu a:hover::before {
    width: 80% !important;
}

.rankings_menu a::after {
    display: none !important;
    content: none !important;
}

.rankings_menu a.active {
    background: linear-gradient(135deg, rgba(223,161,0,0.2), rgba(139,0,0,0.25)) !important;
    border-color: #dfa100 !important;
    color: #fff !important;
    text-shadow: 0 0 10px rgba(223,161,0,0.4) !important;
    box-shadow: 0 0 12px rgba(223,161,0,0.15), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.rankings_menu a.active::before {
    width: 80% !important;
}

/* --- Filtro de Classes (ícones redondos) --- */
.rankings-class-filter {
    background: rgba(8,8,8,0.85) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,49,49,0.1) !important;
    border-radius: 6px !important;
    padding: 14px 10px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.3) !important;
}

.rankings-class-filter ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.rankings-class-filter li {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 2px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-align: center !important;
}

.rankings-class-filter li:hover {
    background: transparent !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
    box-shadow: none !important;
}

.rankings-class-filter-selection {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.rankings-class-filter-selection img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,0.08) !important;
    background: rgba(20,20,20,0.6) !important;
    filter: grayscale(0.3) brightness(1.05) !important;
    transition: all 0.3s ease !important;
    object-fit: cover !important;
    display: block !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

.rankings-class-filter-selection:hover img {
    filter: grayscale(0) brightness(1.2) !important;
    border-color: #dfa100 !important;
    box-shadow: 0 0 12px rgba(223,161,0,0.3) !important;
    transform: scale(1.08) !important;
}

.rankings-class-filter-grayscale img {
    filter: grayscale(0.6) brightness(0.95) !important;
}

.rankings-class-filter-grayscale:hover img {
    filter: grayscale(0) brightness(1.2) !important;
}