html{scroll-behavior:smooth;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
    /* Colors from mctier.css dark mode */
    --bg:#10161d;
    --card:#121822;
    --border:#18202a;
    --secondary:#1e2939;
    --muted:#222a38;
    --muted-fg:#99a1af;
    --accent:#1e2939;
    --accent-hover:#3e4f68;
    --fg:#f9fafb;
    --input-bg:#1e2939;
    --radius:12px;--nav-height:64px;--max-width:1352px;

    /* Tier colors from mctier.css */
    --hightier:#263244;
    --lowtier:#161e2a;
    --hightier-hover:#3e4f68;
    --lowtier-hover:#263242;
    --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;
    --hightier-icon-foreground:#3d526f;
    --hightier-icon-foreground-hover:#637998;
    --lowtier-icon-foreground:#253449;
    --lowtier-icon-foreground-hover:#374d6c;
    --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;

    /* Region colors */
    --na-foreground:#d95c6a;
    --eu-foreground:#89f19c;
    --as-foreground:#af7f91;

    /* Placement colors */
    --placement-1:#e5ba43;
    --placement-2:#808c9c;
    --placement-3:#b56326;
    --placement-other:#1e2634;
}
html.light{
    --bg:#f0f2f8;--card:#ffffff;--border:#dde1ed;
    --muted:#a0a8c0;--muted-fg:#6b7494;
    --accent:#eef0f8;--accent-hover:#e2e6f4;
    --fg:#1a1d2e;--secondary:#f5f6fc;--input-bg:#f5f6fc;
}
html,body{height:100%;}
body{font-family:'Geist',system-ui,sans-serif;background:var(--bg);color:var(--fg);min-height:100vh;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
img{display:block;}
.ctrl-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--secondary);border:1.5px solid var(--border);border-radius:10px;color:var(--muted-fg);cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .1s;flex-shrink:0;isolation:isolate;}
.ctrl-btn:hover{background:var(--accent-hover);color:var(--fg);border-color:#4a6cf7;transform:translateY(-1px);}
.ctrl-btn.active{background:rgba(74,108,247,.18);border-color:rgba(74,108,247,.5);color:#7a9fff;}
.ctrl-btn span{display:none;}
.ctrl-btn svg{width:17px;height:17px;display:block;mix-blend-mode:normal;fill:currentColor;}

/* NAVBAR */
.navbar-wrapper{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:12px 16px 0;}
.navbar{width:100%;max-width:var(--max-width);height:var(--nav-height);background:var(--card);border:2px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 16px;}
.nav-logo{display:flex;align-items:center;min-width:160px;}
.logo-link{display:flex;align-items:center;}
.logo-text{font-size:22px;font-weight:900;letter-spacing:-1px;color:var(--fg);}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;}
.nav-item{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;font-size:15px;font-weight:500;color:var(--muted-fg);transition:background .15s,color .15s;cursor:pointer;white-space:nowrap;}
.nav-item:hover{background:var(--accent);color:var(--fg);}
.nav-item.nav-muted{color:var(--muted);cursor:default;}
.nav-item.nav-muted:hover{background:transparent;color:var(--muted);}
.nav-item.active{color:var(--fg);}
.nav-icon{width:22px;height:22px;object-fit:contain;}
.nav-icon-sm{width:16px;height:16px;object-fit:contain;}
.nav-dropdown-wrap{position:relative;}
.chevron{transition:transform .2s;flex-shrink:0;}
.chevron.open{transform:rotate(180deg);}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;background:var(--card);border:2px solid var(--border);border-radius:10px;min-width:200px;z-index:200;padding:6px;}
.dropdown-menu.open{display:block;}
.dropdown-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;color:var(--muted-fg);font-size:14px;font-weight:500;transition:background .15s,color .15s;}
.dropdown-item:hover{background:var(--accent);color:var(--fg);}
.nav-right{display:flex;align-items:center;gap:8px;min-width:160px;justify-content:flex-end;}
.search-bar{display:flex;align-items:center;gap:8px;background:var(--input-bg);border:1.5px solid var(--border);border-radius:999px;padding:7px 12px;cursor:pointer;transition:border-color .15s;min-width:200px;}
.search-bar:hover{border-color:#4a6cf7;}
.search-placeholder{color:var(--muted-fg);font-size:14px;flex:1;user-select:none;}
.search-icon{color:var(--muted-fg);flex-shrink:0;}
.search-kbd{background:var(--accent);color:var(--muted-fg);padding:2px 7px;border-radius:5px;font-size:11px;font-family:inherit;}
.hamburger{display:none;background:none;border:none;cursor:pointer;color:var(--muted-fg);padding:8px;border-radius:8px;transition:background .15s;}
.hamburger:hover{background:var(--accent);color:var(--fg);}
.mobile-menu{display:none;position:fixed;top:90px;right:16px;background:var(--card);border:2px solid var(--border);border-radius:12px;padding:8px;z-index:150;min-width:200px;flex-direction:column;gap:2px;}
.mobile-menu.open{display:flex;}
.mobile-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;color:var(--muted-fg);font-size:14px;font-weight:500;transition:background .15s,color .15s;}
.mobile-item:hover{background:var(--accent);color:var(--fg);}

/* SEARCH OVERLAY */
.search-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:300;align-items:flex-start;justify-content:center;padding-top:100px;}
.search-overlay.open{display:flex;}
.search-modal{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);width:100%;max-width:560px;overflow:hidden;}
.search-modal-header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);}
.search-modal-header input{flex:1;background:none;border:none;outline:none;color:var(--fg);font-size:16px;font-family:inherit;}
.search-modal-header input::placeholder{color:var(--muted-fg);}
.search-results{max-height:420px;overflow-y:auto;}
.search-result-item{display:flex;align-items:center;gap:12px;padding:12px 20px;cursor:pointer;transition:background .1s;border-bottom:1px solid var(--border);}
.search-result-item:last-child{border-bottom:none;}
.search-result-item:hover{background:var(--accent);}
.search-result-avatar{width:40px;height:40px;border-radius:8px;overflow:hidden;background:transparent;flex-shrink:0;}
.search-result-avatar img{width:100%;height:100%;object-fit:cover;}
.search-result-name{font-weight:600;font-size:15px;}
.search-result-sub{font-size:12px;color:var(--muted-fg);margin-top:2px;}
.search-empty{padding:40px 20px;text-align:center;color:var(--muted-fg);}

/* MODALS */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:400;align-items:center;justify-content:center;padding:16px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);padding:28px;max-width:500px;width:100%;position:relative;}
.modal-box h2{font-size:18px;font-weight:700;margin-bottom:14px;}
.modal-box p{font-size:14px;color:var(--muted-fg);line-height:1.7;}
.modal-note{font-size:12px!important;}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;cursor:pointer;color:var(--muted-fg);font-size:18px;line-height:1;transition:color .15s;}
.modal-close:hover{color:var(--fg);}

/* ==================== PLAYER MODAL ==================== */
a{text-decoration:none;color:inherit;}
img{display:block;}

/* NAVBAR */
.navbar-wrapper{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:12px 16px 0;}
.navbar{width:100%;max-width:var(--max-width);height:var(--nav-height);background:var(--card);border:2px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 16px;}
.nav-logo{display:flex;align-items:center;min-width:160px;}
.logo-link{display:flex;align-items:center;}
.logo-text{font-size:22px;font-weight:900;letter-spacing:-1px;color:var(--fg);}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;}
.nav-item{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;font-size:15px;font-weight:500;color:var(--muted-fg);transition:background .15s,color .15s;cursor:pointer;white-space:nowrap;}
.nav-item:hover{background:var(--accent);color:var(--fg);}
.nav-item.nav-muted{color:var(--muted);cursor:default;}
.nav-item.nav-muted:hover{background:transparent;color:var(--muted);}
.nav-item.active{color:var(--fg);}
.nav-icon{width:22px;height:22px;object-fit:contain;}
.nav-icon-sm{width:16px;height:16px;object-fit:contain;}
.nav-dropdown-wrap{position:relative;}
.chevron{transition:transform .2s;flex-shrink:0;}
.chevron.open{transform:rotate(180deg);}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;background:var(--card);border:2px solid var(--border);border-radius:10px;min-width:200px;z-index:200;padding:6px;}
.dropdown-menu.open{display:block;}
.dropdown-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;color:var(--muted-fg);font-size:14px;font-weight:500;transition:background .15s,color .15s;}
.dropdown-item:hover{background:var(--accent);color:var(--fg);}
.nav-right{display:flex;align-items:center;gap:8px;min-width:160px;justify-content:flex-end;}
.search-bar{display:flex;align-items:center;gap:8px;background:var(--input-bg);border:1.5px solid var(--border);border-radius:999px;padding:7px 12px;cursor:pointer;transition:border-color .15s;min-width:200px;}
.search-bar:hover{border-color:#4a6cf7;}
.search-placeholder{color:var(--muted-fg);font-size:14px;flex:1;user-select:none;}
.search-icon{color:var(--muted-fg);flex-shrink:0;}
.search-kbd{background:var(--accent);color:var(--muted-fg);padding:2px 7px;border-radius:5px;font-size:11px;font-family:inherit;}
.hamburger{display:none;background:none;border:none;cursor:pointer;color:var(--muted-fg);padding:8px;border-radius:8px;transition:background .15s;}
.hamburger:hover{background:var(--accent);color:var(--fg);}
.mobile-menu{display:none;position:fixed;top:90px;right:16px;background:var(--card);border:2px solid var(--border);border-radius:12px;padding:8px;z-index:150;min-width:200px;flex-direction:column;gap:2px;}
.mobile-menu.open{display:flex;}
.mobile-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;color:var(--muted-fg);font-size:14px;font-weight:500;transition:background .15s,color .15s;}
.mobile-item:hover{background:var(--accent);color:var(--fg);}

/* SEARCH OVERLAY */
.search-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:300;align-items:flex-start;justify-content:center;padding-top:100px;}
.search-overlay.open{display:flex;}
.search-modal{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);width:100%;max-width:560px;overflow:hidden;}
.search-modal-header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);}
.search-modal-header input{flex:1;background:none;border:none;outline:none;color:var(--fg);font-size:16px;font-family:inherit;}
.search-modal-header input::placeholder{color:var(--muted-fg);}
.search-results{max-height:420px;overflow-y:auto;}
.search-result-item{display:flex;align-items:center;gap:12px;padding:12px 20px;cursor:pointer;transition:background .1s;border-bottom:1px solid var(--border);}
.search-result-item:last-child{border-bottom:none;}
.search-result-item:hover{background:var(--accent);}
.search-result-avatar{width:40px;height:40px;border-radius:8px;overflow:hidden;background:transparent;flex-shrink:0;}
.search-result-avatar img{width:100%;height:100%;object-fit:cover;}
.search-result-name{font-weight:600;font-size:15px;}
.search-result-sub{font-size:12px;color:var(--muted-fg);margin-top:2px;}
.search-empty{padding:40px 20px;text-align:center;color:var(--muted-fg);}

/* MODALS */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:400;align-items:center;justify-content:center;padding:16px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);padding:28px;max-width:500px;width:100%;position:relative;}
.modal-box h2{font-size:18px;font-weight:700;margin-bottom:14px;}
.modal-box p{font-size:14px;color:var(--muted-fg);line-height:1.7;}
.modal-note{font-size:12px!important;}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;cursor:pointer;color:var(--muted-fg);font-size:18px;line-height:1;transition:color .15s;}
.modal-close:hover{color:var(--fg);}

/* ==================== PLAYER MODAL ==================== */
.player-modal{
    background:var(--card);border:2px solid var(--border);
    border-radius:16px;padding:28px 24px 32px;
    max-width:420px;width:100%;position:relative;
    text-align:center;max-height:90vh;overflow-y:auto;
}
.pm-spinner{
    width:36px;height:36px;border:3px solid var(--border);
    border-top-color:#4a6cf7;border-radius:50%;
    animation:spin .8s linear infinite;margin:0 auto 12px;
}
@keyframes spin{to{transform:rotate(360deg);}}
.pm-loading{padding:40px 20px;}
.pm-loading p{color:var(--fg);font-weight:600;margin-bottom:4px;}

.pm-avatar-wrap{
    width:110px;height:110px;border-radius:50%;
    overflow:hidden;background:transparent;
    margin:0 auto 14px;border:3px solid var(--border);
}
.pm-avatar-wrap img{width:110px;height:auto;object-fit:cover;object-position:top;display:block;}
.pm-name{font-size:22px;font-weight:800;color:#7b9ef0;margin-bottom:10px;}

.pm-rank-badge{
    display:inline-flex;align-items:center;gap:7px;
    background:var(--secondary);border:1px solid var(--border);
    border-radius:999px;padding:5px 14px;
    font-size:13px;font-weight:700;color:#a29bfe;
    margin-bottom:8px;
}
.rank-badge-icon{width:18px;height:18px;object-fit:contain;flex-shrink:0;mix-blend-mode:lighten;}
.rank-info-icon{width:24px;height:24px;object-fit:contain;flex-shrink:0;mix-blend-mode:lighten;}

.pm-rank-badge svg{width:14px;height:14px;color:#7b9ef0;}

.pm-region{font-size:14px;color:var(--muted-fg);margin-bottom:10px;}

.pm-namemc{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--secondary);border:1px solid var(--border);
    border-radius:8px;padding:6px 14px;font-size:13px;
    color:var(--fg);font-weight:500;margin-bottom:18px;
    transition:background .15s;
}
.pm-namemc:hover{background:var(--accent);}
.pm-namemc-n{
    display:inline-flex;align-items:center;justify-content:center;
    width:18px;height:18px;background:#2a2a2a;
    border-radius:4px;font-weight:900;font-size:11px;
    color:#fff;
}

.pm-section-label{
    text-align:left;font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.5px;
    color:var(--muted);margin-bottom:8px;
}

.pm-position-box{
    background:var(--secondary);border:1px solid var(--border);
    border-radius:10px;padding:14px 18px;
    display:flex;align-items:center;gap:12px;
    margin-bottom:16px;text-align:left;
}
.pm-rank-num{font-size:24px;font-weight:900;font-style:italic;}
.pm-pos-mode{display:flex;align-items:center;gap:8px;}
.pm-pos-mode img{width:20px;height:20px;object-fit:contain;}
.pm-pos-mode span{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.pm-pos-pts{font-size:14px;color:var(--muted-fg);}

/* TIERS GRID in modal */
.pm-tiers-grid{
    display:flex;gap:6px;flex-wrap:wrap;
    justify-content:center;
}
/* ============================================
   TIER BADGE - 100% GIỐNG POPUP PLAYERS STATS
   ============================================ */

/* Base tier chip container */
.pm-tier-chip{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    flex-shrink:1;
    max-width:56px;
    min-width:44px;
}

/* Icon circle - Base style - VIỀN XÁM CHO TẤT CẢ */
.pm-tier-icon{
    width:36px;
    height:36px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background-color:#2e3e52;
    border:2px solid rgba(255,255,255,0.15);
}

.pm-tier-icon img{
    width:20px;
    height:20px;
    object-fit:contain;
}

/* Tier label - Base style */
.pm-tier-label{
    padding:2px 6px;
    border-radius:8px;
    font-size:11px;
    font-weight:800;
    min-width:unset;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-shadow:0 0 1px rgba(0,0,0,0.2);
}

/* Empty/Blank state */
.pm-tier-icon.empty{
    opacity:0.3;
    border:2px dashed #cccccc7e;
    background-color:transparent;
}

.pm-tier-label.empty{
    background-color:#40516618;
    color:#999999;
    font-weight:800;
}

/* ============================================
   TIER COLORS - HT (High Tier)
   ============================================ */

/* HT1 - Gold */
.pm-tier-chip.badge-ht1 .pm-tier-label{
    background-color:#6d5d2c;
    color:#e8ba3a;
}

/* HT2 - Silver */
.pm-tier-chip.badge-ht2 .pm-tier-label{
    background-color:#5e6979;
    color:#c4d3e7;
}

/* HT3 - Bronze */
.pm-tier-chip.badge-ht3 .pm-tier-label{
    background-color:#6b4b36;
    color:#f89f5a;
}

/* HT4 */
.pm-tier-chip.badge-ht4 .pm-tier-label{
    background-color:#303144;
    color:#81749a;
}

/* HT5 */
.pm-tier-chip.badge-ht5 .pm-tier-label{
    background-color:#2b2c3d;
    color:#8f82a8;
}

/* ============================================
   TIER COLORS - LT (Low Tier)
   ============================================ */

/* LT1 */
.pm-tier-chip.badge-lt1 .pm-tier-label{
    background-color:#584c25;
    color:#d5b355;
}

/* LT2 */
.pm-tier-chip.badge-lt2 .pm-tier-label{
    background-color:#4a505a;
    color:#a0a7b2;
}

/* LT3 */
.pm-tier-chip.badge-lt3 .pm-tier-label{
    background-color:#593722;
    color:#c67b42;
}

/* LT4 */
.pm-tier-chip.badge-lt4 .pm-tier-label{
    background-color:#2c2e40;
    color:#655b79;
}

/* LT5 */
.pm-tier-chip.badge-lt5 .pm-tier-label{
    background-color:#262a3a;
    color:#655b79;
}

/* TOAST */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#22c55e;color:#fff;padding:10px 22px;border-radius:8px;font-size:14px;font-weight:600;opacity:0;transition:opacity .25s;pointer-events:none;z-index:500;}
.toast.show{opacity:1;}

/* FOOTER */
.site-footer{background:var(--card);border-top:2px solid var(--border);padding:48px;margin-top:80px;text-align:center;color:var(--muted-fg);font-size:17px;position:relative;z-index:10;}

/* RESPONSIVE */
@media(max-width:900px){.nav-links{display:none;}.hamburger{display:flex;}.search-bar{min-width:150px;}}
@media(max-width:600px){.search-bar{display:none;}.nav-right{min-width:auto;}.logo-text{font-size:18px;}}

/* ===================================================
   FIX: Icons xóa nền trắng
   =================================================== */

/* Tất cả icon trong tabs, navbar, tier chips */
.tab-icon,
.nav-icon,
.nav-icon-sm,
.tier-chip-icon img,
.pm-tier-icon img,
.tier-col-header img,
.tier-player-avatar img,
.player-avatar,
.pm-avatar-wrap img {
    /* Không dùng mix-blend-mode vì ảnh PNG đã có transparency */
    background: transparent !important;
}

/* Icon trong tabs - xóa nền hộp trắng */
.tab-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.3));
    background: transparent !important;
}

/* Nav icons */
.nav-icon {
    background: transparent !important;
    object-fit: contain;
}

/* Tier chip icons - bo tròn nền màu, không phải ảnh có nền trắng */
.tier-chip-icon {
    background: transparent !important;
    border: none !important;
}

/* Icon trong tier column header */
.tier-col-header img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    background: transparent !important;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

/* Player modal tier icons */
.pm-tier-icon img {
    background: transparent !important;
    object-fit: contain;
}

/* Tab icon wrapper - không có background */
.tab {
    background-color: transparent;
}

/* Fix: Ảnh PNG có nền trắng - dùng mix-blend-mode multiply trên light bg
   Nhưng vì bg dark, ta dùng filter để làm mờ nền trắng */
.tab-icon,
.nav-icon,
.nav-icon-sm {
    /* Xóa nền trắng của PNG bằng cách blend với dark background */
    mix-blend-mode: screen;
}

/* Riêng Discord icon cần giữ nguyên màu */
.discord-chip img {
    mix-blend-mode: normal;
    filter: brightness(10);
}

/* Points row list (info modal) */
.points-row-list { display:flex;flex-direction:column;gap:6px; }
.points-row {
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;
    background:var(--secondary);
    border-radius:8px;
    border:1px solid var(--border);
}
.pts-tier {
    font-size:11px;font-weight:900;
    padding:3px 8px;border-radius:5px;
    min-width:34px;text-align:center;flex-shrink:0;
    letter-spacing:.5px;
}
.pts-tier.ht { background:rgba(230,126,34,.2); color:#f7c45e; }
.pts-tier.lt { background:rgba(108,92,231,.2); color:#a29bfe; }
.pts-label { flex:1;font-size:13px;color:var(--fg); }
.pts-val { font-size:13px;font-weight:800;color:#f0c040;flex-shrink:0; }

/* Rank info icon in titles modal */
.rank-info-icon {
    width:26px;height:26px;object-fit:contain;flex-shrink:0;
    display:block;
}
/* Title list rows */
.title-list { display:flex;flex-direction:column;gap:6px; }
.title-item {
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;
    background:var(--secondary);
    border-radius:8px;
    border:1px solid var(--border);
}
.title-icon { width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.title-name { font-size:13px;font-weight:700; }
.title-desc { font-size:11px;color:var(--muted-fg);margin-top:1px; }

.logo-banner{height:40px;width:auto;object-fit:contain;display:block;mix-blend-mode:screen;}
.nav-logo{display:flex;align-items:center;justify-content:center;min-width:160px;}
.logo-link{display:flex;align-items:center;justify-content:center;}

/* ══════════════════════════════════════
   PLAYER MODAL V2 — NEW MODERN DESIGN
   ══════════════════════════════════════ */
.modal-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:9999;align-items:center;justify-content:center;padding:16px; }
.modal-overlay.open { display:flex; }

.player-modal-v2 {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: linear-gradient(180deg, #1a2332 0%, #0f1419 100%);
    border: 2px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    padding: 20px;
}

.pm2-close {
    position: absolute; top: 14px; right: 16px;
    background: rgba(148, 163, 184, 0.1); border: none; cursor: pointer;
    color: #94a3b8; font-size: 22px; width: 32px; height: 32px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    z-index: 10; transition: all .15s;
}
.pm2-close:hover { background: rgba(248, 113, 113, 0.15); color: #f87171; }

/* Avatar Section */
.pm2-avatar-section {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    margin-top: 8px;
}

.pm2-avatar-ring {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm2-skin {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    image-rendering: pixelated;
}

/* Username Section */
.pm2-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 2px;
}

.pm2-name {
    font-size: 28px;
    font-weight: 600;
    color: #e8eef7;
    margin: 0;
    letter-spacing: -0.5px;
}

.pm2-action-icons {
    display: flex;
    gap: 8px;
}

.pm2-action-icon {
    cursor: pointer;
    color: #94a3b8;
    transition: color 0.2s ease, transform 0.2s ease;
    font-size: 18px;
}

.pm2-action-icon:hover {
    color: #fff;
    transform: scale(1.1);
}

/* Combat Badge */
.pm2-combat-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(100, 116, 139, 0.15);
    border-radius: 12px;
    padding: 8px 16px;
    margin-bottom: 2px;
}

.pm2-combat-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.pm2-combat-text {
    font-size: 15px;
    font-weight: 600;
    color: #fbbf24;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Account Type */
.pm2-acc {
    font-size: 14px;
    font-weight: 500;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    text-align: center;
}

/* NameMC Button */
.pm2-namemc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(30, 41, 59, 0.8);
    border: 2px solid rgba(148, 163, 184, 0.3);
    border-radius: 10px;
    padding: 8px 16px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    margin-bottom: 6px;
}

.pm2-namemc:hover {
    background: rgba(30, 41, 59, 1);
    border-color: rgba(148, 163, 184, 0.5);
    color: #fff;
    transform: translateY(-2px);
}

.pm2-namemc-n {
    background: #1e293b;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    color: #fff;
    width: 20px;
    height: 20px;
}

.pm2-namemc-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Position Section */
.pm2-position-section {
    width: 100%;
    margin-top: 8px;
}

.pm2-section-title {
    font-size: 11px; /* Smaller font */
    font-weight: 800; /* Bolder */
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1.2px; /* Tighter spacing */
    margin-bottom: 10px; /* Less margin */
    text-align: left;
    padding-left: 2px; /* Slight padding for alignment */
}

.pm2-position-card {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(30, 41, 59, 0.6);
    border: 2px solid rgba(148, 163, 184, 0.3);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    height: 45px;
}

.pm2-position-badge {
    position: relative;
    width: 90px;
    min-height: 60px;
    align-self: stretch;
    display: flex;
    align-items: flex-start; /* Changed from center to flex-start */
    padding-top: 4px; /* Reduced from 8px to 4px - move up more */
    justify-content: flex-start;
    flex-shrink: 0;
    overflow: visible;
    margin-left: -2px;
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.15);
}

.pm2-shimmer-bg {
    position: absolute;
    width: 90px;
    height: 100%;
    object-fit: fill;
    object-position: left center;
    z-index: 1;
    display: block !important;
    left: 0;
    top: 0;
    opacity: 1;
}

.pm2-position-rank {
    position: relative;
    z-index: 2;
    font-size: 28px; /* Tăng size */
    font-weight: 900;
    font-family: 'GeistSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); /* Shadow đậm hơn */
    margin-left: 18px; /* Căn chỉnh tốt hơn */
    letter-spacing: -0.05em; /* Gọn hơn */
    font-style: italic; /* Nghiêng như shimmer ở overall */
}

.pm2-position-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.5));
}

.pm2-position-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
}

.pm2-position-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pm2-position-rank {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
}

.pm2-position-mode {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.pm2-position-points {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    margin-left: 4px;
}

.pm2-position-icon-svg {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Performance Section */
.pm2-perf-section {
    width: 100%;
    margin-top: 8px;
}

.pm2-perf-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    background: rgba(30, 41, 59, 0.6);
    border: 2px solid rgba(148, 163, 184, 0.3);
    border-radius: 12px;
    padding: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #475569 transparent;
}

.pm2-perf-list::-webkit-scrollbar {
    height: 6px;
}

.pm2-perf-list::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

.pm2-perf-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    padding: 4px;
    background: transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    min-width: 45px;
    flex-shrink: 0;
}

.pm2-perf-chip:hover {
    background: rgba(15, 20, 25, 0.4);
    transform: translateY(-2px);
}

.pm2-perf-icon {
    width: 32px;
    height: 32px;
    background: #0a0e14;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm2-perf-icon img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.pm2-perf-tier {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 8px;
    margin-top: 2px;
}

/* Tier icon border colors - foreground per tier */
.pm2-perf-chip.badge-ht1 .pm2-perf-icon { border-color: #e8ba3a; }
.pm2-perf-chip.badge-ht2 .pm2-perf-icon { border-color: #c4d3e7; }
.pm2-perf-chip.badge-ht3 .pm2-perf-icon { border-color: #f89f5a; }
.pm2-perf-chip.badge-ht4 .pm2-perf-icon { border-color: #81749a; }
.pm2-perf-chip.badge-ht5 .pm2-perf-icon { border-color: #8f82a8; }

/* Tier icon border colors - LT */
.pm2-perf-chip.badge-lt1 .pm2-perf-icon { border-color: #d5b355; }
.pm2-perf-chip.badge-lt2 .pm2-perf-icon { border-color: #a0a7b2; }
.pm2-perf-chip.badge-lt3 .pm2-perf-icon { border-color: #c67b42; }
.pm2-perf-chip.badge-lt4 .pm2-perf-icon { border-color: #655b79; }
.pm2-perf-chip.badge-lt5 .pm2-perf-icon { border-color: #655b79; }

/* Tier label colors - match overall mode */
.pm2-perf-chip.badge-ht1 .pm2-perf-tier { background: #6d5d2c; color: #e8ba3a; }
.pm2-perf-chip.badge-ht2 .pm2-perf-tier { background: #5e6979; color: #c4d3e7; }
.pm2-perf-chip.badge-ht3 .pm2-perf-tier { background: #6b4b36; color: #f89f5a; }
.pm2-perf-chip.badge-ht4 .pm2-perf-tier { background: #303144; color: #81749a; }
.pm2-perf-chip.badge-ht5 .pm2-perf-tier { background: #2b2c3d; color: #8f82a8; }
.pm2-perf-chip.badge-lt1 .pm2-perf-tier { background: #584c25; color: #d5b355; }
.pm2-perf-chip.badge-lt2 .pm2-perf-tier { background: #4a505a; color: #a0a7b2; }
.pm2-perf-chip.badge-lt3 .pm2-perf-tier { background: #593722; color: #c67b42; }
.pm2-perf-chip.badge-lt4 .pm2-perf-tier { background: #2c2e40; color: #655b79; }
.pm2-perf-chip.badge-lt5 .pm2-perf-tier { background: #262a3a; color: #655b79; }

/* Unranked */
.pm2-perf-chip.unranked .pm2-perf-icon {
    opacity: 0.3;
    border: 2px dashed rgba(255, 255, 255, 0.15);
    background: transparent;
}

.pm2-perf-chip.unranked .pm2-perf-tier {
    background: rgba(255, 255, 255, 0.04);
    color: #999;
}

/* Loading */
.pm-loading { padding: 60px 20px; text-align: center; }
.pm-spinner {
    width: 36px; height: 36px; border: 3px solid var(--border);
    border-top-color: #7b9ef0; border-radius: 50%;
    animation: spin .8s linear infinite; margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 640px) {
    .player-modal-v2 { max-width: 95vw; padding: 24px 20px; }
    .pm2-avatar-ring { width: 110px; height: 110px; }
    .pm2-name { font-size: 26px; }
    .pm2-combat-text { font-size: 14px; }
    .pm2-perf-list { gap: 8px; padding: 12px; }
}