/* ==========================================================
   BATTLE MVP — RANKINGS
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --acc:      #00ffa6;
  --hot:      #ff6b2b;
  --cold:     #5b7fff;
  --bg:       #060b0d;
  --bg2:      #0a1215;
  --bg3:      #0e171b;
  --line:     rgba(255,255,255,.055);
  --line2:    rgba(255,255,255,.09);
  --txt:      #c8dde9;
  --txt-m:    #435a6a;
  --txt-s:    #253545;
  --gold:     #e8b84b;
  --silver:   #7a9ab0;
  --bronze:   #b06a2e;
  --r:        6px;
  --r-lg:     10px;
  --fn:       'Inter', system-ui, sans-serif;
  --fnum:     'Rajdhani', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

.rk-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--fn);
  font-size: 13px;
  color: var(--txt);
  min-width:1280px;
}

/* ── HEADER ─────────────────────────── */
.rk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.rk-title {
  font-family: var(--fnum);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}

.rk-title-accent { color: var(--acc); }

.rk-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: var(--txt-m);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-top: 5px;
}

.rk-live-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 5px var(--acc);
  animation: rk-blink 2s ease infinite;
}

@keyframes rk-blink { 0%,100%{opacity:1} 50%{opacity:.2} }

.rk-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 4px;
}

.rk-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--txt-m);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: all .18s;
  white-space: nowrap;
}

.rk-tab:hover { color: var(--txt); }
.rk-tab.active {
  background: rgba(0,255,166,.12);
  color: #fff;
  border: 1px solid rgba(0,255,166,.25);
}

/* ── STATS BAR ──────────────────────── */
.rk-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--line2);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--line);
}

.rk-stat-cell {
  background: var(--bg2);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .15s;
}

.rk-stat-cell:hover { background: var(--bg3); }
.rk-stat-icon { font-size: 14px; opacity: .45; flex-shrink: 0; }

.rk-stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-m);
  margin-bottom: 3px;
}

.rk-stat-value {
  font-family: var(--fnum);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

/* ==========================================================
   COMPACT PREMIUM TOP PLAYERS
   ========================================================== */

.rk-top3{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-bottom:14px;
}

.rk-top-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;

    min-height:92px;

    padding:14px 18px;

    border-radius:16px;

    background:
        linear-gradient(
            180deg,
            rgba(8,14,22,.96),
            rgba(4,8,14,.98)
        );

    border:1px solid rgba(0,255,170,.12);

    overflow:hidden;

    transition:.18s ease;
}

.rk-top-card:hover{

    transform:translateY(-2px);

    border-color:rgba(0,255,166,.22);

    box-shadow:
        0 0 22px rgba(0,255,166,.08);
}

/* TOP 1 */

.rk-top-place-1{

    border-color:rgba(0,255,166,.20);

    box-shadow:
        0 0 26px rgba(0,255,166,.10);
}

/* SIDE GLOW */

.rk-top-card::before{

    content:'';

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:2px;

    background:#00ffa6;

    opacity:.7;
}

/* PLACE */

.rk-top-hex{
    width:34px;
    height:34px;

    border-radius:10px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:15px;
    font-weight:900;

    flex-shrink:0;
}

.rk-top-place-1 .rk-top-hex{
    color:#ffcc45;
    border-color:rgba(255,204,69,.35);
}

.rk-top-place-2 .rk-top-hex{
    color:#8fd3ff;
    border-color:rgba(120,190,255,.25);
}

.rk-top-place-3 .rk-top-hex{
    color:#ff9955;
    border-color:rgba(255,150,80,.25);
}

/* AVATAR */

.rk-top-avatar{
    width:58px;
    height:58px;

    border-radius:14px;

    object-fit:cover;

    border:1px solid rgba(255,255,255,.08);

    flex-shrink:0;
}

/* INFO */

.rk-top-info{

    flex:1;

    min-width:0;
}

.rk-top-name{
    font-size:16px;
    font-weight:800;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    max-width:180px;
}

.rk-top-sub{

    display:flex;
    align-items:center;
    gap:6px;

    margin-top:4px;

    color:#71899a;

    font-size:10px;

    letter-spacing:.08em;
    text-transform:uppercase;
}

/* CAL / RANK */

.rk-top-rank{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:22px;

    padding:0 8px;

    border-radius:999px;

    font-size:11px;
    font-weight:800;
}

/* RP */

.rk-top-rp-wrap{
    margin-left:auto;

    text-align:right;

    flex-shrink:0;
}

.rk-top-rp{
    font-size:18px;
    font-weight:900;

    color:var(--acc);
}

.rk-top-rp-label{

    margin-top:2px;

    font-size:9px;

    letter-spacing:.14em;

    color:#617888;

    text-transform:uppercase;
}

/* MOBILE */

@media(max-width:1200px){

    .rk-top3{
        grid-template-columns:1fr;
    }
}

/* ── FILTERS ────────────────────────── */
.rk-filters {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--r-lg);
  background: var(--bg2); border: 1px solid var(--line2);
  position: relative;
}

.rk-filters::before {
  content: '⚙ Filter';
  position: absolute; top: -9px; left: 14px;
  font-size: 9px; font-weight: 700; letter-spacing: .1em;
  color: var(--acc); background: var(--bg2); padding: 0 6px;
  text-transform: uppercase;
}

.rk-search-wrap {
  display: flex; align-items: center; gap: 7px;
  background: rgba(0,0,0,.3); border: 1px solid var(--line);
  border-radius: var(--r); padding: 0 10px;
  flex: 1; min-width: 160px; transition: border-color .18s;
}
.rk-search-wrap:focus-within { border-color: rgba(0,255,166,.3); }

.rk-search {
  background: none; border: none; outline: none;
  color: var(--txt); font-size: 12px; font-family: var(--fn);
  padding: 7px 0; width: 100%;
}
.rk-search::placeholder { color: var(--txt-s); }
.rk-search-icon { color: var(--txt-m); font-size: 13px; }

.rk-filter-grp { display: flex; align-items: center; gap: 6px; }

.rk-filter-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--txt-s); white-space: nowrap;
}

.rk-pills { display: flex; gap: 2px; }

.rk-pill {
  padding: 5px 11px; border-radius: 5px; background: transparent;
  border: 1px solid var(--line); font-size: 11px;
  font-family: var(--fnum); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--txt-m);
  cursor: pointer; transition: all .14s; user-select: none;
}
.rk-pill input { display: none; }
.rk-pill:hover { color: var(--txt); border-color: var(--line2); }
.rk-pill.active { background: var(--acc); border-color: var(--acc); color: #001a0f; }

.rk-select{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    height:38px;

    padding:0 38px 0 14px;

    border-radius:10px;

    border:1px solid rgba(255,255,255,.08);

    background:
        linear-gradient(
            180deg,
            rgba(14,22,30,.98),
            rgba(8,14,20,.98)
        );

    color:#ffffff;

    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;

    outline:none;

    cursor:pointer;

    transition:.18s ease;

    min-width:120px;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.02);

    background-image:
        linear-gradient(45deg, transparent 50%, #00ffa6 50%),
        linear-gradient(135deg, #00ffa6 50%, transparent 50%);

    background-position:
        calc(100% - 16px) 15px,
        calc(100% - 11px) 15px;

    background-size:5px 5px, 5px 5px;

    background-repeat:no-repeat;
}

.rk-select:hover{

    border-color:rgba(0,255,166,.25);
}

.rk-select:focus{

    border-color:#00ffa6;

    box-shadow:
        0 0 0 3px rgba(0,255,166,.08);
}

.rk-select option{

    background:#0b1218;

    color:#dffef5;

    font-weight:600;
}


.rk-apply-btn {
  padding: 6px 16px; border-radius: var(--r); background: var(--acc);
  color: #001a0f; font-family: var(--fnum); font-weight: 700;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  border: none; cursor: pointer; transition: box-shadow .2s, transform .15s;
  white-space: nowrap;
}
.rk-apply-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,255,166,.25); }

/* ── TABLE ──────────────────────────── */
.rk-table-wrap {
  border-radius: var(--r-lg);
  border: 1px solid var(--line2);
  overflow: hidden;
  background: var(--bg2);
}

/*
  9 columns (убрали Form из отдельной колонки — она теперь внутри W-L ячейки или скрыта):
  # | Player | Rank | RP | W-L | Win Rate | K/D | ADR | HS%
*/
.rk-table-head,
.rk-row {
  display: grid;
  grid-template-columns: 44px 1fr 56px 88px 76px 90px 58px 58px 52px;
  align-items: center;
}

.rk-table-head {
  background: rgba(255,255,255,.018);
  border-bottom: 1px solid var(--line2);
  padding: 0 8px;
}

.rk-th {
  padding: 8px 8px;
  font-size: 9px; font-weight: 700;
  letter-spacing: .12em; color: var(--txt-s);
  text-transform: uppercase; white-space: nowrap;
}

.rk-row {
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--txt);
  transition: background .12s;
  position: relative;
  animation: rk-in .35s ease both;
}

@keyframes rk-in {
  from { opacity:0; transform:translateY(3px); }
  to   { opacity:1; transform:translateY(0); }
}

.rk-row::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--acc); opacity: 0;
  transition: opacity .15s;
}

.rk-row:hover { background: rgba(0,255,166,.028); }
.rk-row:hover::after { opacity: 1; }
.rk-row:last-child { border-bottom: none; }
.rk-row.is-me { background: rgba(0,255,166,.04); }
.rk-row.is-me::after { opacity: 1; }

.rk-td { padding: 9px 8px; font-size: 12px; }

/* RANK # box */
.rk-rank-box {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fnum); font-size: 13px; font-weight: 700;
  margin: 0 auto;
}

.rk-r1 { background: rgba(232,184,75,.12);  color: var(--gold);   border: 1px solid rgba(232,184,75,.25); }
.rk-r2 { background: rgba(122,154,176,.1);   color: var(--silver); border: 1px solid rgba(122,154,176,.22); }
.rk-r3 { background: rgba(176,106,46,.1);    color: var(--bronze); border: 1px solid rgba(176,106,46,.22); }
.rk-rn { background: rgba(255,255,255,.03);  color: var(--txt-m);  border: 1px solid var(--line); }

/* PLAYER cell */
.rk-player { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rk-av-wrap { position: relative; flex-shrink: 0; }

.rk-av {
  width: 32px; height: 32px; border-radius: 7px;
  object-fit: cover; background: var(--bg3); display: block;
}

.rk-pip {
  position: absolute; bottom: -2px; right: -2px;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--bg2);
}

.rk-player-info { min-width: 0; }

.rk-pname {
  font-size: 13px; font-weight: 600; color: #fff;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rk-you {
  font-size: 8px; font-weight: 700; letter-spacing: .1em;
  color: var(--acc); background: rgba(0,255,166,.1);
  border: 1px solid rgba(0,255,166,.22);
  padding: 1px 4px; border-radius: 3px; flex-shrink: 0;
}

.rk-psub {
  display: flex; align-items: center; gap: 4px;
  margin-top: 2px; font-size: 10px; color: var(--txt-m);
}

.rk-flag { width: 13px; height: 9px; border-radius: 2px; object-fit: cover; }

/* RANK circle */
.rk-rank-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-family: var(--fnum); font-size: 12px; font-weight: 700;
  border: 1px solid; flex-shrink: 0;
}

/* RP */
.rk-rp-val { font-family: var(--fnum); font-size: 14px; font-weight: 700; color: #fff; line-height: 1; }
.rk-rd { font-size: 10px; font-weight: 600; font-family: var(--fnum); margin-top: 1px; }
.rk-rd.p { color: var(--acc); }
.rk-rd.n { color: #e05555; }
.rk-rd.z { color: var(--txt-m); }

/* W-L */
.rk-wl { font-family: var(--fnum); font-size: 13px; font-weight: 600; white-space: nowrap; }
.rk-wl .w { color: #00ffa6; }
.rk-wl .s { color: var(--txt-s); margin: 0 2px; }
.rk-wl .l { color: #e05555; }

/* WR */
.rk-wr-num { font-family: var(--fnum); font-size: 12px; font-weight: 600; }
.rk-bar { height: 2px; background: rgba(255,255,255,.05); border-radius: 1px; overflow: hidden; width: 46px; margin-top: 3px; }
.rk-bar-f { height: 100%; border-radius: 1px; }
.rk-wh .rk-wr-num { color: var(--acc); }
.rk-wh .rk-bar-f  { background: var(--acc); }
.rk-wm .rk-wr-num { color: #e8a020; }
.rk-wm .rk-bar-f  { background: #e8a020; }
.rk-wl_ .rk-wr-num { color: #e05555; }
.rk-wl_ .rk-bar-f  { background: #e05555; }

/* KD */
.rk-kd { font-family: var(--fnum); font-size: 13px; font-weight: 600; }
.rk-kh { color: var(--acc); }
.rk-km { color: var(--txt); }
.rk-kl { color: var(--txt-m); }

/* ADR */
.rk-adr-val { font-family: var(--fnum); font-size: 13px; font-weight: 600; }
.rk-heat { height: 2px; background: rgba(255,255,255,.05); border-radius: 1px; overflow: hidden; width: 32px; margin-top: 3px; }
.rk-heat-f { height: 100%; border-radius: 1px; }

/* HS */
.rk-hs { font-family: var(--fnum); font-size: 12px; color: var(--txt-m); }

/* EMPTY */
.rk-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;gap:8px;text-align:center; }
.rk-empty-icon  { font-size: 28px; opacity: .2; }
.rk-empty-title { font-family: var(--fnum); font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.rk-empty-sub   { font-size: 11px; color: var(--txt-m); }

/* PAGINATION */
.rk-pagination { display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap; }

.rk-pg-btn {
  padding: 6px 14px; border-radius: 5px;
  background: var(--bg2); border: 1px solid var(--line2);
  color: var(--txt-m); text-decoration: none;
  font-size: 11px; font-family: var(--fnum); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; transition: all .16s;
}
.rk-pg-btn:hover { color: var(--acc); border-color: rgba(0,255,166,.25); }

.rk-pg-num {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px; background: var(--bg2); border: 1px solid var(--line);
  color: var(--txt-m); text-decoration: none;
  font-size: 12px; font-family: var(--fnum); font-weight: 600; transition: all .14s;
}
.rk-pg-num:hover { color: var(--txt); }
.rk-pg-num.active { background: rgba(0,255,166,.1); border-color: rgba(0,255,166,.28); color: var(--acc); }
.rk-pg-dots { color: var(--txt-s); font-size: 12px; padding: 0 2px; }

/* CHALLENGE */
.rk-challenge-banner {
  display: grid; grid-template-columns: 1fr auto;
  gap: 24px; align-items: center;
  padding: 18px 22px; border-radius: var(--r-lg);
  background: var(--bg2); border: 1px solid rgba(232,184,75,.18);
  position: relative; overflow: hidden;
}
.rk-challenge-banner::before {
  content: '🏆'; position: absolute;
  right: 90px; top: 50%; transform: translateY(-50%);
  font-size: 80px; opacity: .04; pointer-events: none;
}
.rk-cb-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.rk-cb-title   { font-family: var(--fnum); font-size: 20px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.rk-cb-sub     { font-size: 12px; color: var(--txt-m); line-height: 1.55; max-width: 400px; }
.rk-cb-prize   { text-align: right; }
.rk-cb-prize-lbl { font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-m); margin-bottom: 3px; }
.rk-cb-prize-val { font-family: var(--fnum); font-size: 36px; font-weight: 700; color: var(--gold); line-height: 1; }

.rk-matches-wrap { display: flex; flex-direction: column; gap: 3px; }

.rk-match-card {
  display: grid;
  grid-template-columns: 42px 1fr 100px 100px 80px 56px;
  align-items: center; padding: 10px 14px; border-radius: var(--r);
  background: var(--bg2); border: 1px solid var(--line);
  text-decoration: none; color: var(--txt); transition: all .16s;
  animation: rk-in .3s ease both;
}
.rk-match-card:hover { background: rgba(0,255,166,.025); border-color: rgba(0,255,166,.16); transform: translateX(3px); }
.rk-mc-idx    { font-family: var(--fnum); font-size: 11px; color: var(--txt-m); font-weight: 600; }
.rk-mc-map    { font-size: 13px; font-weight: 600; color: #fff; }
.rk-mc-mode   { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-m); margin-top: 1px; }
.rk-mc-score  { font-family: var(--fnum); font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.rk-mc-score .win { color: var(--acc); }
.rk-mc-score .sep { color: var(--txt-m); }
.rk-mc-date   { font-size: 11px; color: var(--txt-m); }
.rk-mc-server { font-size: 10px; color: var(--txt-m); }
.rk-mc-cta    { font-size: 11px; font-weight: 700; color: var(--acc); text-align: right; opacity: 0; transition: opacity .16s; }
.rk-match-card:hover .rk-mc-cta { opacity: 1; }

/* RESPONSIVE */
@media (max-width: 960px) {
  .rk-table-head,
  .rk-row {
    grid-template-columns: 40px 1fr 52px 80px 68px 82px 52px 52px;
  }
  /* hide HS% */
  .rk-th:last-child, .rk-td:last-child { display: none; }
}

@media (max-width: 760px) {
  .rk-top3 { grid-template-columns: 1fr; }
  .rk-table-head, .rk-row {
    grid-template-columns: 36px 1fr 52px 74px 62px 76px;
  }
  .rk-th:nth-child(n+7), .rk-td:nth-child(n+7) { display: none; }
  .rk-stats-bar { grid-template-columns: 1fr 1fr; }
  .rk-header { flex-direction: column; align-items: flex-start; }
  .rk-challenge-banner { grid-template-columns: 1fr; }
}

.rk-placement-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:4px;
    padding:4px 10px;

    border-radius:999px;

    background:rgba(255,170,0,.12);
    border:1px solid rgba(255,170,0,.35);

    color:#ffb347;

    font-size:10px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.rk-placement-wrap{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:4px;
    flex-wrap:wrap;
}

.rk-placement-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:3px 8px;

    border-radius:999px;

    background:rgba(255,170,0,.12);
    border:1px solid rgba(255,170,0,.35);

    color:#ffb547;

    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
}

.rk-placement-progress{
    font-size:10px;
    color:#7c93a5;
    font-weight:700;
}

.rk-rank-pill{
    width:34px;
    height:34px;

    font-size:13px;
    font-weight:800;
}

.rk-placement-rank{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:46px;
    height:46px;

    border-radius:50%;

    background:rgba(255,184,0,.08);

    border:1px solid rgba(255,184,0,.35);

    color:#ffb800;

    font-size:14px;
    font-weight:900;

    letter-spacing:.12em;
}
.rk-filter-grp{

    display:flex;
    align-items:center;
    gap:8px;
}