/* ===================================================
   VCTIERS - rankings.css  |  Rankings page styles
   =================================================== */

/* ===================== LOADING ANIMATION (from mctier.css) ===================== */
@keyframes pulse {
    50% {
        opacity: .5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

/* ===================== CSS VARIABLES (from mctier.css) ===================== */
:root {
    /* Tier colors — synced with mctier.css */
    --hightier: #263244;
    --lowtier: #161e2a;
    --hightier-hover: #3e4f68;
    --lowtier-hover: #263242;
    --hightier-icon-foreground: #3d526f;
    --hightier-icon-foreground-hover: #637998;
    --lowtier-icon-foreground: #253449;
    --lowtier-icon-foreground-hover: #374d6c;
    --tier-1-foreground: #f0b857;
    --tier-1: #41361b;
    --tier-2-foreground: #a9b1b9;
    --tier-2: #343843;
    --tier-3-foreground: #d59161;
    --tier-3: #352620;
    --tier-4-foreground: #b1c0cc;
    --tier-4: #161e2a;
    --tier-5-foreground: #b1c0cc;
    --tier-5: #161e2a;
    --ht1: #6d5d2c; --ht1-foreground: #e8ba3a;
    --lt1: #584c25; --lt1-foreground: #d5b355;
    --ht2: #5e6979; --ht2-foreground: #c4d3e7;
    --lt2: #4a505a; --lt2-foreground: #a0a7b2;
    --ht3: #6b4b36; --ht3-foreground: #f89f5a;
    --lt3: #593722; --lt3-foreground: #c67b42;
    --ht4: #303144; --ht4-foreground: #81749a;
    --lt4: #2c2e40; --lt4-foreground: #655b79;
    --ht5: #2b2c3d; --ht5-foreground: #8f82a8;
    --lt5: #262a3a; --lt5-foreground: #655b79;
}

/* ===================== MAIN LAYOUT ===================== */
body {
    background-color: var(--bg);
}

main {
    max-width: var(--max-width);
    margin: 0 auto;
    min-height: 100vh;
    padding: 100px 16px 60px;
    background-color: var(--bg);
}

/* ===================== TABS ===================== */
.tabs-container {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding-bottom: 0;
}
.tabs-container::-webkit-scrollbar { display: none; }

.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 112px;
    padding: 8px 16px 10px;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    background: transparent;
    color: rgba(74, 81, 104, 0.5);
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    transform: translateY(2px);
    text-decoration: none;
}
.tab.tab-active {
    background: var(--accent);
    color: var(--fg);
    position: relative;
}
.tab.tab-active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: transparent; /* hidden — replaced by animated indicator */
}

/* Animated tab indicator */
.tabs-container {
    position: relative;
}
.tab-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background: #fff;
    border-radius: 2px 2px 0 0;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 10;
    box-shadow: none;
}

.tab-icon { width: 30px; height: 30px; object-fit: contain; }

/* ===================== CONTENT CARD ===================== */
.content-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0 var(--radius) var(--radius) var(--radius);
    padding: 20px 24px 40px;
}

/* ===================== INFO BAR ===================== */
.info-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-bottom: 20px;
}

.info-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--secondary);
    color: var(--fg);
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.info-btn:hover { background: var(--accent-hover); }

.server-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pvpclub-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.server-label {
    font-size: 10px;
    color: var(--muted-fg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.server-ip-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.server-ip-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--secondary);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
}
.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted-fg);
    display: flex;
    align-items: center;
    transition: color 0.15s;
    padding: 0;
}
.copy-btn:hover { color: var(--fg); }

.discord-chip {
    background: #5865f2;
    border-radius: 6px;
    padding: 5px 6px;
    display: flex;
    align-items: center;
    transition: background 0.15s;
}
.discord-chip:hover { background: #4752c4; }
.discord-chip img { width: 14px; height: 14px; object-fit: contain; filter: brightness(10); }

/* ===================== TABLE HEADER ===================== */
.table-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.th-num    { width: 40px; }
.th-player { flex: 1; padding-left: 78px; }
.th-region { width: 90px; text-align: right; transform: translateX(-113px); }
.th-tiers  { width: 380px; text-align: center; }

/* ===================== PLAYER LIST (OVERALL) ===================== */
.player-list { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 12px !important; 
    margin-bottom: 10px !important;
}

.player-row-wrap {
    display: block;
    animation: fadeUp 0.3s ease both;
}

.player-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease !important;
    text-decoration: none;
    color: inherit;
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 1px solid var(--border) !important;
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    outline: none !important;
    overflow: hidden;
    position: relative;
}
.player-row:hover { 
    background: var(--accent) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    border-left-color: rgba(255, 255, 255, 0.12) !important;
    outline: none !important;
}

/* Remove any border-left from child elements */
.player-row * {
    border-left: none !important;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.player-row-wrap:nth-child(1) { animation-delay: 0.04s; }
.player-row-wrap:nth-child(2) { animation-delay: 0.08s; }
.player-row-wrap:nth-child(3) { animation-delay: 0.12s; }
.player-row-wrap:nth-child(4) { animation-delay: 0.16s; }
.player-row-wrap:nth-child(5) { animation-delay: 0.20s; }
.player-row-wrap:nth-child(n+6) { animation-delay: 0.24s; }

/* RANK BADGE */
.rank-badge {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    flex-shrink: 0;
    letter-spacing: -1px;
}
.rank-1 { background: linear-gradient(135deg,#c8900a,#f0c040,#d4a017); color: #2a1a00; }
.rank-2 { background: linear-gradient(135deg,#7a8c9a,#b0bec5,#90a4ae); color: #1a2226; }
.rank-3 { background: linear-gradient(135deg,#8b4513,#cd7f32,#a0522d); color: #1a0a00; }
.rank-other { background: var(--secondary); color: var(--muted-fg); font-size: 18px; }

/* AVATAR */
.player-avatar-wrap {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--accent);
}
.player-avatar { width: 100%; height: 100%; object-fit: cover; }

/* PLAYER INFO */
.player-info { flex: 1; min-width: 0; }
.player-name {
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.player-title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--muted-fg);
    margin-top: 3px;
}
.title-diamond {
    width: 1px;
    height: 1px;
    background: #4a6cf7;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    flex-shrink: 0;
}

/* Rank title icons — mix-blend-mode:screen xóa nền đen PNG */
.rank-title-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    mix-blend-mode: lighten;
}
.points-muted {
    color: var(--muted-fg);
    font-size: 12px;
    font-weight: 500;
}

/* REGION */
.player-region {
    padding: 6px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.5px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    opacity: 1;
}

.region-na { background: #5a1e28; color: #ff8a96; }
.region-eu { background: #1a4a20; color: #6dff85; }
.region-as { background: #4a2040; color: #e0a0c0; }

/* Vertical lines on both sides of region button */
.player-region-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 12px;
    align-self: stretch;
    position: relative;
    z-index: 0;
    background: rgba(255, 255, 255, 0.04);
    padding: 0 10px;
    margin-top: -12px;
    margin-bottom: -12px;
    transform: translateX(-231px);
}

/* Background xám nhạt bao phủ toàn bộ wrap */
.player-region-wrap::before {
    display: none;
}

.player-region-wrap .region-line {
    width: 1px;
    background: rgba(255, 255, 255, 0.60);
    border-radius: 1px;
    flex-shrink: 0;
    align-self: stretch;
    position: relative;
    z-index: 1;
}
.player-region-wrap .player-region {
    margin-right: 0;
    position: relative;
    z-index: 1;
}

/* TIER BADGES (Overall page) */
.player-tiers {
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
    max-width: 280px;
    justify-content: flex-end;
    flex-shrink: 0;
    overflow: visible;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.tier-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 30px;
}
.tier-chip-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background: rgba(15, 25, 50, 0.9);
    border: none;
    box-shadow: none;
}
.tier-chip-icon img { width: 13px; height: 13px; object-fit: contain; }

.tier-chip-label {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 5px;
    letter-spacing: 0.2px;
    background: var(--ht1); /* Default background */
    color: var(--ht1-foreground); /* Default text color */
    border: 1px solid rgba(100, 180, 255, 0.25);
}

/* High Tier badge colors (match mctier.css) */
.badge-ht1 .tier-chip-icon { border-color: var(--ht1-foreground) !important; }
.badge-ht1 .tier-chip-label { background: var(--ht1); color: var(--ht1-foreground); }

.badge-ht2 .tier-chip-icon { border-color: var(--ht2-foreground) !important; }
.badge-ht2 .tier-chip-label { background: var(--ht2); color: var(--ht2-foreground); }

.badge-ht3 .tier-chip-icon { border-color: var(--ht3-foreground) !important; }
.badge-ht3 .tier-chip-label { background: var(--ht3); color: var(--ht3-foreground); }

.badge-ht4 .tier-chip-icon { border-color: var(--ht4-foreground) !important; }
.badge-ht4 .tier-chip-label { background: var(--ht4); color: var(--ht4-foreground); }

.badge-ht5 .tier-chip-icon { border-color: var(--ht5-foreground) !important; }
.badge-ht5 .tier-chip-label { background: var(--ht5); color: var(--ht5-foreground); }

/* Low Tier badge colors (match mctier.css) */
.badge-lt1 .tier-chip-icon { border-color: var(--lt1-foreground) !important; }
.badge-lt1 .tier-chip-label { background: var(--lt1); color: var(--lt1-foreground); }

.badge-lt2 .tier-chip-icon { border-color: var(--lt2-foreground) !important; }
.badge-lt2 .tier-chip-label { background: var(--lt2); color: var(--lt2-foreground); }

.badge-lt3 .tier-chip-icon { border-color: var(--lt3-foreground) !important; }
.badge-lt3 .tier-chip-label { background: var(--lt3); color: var(--lt3-foreground); }

.badge-lt4 .tier-chip-icon { border-color: var(--lt4-foreground) !important; }
.badge-lt4 .tier-chip-label { background: var(--lt4); color: var(--lt4-foreground); }

.badge-lt5 .tier-chip-icon { border-color: var(--lt5-foreground) !important; }
.badge-lt5 .tier-chip-label { background: var(--lt5); color: var(--lt5-foreground); }

/* ===================== TIER LIST VIEW (Non-overall modes) ===================== */
.tier-grid {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: #869aaf var(--bg);
    width: 100%;
    min-height: 200px;
    background: var(--bg);
}
.tier-grid::-webkit-scrollbar { height: 6px; }
.tier-grid::-webkit-scrollbar-track { background: var(--bg); }
.tier-grid::-webkit-scrollbar-thumb { background: #869aaf; border-radius: 3px; }

.tier-col {
    flex: 0 0 240px;
    min-width: 240px;
    border-right: 1px solid var(--border);
    animation: fadeUp 0.3s ease both;
    background: var(--card);
}
.tier-col:last-child { border-right: none; }
.tier-col:nth-child(1) { animation-delay: 0.04s; }
.tier-col:nth-child(2) { animation-delay: 0.08s; }
.tier-col:nth-child(3) { animation-delay: 0.12s; }
.tier-col:nth-child(4) { animation-delay: 0.16s; }
.tier-col:nth-child(5) { animation-delay: 0.20s; }

/* TIER COLUMN HEADER */
.tier-col-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
    font-size: 18px;
    font-weight: 800;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* White border */
}
.tier-col-header img { width: 22px; height: 22px; object-fit: contain; }

/* Tier header colors matching mctier.css tier backgrounds */
.tier-header-gold   { background: #41361b; color: #f0b857; } /* Match --tier-1 */
.tier-header-silver { background: #343843; color: #a9b1b9; } /* Match --tier-2 */
.tier-header-bronze { background: #352620; color: #d59161; } /* Match --tier-3 */
.tier-header-plain  { background: #161e2a; color: #b1c0cc; } /* Match --tier-4/5 */

/* TIER PLAYER ROW */
.tier-player-row {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: calc(0.25rem * 2); /* 0.5rem = 8px, match mctier.css gap-2 */
    padding: calc(0.25rem * 1) calc(0.25rem * 3); /* py-1 px-3 = 4px 12px, match mctier.css */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 1px solid #89f19c; /* Reduced from 3px to 1px */
    transition: background 0.12s;
    text-decoration: none;
    color: inherit;
    background: transparent;
}
.tier-player-row:hover { background: rgba(255, 255, 255, 0.05); }
.tier-player-row:last-child { border-bottom: none; }

/* Also apply to .player.user-row in tier tables */
.tier-col .player.user-row {
    border-left: 1px solid #89f19c !important; /* Reduced from 3px to 1px */
}

/* TIER REGION LABEL - Slide in from left on hover (ONLY for tier tables, not overall mode) */
#leaderboard-wrapper .player.user-row:hover .region-label {
    transform: translateX(0) !important; /* Slide in */
}

#leaderboard-wrapper .player.user-row:hover .player-content-wrapper {
    transform: translateX(50px) !important; /* Push content right to make space */
}

.tier-player-avatar {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: transparent;
    flex-shrink: 0;
}
.tier-player-avatar img { width: 100%; height: 100%; object-fit: cover; }

.tier-player-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #f9fafb; /* Match mctier.css foreground */
}

.tier-player-arrow {
    color: var(--muted);
    font-size: 11px;
    flex-shrink: 0;
}

/* EMPTY TIER */
.tier-empty { padding: 24px; text-align: center; color: var(--muted-fg); font-size: 13px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1100px) {
    .th-tiers, .player-tiers { display: none; }
    .th-region { width: 80px; }
}
@media (max-width: 768px) {
    .table-header { padding: 0 8px; }
    .player-row   { padding: 6px 8px 6px 6px; }
    .content-card { padding: 14px 10px 28px; }
    .tabs-container { gap: 2px; }
    .tab { min-width: 84px; padding: 6px 10px 8px; font-size: 12px; }
    .tab-icon { width: 24px; height: 24px; }
    .info-bar { flex-wrap: wrap; gap: 8px; }
    .tier-col { flex: 0 0 200px; min-width: 200px; }
}
@media (max-width: 480px) {
    .rank-badge, .player-avatar-wrap { width: 48px; height: 48px; }
    .player-name { font-size: 16px; }
    .rank-badge  { font-size: 17px; }
}

/* ===================================================
   FIX ICONS - xóa nền trắng PNG
   =================================================== */

/* Các icon trong tab navigation */
.tab .tab-icon {
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 1px rgba(255,255,255,0.1));
}

/* Icon active tab giữ màu sáng hơn */
.tab.tab-active .tab-icon {
    filter: brightness(1.1);
}

/* Badge colors override tier-chip-icon bg */

/* Player modal tier icons - handled in icon-fix.css */

/* Tier col header icon */
.tier-col-header img {
    mix-blend-mode: screen;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
}

/* Navbar icons */
nav .nav-icon,
nav .nav-icon-sm {
    mix-blend-mode: screen;
}

/* Tier player avatar - không blend */
.tier-player-avatar img,
.player-avatar,
.pm-avatar-wrap img,
.search-result-avatar img {
    mix-blend-mode: normal !important;
    filter: none !important;
}

/* ===================================================
   RANK SHIMMER SVG + BUST AVATAR
   =================================================== */

/* Rank badge với shimmer SVG nền */
.rank-badge-wrap {
    position: relative;
    width: 140px;
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    border-radius: 8px;
}
.rank-shimmer, .rank-shimmer-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: left center;
    z-index: 0;
}
.rank-player-skin {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 47px;
    border-radius: 4px;
    object-fit: cover;
    z-index: 2;
    image-rendering: pixelated;
    background: transparent;
    filter: drop-shadow(-4px -2px 1px rgba(0, 0, 0, 0.47));
}
.rank-number {
    position: relative;
    z-index: 2;
    font-size: 28px;
    font-weight: 900;
    font-style: italic;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    padding-left: 15px;
    letter-spacing: -1px;
}

/* 3D Bust skin (crafty.gg) */
.player-bust-wrap {
    width: 35px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.player-bust {
    width: 35px;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ===================================================
   INFORMATION MODAL — Tabs
   =================================================== */
.info-modal-box {
    max-width: 340px !important;
    padding: 20px !important;
}
.info-tabs {
    display: flex;
    gap: 0;
    background: var(--secondary);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 16px;
}
.info-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 7px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted-fg);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, color 0.2s;
}
.info-tab.active {
    background: var(--card);
    color: var(--fg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.info-tab-content { }
.info-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 14px;
}

/* Title list */
.title-list { display: flex; flex-direction: column; gap: 10px; }
.title-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.title-icon { flex-shrink: 0; margin-top: 1px; }
.title-name { font-size: 14px; font-weight: 700; }
.title-desc { font-size: 12px; color: var(--muted-fg); margin-top: 1px; }

/* Points list */
.points-list { display: flex; flex-direction: column; gap: 10px; }
.points-tier-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-left: 8px;
    border-left: 2px solid var(--border);
}
.points-tier-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--fg);
}
.points-tier-label.tier-plain { color: var(--muted-fg); font-weight: 600; }
.points-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.points-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}
.points-badge.ht { background: rgba(230,126,34,.2); color: #e67e22; }
.points-badge.lt { background: rgba(100,100,120,.2); color: var(--muted-fg); }

/* ===================================================
   CUSTOM SCROLLBAR (ẩn scrollbar OS, dùng custom)
   =================================================== */
/* Scrollbar matching mctier.css */
html {
    scrollbar-width: thin;
    scrollbar-color: #869aaf var(--bg);
}
html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb {
    background: #869aaf;
    border-radius: 3px;
}
html::-webkit-scrollbar-thumb:hover {
    background: #a0b5c9;
}

/* Custom scrollbar cho search results và player modal */
.search-results::-webkit-scrollbar,
.player-modal::-webkit-scrollbar { width: 4px; }
.search-results::-webkit-scrollbar-thumb,
.player-modal::-webkit-scrollbar-thumb {
    background: #869aaf; /* Match mctier.css */
    border-radius: 2px;
}

/* ===================== CIRCULAR TIER CHIPS (Overall Rankings) ===================== */
.tier-chip-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 30px;
    flex-shrink: 0;
}
.tier-chip-circle-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border, #333);
    background: rgba(30,40,60,0.7);
    transition: box-shadow 0.15s;
    overflow: hidden;
    flex-shrink: 0;
}
.tier-chip-circle-icon img {
    width: 13px;
    height: 13px;
    max-width: 13px;
    max-height: 13px;
    object-fit: contain;
    background: transparent !important;
    mix-blend-mode: screen;
    display: block;
    flex-shrink: 0;
}
.tier-chip-circle-label {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #7ecfff;
    white-space: nowrap;
    background: rgba(10,20,40,0.9);
    padding: 1px 4px;
    border-radius: 4px;
    margin-top: 1px;
    border: 1px solid rgba(100,180,255,0.2);
}
.tier-chip-empty .tier-chip-circle-label {
    color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.04);
    border-color: transparent;
}

/* Empty/Unranked circle - dashed border */
.tier-chip-empty .tier-chip-circle-icon {
    border: 2px dashed rgba(255,255,255,0.15);
    background: transparent;
}
.tier-chip-empty .tier-chip-circle-label {
    color: rgba(255,255,255,0.2);
}
.tier-icon-unranked {
    opacity: 0.2;
    filter: grayscale(1);
}

/* Colored borders per tier - all navy bg, cyan/teal border like image 2 */
.badge-ht1 .tier-chip-circle-icon, .badge-lt1 .tier-chip-circle-icon,
.badge-ht2 .tier-chip-circle-icon, .badge-lt2 .tier-chip-circle-icon,
.badge-ht3 .tier-chip-circle-icon, .badge-lt3 .tier-chip-circle-icon,
.badge-ht4 .tier-chip-circle-icon, .badge-lt4 .tier-chip-circle-icon,
.badge-ht5 .tier-chip-circle-icon, .badge-lt5 .tier-chip-circle-icon {
    background: rgba(15, 25, 50, 0.9);
    border: none;
    box-shadow: none;
}

/* Colored labels - all use bright teal pill like image 2 */
.badge-ht1 .tier-chip-circle-label, .badge-lt1 .tier-chip-circle-label { color: #7ecfff; background: rgba(10,30,60,0.9); border-color: rgba(80,180,255,0.3); }
.badge-ht2 .tier-chip-circle-label, .badge-lt2 .tier-chip-circle-label { color: #7ecfff; background: rgba(10,30,60,0.9); border-color: rgba(80,180,255,0.3); }
.badge-ht3 .tier-chip-circle-label, .badge-lt3 .tier-chip-circle-label { color: #7ecfff; background: rgba(10,30,60,0.9); border-color: rgba(80,180,255,0.3); }
.badge-ht4 .tier-chip-circle-label, .badge-lt4 .tier-chip-circle-label { color: #7ecfff; background: rgba(10,30,60,0.9); border-color: rgba(80,180,255,0.3); }
.badge-ht5 .tier-chip-circle-label, .badge-lt5 .tier-chip-circle-label { color: #7ecfff; background: rgba(10,30,60,0.9); border-color: rgba(80,180,255,0.3); }

/* ===================== POINTS INFO MODAL (Tier groups) ===================== */
.points-tier-group {
    margin-bottom: 10px;
}
.points-tier-header {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted-fg);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-left: 3px solid var(--border, #333);
    padding-left: 8px;
}
.tier1-header { color: #f0c040; border-left-color: #f0c040; }
.tier2-header { color: #b0b0b0; border-left-color: #b0b0b0; }
.tier3-header { color: #cd7f32; border-left-color: #cd7f32; }
.tier4-header { color: var(--fg); border-left-color: var(--border, #444); }
.tier5-header { color: var(--fg); border-left-color: var(--border, #444); }

.points-tier-body {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-left: 11px;
}
.pts-badge {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}
.ht-badge { background: rgba(240,192,0,.2); color: #f0c040; }
.lt-badge { background: rgba(180,180,180,.12); color: #bbb; }
.ht-badge-plain { background: rgba(255,255,255,.07); color: var(--fg); }
.lt-badge-plain { background: rgba(255,255,255,.04); color: var(--muted-fg); }

/* HARD FIX: Prevent SVG icons from overflowing circles */
.tier-chip-circle-icon img,
.tier-chip-circle-icon img.tier-icon-unranked {
    width: 13px !important;
    height: 13px !important;
    max-width: 13px !important;
    max-height: 13px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0 !important;
}


/* Avatar overlay for top 3 players (positioned over shimmer) */
.rank-avatar-overlay {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 2;
    pointer-events: none;
}


/* ===================== RANK BADGE OTHER SVG ===================== */
.rank-shimmer-other {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: left center;
    z-index: 0;
}

.rank-badge-wrap .rank-shimmer-other text {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}


/* ===================== SKELETON LOADING STYLES ===================== */
.skeleton-player {
    background: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}

.skeleton {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

.skeleton-avatar-md {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.skeleton-name-md {
    width: 80px;
    height: 14px;
}

.skeleton-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}