:root{--top-casual:#68ff78;--top-zombie:#36dcff;--top-panel:rgba(5,17,15,.95)}
.topai-v2-body{background:radial-gradient(circle at 15% 12%,rgba(77,255,107,.1),transparent 26%),radial-gradient(circle at 85% 22%,rgba(54,220,255,.08),transparent 26%),#020908}
.topai-v2-body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:linear-gradient(rgba(104,255,120,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(104,255,120,.12) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(#000,transparent 80%)}
.topai-hero-v2{border-color:rgba(104,255,120,.2)}.topai-live-note{display:flex;align-items:center;gap:9px;margin-top:22px;color:#90a69d;font-size:.78rem;font-weight:700}.topai-live-note i,.server-live i{width:7px;height:7px;border-radius:50%;background:var(--top-casual);box-shadow:0 0 12px var(--top-casual);animation:topPulse 1.8s infinite}@keyframes topPulse{50%{opacity:.35}}
.top-summary-grid-four{grid-template-columns:repeat(2,1fr);gap:12px}.top-summary-grid-four .summary-card{position:relative;min-height:158px;overflow:hidden;padding:18px 20px;border-color:rgba(104,255,120,.19);background:linear-gradient(145deg,rgba(7,24,19,.94),rgba(1,9,8,.98));box-shadow:inset 0 1px rgba(255,255,255,.025),0 16px 38px rgba(0,0,0,.22)}.top-summary-grid-four .summary-card.cyan{border-color:rgba(54,220,255,.2);background:linear-gradient(145deg,rgba(5,24,27,.94),rgba(1,9,10,.98))}.top-summary-grid-four .summary-card:after{content:"";position:absolute;width:100px;height:100px;right:-38px;top:-48px;border-radius:50%;background:var(--top-casual);filter:blur(55px);opacity:.13}.top-summary-grid-four .summary-card.cyan:after{background:var(--top-zombie)}.summary-card-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px}.summary-card-top>span{color:var(--top-casual);font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.summary-card.cyan .summary-card-top>span{color:var(--top-zombie)}.summary-place{display:inline-grid;place-items:center;min-width:30px;height:24px;padding:0 7px;border:1px solid rgba(104,255,120,.25);border-radius:999px;background:rgba(104,255,120,.07);color:var(--top-casual);font:900 .72rem Rajdhani;font-style:normal}.summary-card.cyan .summary-place{border-color:rgba(54,220,255,.25);background:rgba(54,220,255,.07);color:var(--top-zombie)}.summary-player-line{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin:12px 0}.summary-medal{display:grid;place-items:center;width:37px;height:37px;flex:0 0 37px;border:1px solid rgba(255,204,68,.3);border-radius:12px;background:linear-gradient(145deg,rgba(255,204,68,.2),rgba(255,167,30,.07));color:#ffd05c;font:900 .9rem Rajdhani}.summary-player-line strong{overflow:hidden;color:#f4fff6!important;font:800 1.5rem/1 Rajdhani!important;white-space:nowrap;text-overflow:ellipsis}.summary-metric-row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.summary-metric-row>span{min-width:0;padding:8px 9px;border:1px solid rgba(255,255,255,.065);border-radius:10px;background:rgba(0,4,3,.42)}.summary-metric-row small{display:block;overflow:hidden;color:#61766d;font-size:.52rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}.summary-metric-row b{display:block;margin-top:2px;overflow:hidden;color:#dfffe4;font:800 .88rem Rajdhani;white-space:nowrap;text-overflow:ellipsis}.summary-card.cyan .summary-metric-row b{color:#dbfaff}
.topai-server-switch{padding-top:18px}.topai-server-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.topai-server-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:23px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:linear-gradient(135deg,rgba(104,255,120,.06),rgba(1,8,7,.9));color:#eaffed;text-align:left;cursor:pointer;transition:.22s}.topai-server-card:hover{transform:translateY(-2px);border-color:rgba(104,255,120,.28)}.topai-server-card.is-active{border-color:var(--top-casual);box-shadow:0 0 0 1px rgba(104,255,120,.12),0 18px 55px rgba(0,0,0,.3)}.topai-server-card.zombie{background:linear-gradient(135deg,rgba(54,220,255,.07),rgba(1,8,9,.9))}.topai-server-card.zombie:hover,.topai-server-card.zombie.is-active{border-color:var(--top-zombie)}.server-card-symbol{display:grid;place-items:center;width:62px;height:62px;border:1px solid rgba(104,255,120,.28);border-radius:18px;background:rgba(104,255,120,.08);color:var(--top-casual);font:900 1.8rem Rajdhani}.zombie .server-card-symbol{border-color:rgba(54,220,255,.28);background:rgba(54,220,255,.08);color:var(--top-zombie)}.server-card-copy{display:grid}.server-card-copy small{color:#6f867c;font-size:.65rem;font-weight:900;letter-spacing:.14em}.server-card-copy strong{font:800 1.6rem Rajdhani}.server-card-copy em{color:#81968d;font-size:.73rem;font-style:normal}.server-live{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(104,255,120,.18);border-radius:999px;color:var(--top-casual);font-size:.64rem;font-weight:900}.zombie .server-live{border-color:rgba(54,220,255,.18);color:var(--top-zombie)}.zombie .server-live i{background:var(--top-zombie);box-shadow:0 0 12px var(--top-zombie)}
.topai-content-grid{grid-template-columns:minmax(0,1.65fr) minmax(310px,.75fr);align-items:start}.topai-leaderboard,.topai-player-panel,.topai-metrics-panel{border:1px solid rgba(104,255,120,.16);background:linear-gradient(145deg,rgba(7,23,19,.96),rgba(2,9,8,.98));box-shadow:0 25px 70px rgba(0,0,0,.3)}.topai-leaderboard{overflow:hidden}.leaderboard-filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}.leaderboard-filter{white-space:nowrap}.leaderboard-table td:nth-child(n+2){font-family:Rajdhani;font-size:1.05rem;font-weight:800}.leaderboard-table tbody tr:hover{background:rgba(104,255,120,.035)}.topai-player-panel{position:sticky;top:105px}.player-primary{background:linear-gradient(135deg,rgba(104,255,120,.09),rgba(0,5,4,.55))}.player-stats-grid{grid-template-columns:repeat(2,1fr)}
.topai-metrics-panel{margin-top:0;padding:32px;border-radius:24px}.topai-metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.topai-metric-card{padding:20px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(0,6,5,.55)}.topai-metric-card i{display:grid;place-items:center;width:34px;height:34px;margin-bottom:14px;border-radius:10px;background:rgba(104,255,120,.09);color:var(--top-casual);font:900 1rem Rajdhani;font-style:normal}.topai-metric-card strong{display:block;font:800 1.15rem Rajdhani}.topai-metric-card p{margin:6px 0 0;color:#789087;font-size:.72rem;line-height:1.5}.topai-v2-body.is-zombie .topai-leaderboard,.topai-v2-body.is-zombie .topai-player-panel,.topai-v2-body.is-zombie .topai-metrics-panel{border-color:rgba(54,220,255,.17)}.topai-v2-body.is-zombie .topai-metric-card i{background:rgba(54,220,255,.09);color:var(--top-zombie)}
@media(max-width:1000px){.topai-content-grid{grid-template-columns:1fr}.topai-player-panel{position:static}.topai-metric-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.topai-server-grid{grid-template-columns:1fr}.topai-server-card{padding:18px}.top-summary-grid-four{grid-template-columns:1fr 1fr}.server-live{display:none}.topai-metrics-panel{padding:22px}}
@media(max-width:500px){.top-summary-grid-four{grid-template-columns:1fr}.top-summary-grid-four .summary-card{min-height:150px}.topai-server-card{grid-template-columns:auto 1fr;gap:13px}.server-card-symbol{width:48px;height:48px;border-radius:14px}.server-card-copy strong{font-size:1.3rem}.server-card-copy em{font-size:.65rem}.topai-metric-grid{grid-template-columns:1fr}.leaderboard-table{min-width:700px}}


/* 2026-06-27 rankings page background depth */
.topai-v2-body {
  background:
    linear-gradient(180deg, rgba(1, 7, 6, .78), rgba(1, 7, 6, .96)),
    url("../images/backgrounds/fragzone-bg-loop.webp") center top / cover fixed no-repeat,
    #020807;
}

.topai-v2-body:before {
  z-index: -2;
  opacity: .4;
  background:
    linear-gradient(90deg, rgba(2,8,7,.94), rgba(2,8,7,.62) 48%, rgba(2,8,7,.9)),
    radial-gradient(circle at 16% 16%, rgba(104,255,120,.2), transparent 32%),
    radial-gradient(circle at 82% 20%, rgba(54,220,255,.13), transparent 30%),
    url("../images/backgrounds/fragzone-hero.png") center top / cover no-repeat;
  mask-image: none;
}

.topai-hero-v2,
.topai-leaderboard,
.topai-player-panel,
.topai-metrics-panel,
.topai-server-card,
.summary-card {
  backdrop-filter: blur(14px);
}


/* ================= Topai mobile performance 20260629 ================= */
@media (max-width: 760px) {
  .topai-v2-body {
    background:
      linear-gradient(180deg, rgba(1, 7, 6, .84), rgba(1, 7, 6, .96)),
      url("../images/backgrounds/fragzone-bg-loop.webp") center top / cover no-repeat,
      #020807 !important;
  }

  .topai-v2-body:before {
    opacity: .22 !important;
    background:
      linear-gradient(180deg, rgba(2,8,7,.70), rgba(2,8,7,.92)),
      radial-gradient(circle at 20% 16%, rgba(104,255,120,.16), transparent 32%) !important;
  }

  .topai-hero-v2,
  .topai-leaderboard,
  .topai-player-panel,
  .topai-metrics-panel,
  .topai-server-card,
  .summary-card {
    backdrop-filter: none !important;
  }

  .leaderboard-table {
    min-width: 640px !important;
  }
}


/* ================= Topai mobile table scroll fix 20260629 ================= */
@media (max-width: 760px) {
  .leaderboard-table-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .leaderboard-table {
    min-width: 640px !important;
  }

  .topai-leaderboard {
    overflow: hidden !important;
  }
}