:root {
    --v2-bg: #071018;
    --v2-bg-soft: #0b1721;
    --v2-panel: rgba(13, 29, 40, .72);
    --v2-line: rgba(173, 224, 239, .14);
    --v2-line-strong: rgba(173, 224, 239, .28);
    --v2-text: #eef8fa;
    --v2-muted: #8fa7b2;
    --v2-cyan: #86e8ff;
    --v2-mint: #c8ff65;
    --v2-blue: #68a9ff;
    --v2-radius: 26px;
    --v2-shadow: 0 30px 80px rgba(0, 0, 0, .34);
}

body.site-v2 {
    min-width: 0;
    color: var(--v2-text);
    background: var(--v2-bg);
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}

body.site-v2.home-page {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.site-v2 .scene-bg {
    background:
        radial-gradient(circle at 78% 14%, rgba(73, 183, 220, .18), transparent 28%),
        radial-gradient(circle at 15% 80%, rgba(78, 117, 218, .12), transparent 30%),
        linear-gradient(145deg, #061018 0%, #08151e 52%, #09131b 100%);
}

.site-v2 .scene-bg::after {
    opacity: .34;
    background-image:
        linear-gradient(rgba(160, 220, 238, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(160, 220, 238, .035) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(circle at center, #000, transparent 78%);
            mask-image: radial-gradient(circle at center, #000, transparent 78%);
}

.site-v2 .scene-aurora-a,
.site-v2 .scene-aurora-b {
    opacity: .52;
    filter: blur(120px);
}

.site-v2 .scene-aurora-a {
    background: rgba(79, 188, 222, .2);
}

.site-v2 .scene-aurora-b {
    background: rgba(73, 110, 217, .16);
}

.site-v2 .site-nav {
    top: 20px;
    left: 50%;
    right: auto;
    width: min(1240px, calc(100% - 40px));
    height: 66px;
    padding: 0 14px 0 22px;
    transform: translateX(-50%);
    grid-template-columns: 180px 1fr 260px;
    border: 1px solid rgba(199, 241, 249, .18);
    border-radius: 18px;
    background: rgba(7, 22, 31, .68);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 18px 55px rgba(0,0,0,.28);
    -webkit-backdrop-filter: blur(26px) saturate(145%);
            backdrop-filter: blur(26px) saturate(145%);
}

.site-v2 .site-nav::before {
    left: 18px;
    right: 18px;
    background: linear-gradient(90deg, transparent, rgba(160, 231, 247, .5), transparent);
}

.site-v2 .site-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    font-size: 20px;
    letter-spacing: .17em;
}

.site-v2 .site-brand::after {
    content: "ONLINE";
    color: var(--v2-cyan);
    font: 600 8px/1 Bahnschrift, sans-serif;
    letter-spacing: .2em;
}

.site-v2 .site-links {
    gap: clamp(18px, 3vw, 40px);
}

.site-v2 .site-links a {
    color: rgba(219, 237, 242, .58);
    letter-spacing: .08em;
    transition: color .2s ease;
}

.site-v2 .site-links a.active,
.site-v2 .site-links a:hover {
    color: #fff;
}

.site-v2 .site-links a.active::after {
    bottom: -11px;
    height: 1px;
    background: var(--v2-cyan);
    box-shadow: 0 0 12px rgba(134,232,255,.72);
}

.site-v2 .site-account > a:first-child {
    color: rgba(226, 242, 246, .82);
    text-decoration: none;
}

.site-v2 .nav-join {
    height: 38px;
    border: 1px solid rgba(200,255,101,.32);
    color: #101810;
    background: var(--v2-mint);
    box-shadow: 0 8px 28px rgba(160, 220, 70, .16);
}

.site-v2 .nav-logout button {
    color: rgba(218, 236, 241, .62);
}

.portal-home {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
    padding: 138px 0 88px;
}

.portal-hero {
    position: relative;
    min-height: 610px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
    align-items: center;
    gap: 42px;
    overflow: hidden;
    border-bottom: 1px solid var(--v2-line);
}

.portal-hero > * {
    min-width: 0;
}

.portal-hero::before {
    content: "";
    position: absolute;
    left: -12%;
    bottom: 14%;
    width: 54%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(134,232,255,.28), transparent);
}

.portal-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--v2-cyan);
    font: 600 10px/1 Bahnschrift, sans-serif;
    letter-spacing: .22em;
}

.portal-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--v2-mint);
    box-shadow: 0 0 14px rgba(200,255,101,.8);
}

.portal-copy h1 {
    margin: 25px 0 24px;
    font: 600 clamp(64px, 8vw, 118px)/.9 Bahnschrift, "Microsoft YaHei UI", sans-serif;
    letter-spacing: -.055em;
}

.portal-copy h1 span,
.portal-copy h1 strong {
    display: block;
}

.portal-copy h1 span {
    color: #f6fbfc;
}

.portal-copy h1 strong {
    color: transparent;
    -webkit-text-stroke: 1px rgba(186, 231, 241, .62);
}

.portal-copy > p {
    max-width: 510px;
    margin: 0;
    color: var(--v2-muted);
    font-size: 15px;
    line-height: 1.9;
}

.portal-actions {
    display: flex;
    gap: 12px;
    margin-top: 34px;
}

.portal-actions .button-primary,
.portal-actions .button-glass {
    min-width: 142px;
    height: 48px;
}

.portal-actions .button-primary {
    color: #071015;
    background: linear-gradient(120deg, var(--v2-mint), #a9ecff);
}

.portal-actions .button-glass {
    border: 1px solid var(--v2-line-strong);
    color: #eaf8fb;
    background: rgba(255,255,255,.035);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
}

.portal-proof {
    display: flex;
    gap: 28px;
    margin-top: 44px;
}

.portal-proof div {
    padding-left: 14px;
    border-left: 1px solid var(--v2-line-strong);
}

.portal-proof b,
.portal-proof span {
    display: block;
}

.portal-proof b {
    font: 500 14px/1.2 Bahnschrift, sans-serif;
    letter-spacing: .08em;
}

.portal-proof span {
    margin-top: 6px;
    color: var(--v2-muted);
    font-size: 10px;
}

.portal-visual {
    position: relative;
    min-height: 520px;
    display: grid;
    place-items: center;
}

.radar {
    position: relative;
    width: min(500px, 42vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(134,232,255,.11) 0 2px, transparent 3px),
        radial-gradient(circle at center, rgba(134,232,255,.08), transparent 58%);
    border: 1px solid rgba(134,232,255,.16);
    box-shadow:
        inset 0 0 80px rgba(94, 201, 231, .08),
        0 0 100px rgba(65, 167, 207, .09);
}

.radar::before,
.radar::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(134,232,255,.12);
    border-radius: 50%;
}

.radar::before { inset: 12%; }
.radar::after { inset: 27%; }

.radar-sweep {
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    background: conic-gradient(from 20deg, transparent 0 73%, rgba(134,232,255,.16) 88%, transparent 100%);
    animation: radar-spin 12s linear infinite;
}

.radar-core {
    position: absolute;
    inset: 35%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(214,255,150,.24);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 28%, rgba(255,255,255,.2), rgba(80,152,177,.16) 40%, rgba(9,25,35,.86) 75%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        0 0 50px rgba(134,232,255,.15);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
}

.radar-core b {
    color: #f0fbff;
    font: 600 clamp(28px, 4vw, 48px)/1 Bahnschrift, sans-serif;
    letter-spacing: .08em;
}

.radar-chip {
    position: absolute;
    padding: 9px 13px;
    border: 1px solid rgba(196, 238, 247, .16);
    border-radius: 999px;
    color: rgba(222,242,247,.78);
    background: rgba(7,21,30,.72);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    font: 500 9px/1 Bahnschrift, sans-serif;
    letter-spacing: .15em;
    animation: float-chip 5s ease-in-out infinite;
}

.radar-chip-a { top: 13%; right: 4%; }
.radar-chip-b { left: 1%; bottom: 17%; animation-delay: -2.2s; }
.radar-chip-c { right: 6%; bottom: 8%; animation-delay: -3.4s; }

.portal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 26px;
}

.portal-card {
    position: relative;
    min-height: 176px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid var(--v2-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(19,42,55,.72), rgba(8,21,30,.62));
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.portal-card::after {
    content: "↗";
    position: absolute;
    top: 22px;
    right: 22px;
    color: var(--v2-cyan);
    font-size: 16px;
}

.portal-card:hover {
    transform: translateY(-4px);
    border-color: rgba(134,232,255,.34);
    background: linear-gradient(145deg, rgba(24,50,65,.82), rgba(9,25,35,.72));
}

.portal-card small {
    color: var(--v2-cyan);
    font: 600 9px/1 Bahnschrift, sans-serif;
    letter-spacing: .18em;
}

.portal-card h2 {
    margin: 38px 0 9px;
    font-size: 22px;
    font-weight: 500;
}

.portal-card p {
    margin: 0;
    color: var(--v2-muted);
    font-size: 12px;
    line-height: 1.7;
}

.portal-bottom {
    display: grid;
    grid-template-columns: 1.45fr .75fr;
    gap: 14px;
    margin-top: 14px;
}

.portal-panel {
    padding: 28px;
    border: 1px solid var(--v2-line);
    border-radius: 20px;
    background: rgba(10, 24, 34, .6);
    -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
}

.portal-panel-label {
    color: var(--v2-cyan);
    font: 600 9px/1 Bahnschrift, sans-serif;
    letter-spacing: .18em;
}

.portal-panel h2 {
    margin: 28px 0 12px;
    font-size: 26px;
    font-weight: 500;
}

.portal-panel p {
    max-width: 660px;
    margin: 0;
    color: var(--v2-muted);
    font-size: 13px;
    line-height: 1.8;
}

.portal-links {
    display: grid;
    align-content: center;
    gap: 8px;
}

.portal-links a {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--v2-line);
    color: #dbeef3;
    text-decoration: none;
    font-size: 13px;
}

.site-v2 .page-shell {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 132px 0 74px;
}

.site-v2 .page-heading h1 {
    font-size: clamp(44px, 7vw, 78px);
    letter-spacing: -.04em;
}

.site-v2 .page-heading p {
    color: var(--v2-muted);
}

.site-v2 .page-eyebrow {
    color: var(--v2-cyan);
    letter-spacing: .2em;
}

.site-v2 .glass-panel {
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: var(--v2-panel);
    box-shadow: var(--v2-shadow);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
            backdrop-filter: blur(24px) saturate(135%);
}

.site-v2 .auth-panel {
    max-width: 520px;
    margin: 0 auto;
}

.site-v2 .account-panel {
    padding: 28px;
}

.site-v2 .account-row {
    border-color: var(--v2-line);
}

.site-v2 .account-row span {
    color: var(--v2-muted);
}

.ranking-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}

.ranking-tabs {
    display: flex;
    gap: 7px;
    padding: 5px;
    border: 1px solid var(--v2-line);
    border-radius: 999px;
    background: rgba(5, 18, 26, .58);
}

.ranking-tab {
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    color: var(--v2-muted);
    background: transparent;
    cursor: pointer;
}

.ranking-tab.active {
    color: #071015;
    background: var(--v2-mint);
}

.ranking-updated {
    color: var(--v2-muted);
    font-size: 11px;
}

.ranking-panel {
    display: none;
    padding: 10px 24px 24px;
}

.ranking-panel.active {
    display: block;
}

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

.ranking-table {
    width: 100%;
    border-collapse: collapse;
}

.ranking-table th,
.ranking-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--v2-line);
    text-align: left;
    font-size: 13px;
}

.ranking-table th {
    color: var(--v2-muted);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
}

.ranking-player {
    color: #eef8fa;
    font-weight: 500;
}

.ranking-player-name {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.level-badge {
    display: inline-block;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .28));
}

.level-badge-large {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
}

.account-level-value {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.ranking-value {
    color: var(--v2-cyan);
    font-family: Bahnschrift, sans-serif;
}

.ranking-value small {
    display: block;
    margin-top: 4px;
    color: var(--v2-muted);
    font: 10px/1.2 "Microsoft YaHei UI", sans-serif;
}

.ranking-rank {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: #c1d0d5;
    background: rgba(255,255,255,.05);
    font-family: Bahnschrift, sans-serif;
}

.ranking-rank.rank-1 {
    color: #191500;
    background: linear-gradient(135deg, #fff49a, #d6a840);
}

.ranking-rank.rank-2 {
    color: #11181c;
    background: linear-gradient(135deg, #eef6f8, #9fb5bc);
}

.ranking-rank.rank-3 {
    color: #1c1007;
    background: linear-gradient(135deg, #efb780, #a96938);
}

.site-v2 .site-footer {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    height: auto;
    min-height: 72px;
    padding: 20px 0;
    width: min(1240px, calc(100% - 48px));
    margin: 72px auto 0;
    border-top: 1px solid var(--v2-line);
    color: var(--v2-muted);
}

.site-v2 .site-footer-links a {
    color: #b8cad1;
}

@keyframes radar-spin {
    to { transform: rotate(360deg); }
}

@keyframes float-chip {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (max-width: 1020px) {
    .site-v2 .site-nav { grid-template-columns: 150px 1fr auto; }
    .site-v2 .site-links { gap: 16px; }
    .portal-hero { grid-template-columns: 1fr; padding: 70px 0 40px; }
    .portal-visual { min-height: 430px; }
    .radar { width: min(450px, 78vw); }
}

@media (max-width: 760px) {
    .site-v2 .site-nav {
        top: 10px;
        width: calc(100% - 20px);
        height: 58px;
        grid-template-columns: 1fr auto;
        padding: 0 12px 0 16px;
    }
    .site-v2 .site-links { display: none; }
    .site-v2 .site-account { gap: 10px; }
    .site-v2 .nav-join { display: none; }
    .portal-home { width: calc(100% - 28px); padding-top: 104px; }
    .portal-copy h1 { font-size: clamp(58px, 17vw, 88px); }
    .portal-actions, .portal-proof { flex-wrap: wrap; }
    .portal-copy > p { max-width: 100%; overflow-wrap: anywhere; }
    .portal-proof {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
    .portal-proof div { min-width: 0; }
    .portal-visual { width: 100%; min-height: 340px; overflow: hidden; }
    .radar { width: min(330px, 88vw); }
    .radar-chip { display: none; }
    .portal-grid, .portal-bottom { grid-template-columns: 1fr; }
    .site-v2 .page-shell { width: calc(100% - 28px); padding-top: 104px; }
    .site-v2 .site-footer {
        width: calc(100% - 28px);
        margin-top: 48px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .site-v2 .site-footer-links a { margin-left: 0; margin-right: 16px; }
    .ranking-toolbar { align-items: flex-start; flex-direction: column; }
    .ranking-tabs { width: 100%; overflow-x: auto; }
    .ranking-tab { flex: 1 0 auto; }
    .ranking-panel { padding: 4px 14px 16px; }
    .ranking-table th,
    .ranking-table td { padding: 12px 8px; }
    .ranking-player-name { gap: 8px; }
    .ranking-player-name .level-badge { flex-basis: 28px; width: 28px; height: 28px; }
}