/* PVPTIERS 排行榜主题样式 */
* { margin:0; padding:0; box-sizing:border-box; outline:none; }
*:focus { outline:none; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:#0b0b0e; }
::-webkit-scrollbar-thumb { background:#2a2a3a; border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:#3a3a4a; }

body { background:#0b0b0e; font-family:'Inter','Segoe UI',Arial,sans-serif; color:#e8e8e8; display:flex; justify-content:center; padding:24px 16px 60px; min-height:100vh; }
.container { width:100%; max-width:1352px; background:#0f0f13; border-radius:20px; padding:20px 28px 32px; box-shadow:0 8px 40px rgba(0,0,0,0.7); }

.navbar { display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid #21212a; flex-wrap:wrap; gap:12px 20px; }
.nav-left { display:flex; align-items:center; gap:32px; }
.logo { font-size:32px; font-weight:900; letter-spacing:2px; background:linear-gradient(135deg,#f5c542 0%,#dba32b 50%,#f5c542 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; cursor:default; }
.server-badge { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:#c8c8d8; background:rgba(255,255,255,0.05); border:1px solid #2a2a36; border-radius:40px; padding:6px 16px 6px 14px; margin-left:12px; }
.server-badge i { color:#f5c542; }
.server-badge .ip { color:#f5c542; font-weight:600; }
.nav-links { display:flex; gap:28px; font-size:15px; font-weight:500; color:#b0b0b8; }
.nav-links a { display:flex; align-items:center; gap:8px; color:#b0b0b8; text-decoration:none; transition:color 0.2s; cursor:pointer; position:relative; }
.nav-links a:hover { color:#f0e6d0; }
.nav-links a.active { color:#f5c542; }
.nav-links a.active::after { content:''; position:absolute; bottom:-6px; left:0; width:100%; height:2px; background:#f5c542; }
.nav-links a img { width:18px; height:18px; object-fit:contain; filter:grayscale(100%) opacity(0.6); transition:all 0.2s ease; margin-right:4px; vertical-align:middle; }
.nav-links a:hover img, .nav-links a.active img { filter:grayscale(0%) opacity(1); }
.nav-right { display:flex; align-items:center; gap:20px; }
.search-box { display:flex; align-items:center; background:#1c1c24; border-radius:40px; padding:6px 16px 6px 18px; border:1px solid #2c2c36; }
.search-box:focus-within { border-color:#f5c542; }
.search-box i { color:#6a6a78; font-size:14px; margin-right:10px; }
.search-box input { background:transparent; border:none; outline:none; color:#e0e0e8; font-size:14px; padding:6px 0; width:160px; font-family:inherit; }
.search-box input::placeholder { color:#5a5a68; }

.tabs-wrapper { margin-top:16px; overflow-x:auto; display:flex; gap:4px; }
.tab-item { flex:0 0 110px; background:transparent; color:rgba(160,160,170,0.4); white-space:nowrap; display:flex; flex-direction:column; align-items:center; border:2px solid #2a2a36; border-bottom:none; border-radius:1.5rem 1.5rem 0 0; padding:4px 20px 0; cursor:pointer; gap:2px; }
.tab-item:hover { background:rgba(255,255,255,0.05); color:#e0e0e8; }
.tab-item.active { background:#181820; border-color:#f5c542; color:#f5c542; }
.tab-item img { width:24px; height:24px; object-fit:contain; filter:grayscale(100%) opacity(0.6); }
.tab-item:hover img, .tab-item.active img { filter:grayscale(0%) opacity(1); }
.tab-item strong { font-size:13px; font-weight:600; }
.tab-item .tab-underline { display:none; width:100%; height:2px; background:#f5c542; position:absolute; bottom:0; left:0; }
.tab-item.active .tab-underline { display:block; }
.tab-item { position:relative; }

#view-ranking { display:block; }
#view-community { display:none; padding-top:20px; }
.table-wrap { margin-top:16px; overflow-x:auto; border-radius:12px; background:#0d0d12; border:1px solid #1c1c26; max-height:700px; overflow-y:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; min-width:800px; }
thead { position:sticky; top:0; z-index:10; }
thead tr { background:#13131b; border-bottom:2px solid #252530; }
thead th { padding:14px 8px; text-align:left; font-weight:600; font-size:13px; letter-spacing:0.4px; color:#6b7280; white-space:nowrap; }
tbody tr { border-bottom:1px solid #17171f; transition:background 0.15s ease,transform 0.2s ease; cursor:pointer; }
tbody tr:hover { background:#16161f; transform:translateX(-6px); }
tbody td { padding:14px 8px; vertical-align:middle; }

.player-cell { display:flex; align-items:center; }
.rank-block { display:flex; align-items:center; height:80px; min-width:85px; padding-left:14px; padding-right:8px; margin-right:14px; background-size:cover; background-position:center; flex-shrink:0; border-radius:8px 0 0 8px; }
.rank-block.p1, .rank-block.p2 { background-image:url(https://img.mclinyunhai.com/upload/kn98/2026/07/27/1-shimmer.svg); background-color:#f5c542; }
.rank-block.p3 { background-image:url(https://img.mclinyunhai.com/upload/kn98/2026/07/27/3-shimmer.svg); background-color:#b56326; }
.rank-block.other { background-image:url(https://img.mclinyunhai.com/upload/kn98/2026/07/27/other.svg); background-color:#1e2634; }
.rank-num { font-weight:900; font-style:italic; color:#fff; font-size:28px; margin-right:6px; }
.rank-block.other .rank-num { font-style:normal; }
.p-avatar { width:48px; height:48px; border-radius:4px; object-fit:cover; flex-shrink:0; }
.player-name { font-weight:800; font-size:20px; color:#f0f0f8; }
.player-subtitle { display:flex; align-items:center; gap:6px; font-size:13px; color:#9a9aaa; }
.player-subtitle .score { color:#6b7280; font-size:12px; }
.p-badge { width:24px; height:24px; object-fit:contain; }
.region-badge { display:inline-block; padding:6px 16px; border-radius:6px; font-size:15px; font-weight:800; }
.region-badge.na { background:#442228; color:#d95c6a; }
.region-badge.eu { background:#1c3e20; color:#89f19c; }
.region-badge.cn { background:#2d3b42; color:#58a6ff; }

.tier-cell-wrapper { display:flex; flex-direction:column; align-items:center; gap:2px; }
.tier-icon-wrap { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#14141e; border:2px solid #2a2a36; }
.tier-icon-wrap img { width:20px; height:20px; }
.tier-label { font-size:11px; font-weight:900; display:inline-block; padding:2px 6px; border-radius:12px; border:1px solid transparent; }
.tier-ht1 .tier-label { background:#6d5d2c; color:#e8ba3a; }
.tier-lt1 .tier-label { background:#584c25; color:#d5b355; }
.tier-ht2 .tier-label { background:#5e6979; color:#c4d3e7; }
.tier-lt2 .tier-label { background:#4a505a; color:#a0a7b2; }
.tier-ht3 .tier-label { background:#6b4b36; color:#f89f5a; }
.tier-lt3 .tier-label { background:#593722; color:#c67b42; }
.tier-ht4 .tier-label { background:#303144; color:#81749a; }
.tier-lt4 .tier-label { background:#2d2d3a; color:#6a6a8a; }
.tier-lt5 .tier-label { background:#1a1a28; color:#555570; }
.tier-empty { color:#4a4a5a; font-weight:400; font-size:12px; }

.footer-note { margin-top:18px; font-size:12px; color:#4a4a58; text-align:right; border-top:1px solid #16161e; padding-top:14px; }

.community-header { text-align:center; font-size:26px; font-weight:800; margin-bottom:25px; background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.community-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.comm-card { background:#121822; border:1px solid #252530; border-radius:16px; padding:20px; }
.comm-card-title { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; color:#f0f0f8; margin-bottom:12px; }
.comm-card-title img { width:28px; height:28px; }
.comm-list { display:flex; flex-direction:column; gap:10px; }
.comm-item { display:flex; align-items:center; gap:12px; background:#0d0d12; padding:12px 14px; border-radius:10px; border:1px solid #1c1c24; }
.comm-item:hover { background:#1c1c24; }
.comm-item .info .name { font-weight:600; color:#e8e8e8; font-size:14px; }
.comm-item .info .desc { font-size:12px; color:#6b7280; margin-top:2px; }
.comm-item .copy-btn { margin-left:auto; cursor:pointer; color:#6b7280; padding:4px 8px; border-radius:6px; background:rgba(255,255,255,0.03); }
.comm-item .copy-btn:hover { color:#f5c542; background:rgba(255,255,255,0.08); }
.qq-icon { color:#12b7f5; font-size:22px; width:32px; text-align:center; }

.modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); justify-content:center; align-items:center; z-index:999; backdrop-filter:blur(4px); }
.modal-overlay.active { display:flex; }
.modal-box { background:#121822; border:1px solid #2a2a36; border-radius:20px; padding:32px 28px; max-width:500px; width:90%; max-height:90vh; overflow-y:auto; box-shadow:0 8px 60px rgba(0,0,0,0.9); position:relative; }
.modal-profile { display:flex; flex-direction:column; align-items:center; gap:8px; }
.modal-avatar-wrap { width:88px; height:88px; border-radius:50%; border:3px solid #f5c542; overflow:hidden; background:#1c1c28; margin-bottom:4px; }
.modal-avatar-wrap img { width:100%; height:100%; object-fit:cover; }
.modal-player-name { font-size:26px; font-weight:700; color:#f0f0f8; }
.modal-title-badge { display:flex; align-items:center; gap:8px; background:rgba(253,224,71,0.15); padding:6px 18px; border-radius:40px; border:1px solid rgba(253,224,71,0.2); font-size:15px; font-weight:600; color:#f5c542; }
.modal-title-badge img { width:26px; height:26px; }
.modal-section-title { width:100%; text-align:left; color:#6b7280; font-size:14px; font-weight:600; margin-top:18px; margin-bottom:6px; }
.modal-rank-row { width:100%; display:flex; background:#0b0b0e; border:1px solid #21212a; border-radius:8px; overflow:hidden; height:44px; }
.modal-rank-left { display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; font-style:italic; color:#fff; padding:0 20px; width:70px; flex-shrink:0; clip-path:polygon(0% 0%,100% 0%,86% 100%,0% 100%); }
.modal-rank-left.p1,.modal-rank-left.p2 { background:#f5c542; }
.modal-rank-left.p3 { background:#b56326; }
.modal-rank-left.other { background:#1e2634; }
.modal-rank-right { display:flex; align-items:center; gap:8px; padding:0 16px; color:#e0e0e8; font-size:15px; font-weight:600; }
.modal-rank-right i { color:#f5c542; }
.modal-tiers-container { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; background:#0b0b0e; border:1px solid #21212a; border-radius:8px; padding:12px 16px; }
.tier-empty-circle { display:flex; flex-direction:column; align-items:center; gap:4px; }
.tier-empty-circle .empty-icon { width:36px; height:36px; border-radius:50%; border:2px dashed #2a2a36; display:flex; align-items:center; justify-content:center; color:#4a4a5a; }

/* 弹窗关闭按钮 */
.modal-close-btn { position:absolute; top:14px; right:14px; width:32px; height:32px; border:none; background:rgba(255,255,255,0.06); color:#9a9aa8; font-size:14px; border-radius:8px; cursor:pointer; transition:background 0.2s, color 0.2s; display:flex; align-items:center; justify-content:center; }
.modal-close-btn:hover { background:rgba(245,197,66,0.15); color:#f5c542; }

/* NameMC 链接按钮 */
.modal-namemc-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:rgba(59,130,246,0.10); border:1px solid rgba(59,130,246,0.25); color:#3b82f6; padding:9px 18px; border-radius:10px; text-decoration:none; font-size:13px; font-weight:600; transition:background 0.2s, transform 0.15s; margin:8px auto 16px; letter-spacing:0.3px; }
.modal-namemc-btn:hover { background:rgba(59,130,246,0.18); color:#60a5fa; transform:translateY(-1px); }
.modal-namemc-btn i { font-size:12px; }

@media (max-width:860px) { .tab-item { flex:0 0 80px; padding:4px 10px 0; } .tab-item img { width:20px;height:20px; } .rank-block { height:60px; min-width:60px; } .rank-num { font-size:22px; } .p-avatar { width:36px;height:36px; } }
@media (max-width:480px) { .tab-item { flex:0 0 70px; } .nav-links { gap:16px; } }

/* ===== 追加：入场动画与底部联合呈现 ===== */

/* 1. 加载动画 */
.loader-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #0b0b0e;
    z-index: 999999;
    display: flex;
    align-items: center; justify-content: center;
    flex-direction: column;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1; visibility: visible;
}
.loader-overlay.fade-out {
    opacity: 0; visibility: hidden;
}
.loader-content {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.loader-spinner {
    width: 60px; height: 60px;
    border: 5px solid #1c1c26;
    border-top: 5px solid #f5c542;
    border-radius: 50%;
    animation: spin 1s cubic-bezier(0.6, 0, 0.4, 1) infinite;
    box-shadow: 0 0 20px rgba(245, 197, 66, 0.1);
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loader-title {
    font-size: 32px; font-weight: 900;
    background: linear-gradient(135deg,#f5c542 0%,#dba32b 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
    margin: 0;
}
.loader-partner {
    margin-top: 4px; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.loader-partner-text {
    color: #6a6a78; font-size: 12px; letter-spacing: 3px;
}
.loader-partner-logos {
    display: flex; gap: 12px; align-items: center;
}
.loader-partner-item {
    font-size: 13px; font-weight: 700; color: #a0a0a8;
    padding: 4px 14px; border: 1px solid #2a2a3a;
    border-radius: 20px; background: rgba(255,255,255,0.03);
}
.loader-partner-item.pvp { color: #f5c542; border-color: #f5c542; }
.loader-partner-item.mct { color: #3b82f6; border-color: #3b82f6; }
.loader-partner-item.cnt { color: #f97316; border-color: #f97316; }

/* 2. 底部联合呈现合作区 */
.partner-section {
    margin-top: 25px;
    padding: 16px 0 10px 0;
    border-top: 1px solid #16161e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.partner-title {
    font-size: 12px;
    color: #4a4a58;
    letter-spacing: 2px;
    margin-bottom: 12px;
}
.partner-logos {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.partner-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #13131b;
    padding: 6px 18px 6px 12px;
    border-radius: 40px;
    border: 1px solid #21212a;
    text-decoration: none;
    color: #b0b0b8;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}
.partner-item:hover {
    border-color: #f5c542;
    color: #f5c542;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 197, 66, 0.1);
}
.partner-item .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.dot.pvp { background: #f5c542; }
.dot.mct { background: #3b82f6; }
.dot.cnt { background: #f97316; }

/* 主体内容的渐入 */
.container { opacity: 0; transition: opacity 0.5s ease-in-out; }
.container.loaded { opacity: 1; }