:root{
  --bg:#080c18;
  --card:rgba(18,25,53,.72);
  --card2:rgba(15,22,48,.72);
  --glass:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10);

  --accent:#5b8cff;
  --accent2:#9a6bff;

  --text:#e9f0ff;
  --muted:#9fb0d6;

  --radius:18px;
  --shadow:0 24px 80px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  font-size:14px;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(154,107,255,.30), transparent 62%),
    radial-gradient(900px 500px at -10% 10%, rgba(91,140,255,.28), transparent 62%),
    radial-gradient(600px 400px at 50% 120%, rgba(59,214,113,.18), transparent 60%),
    var(--bg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
}

.wrap{max-width:1480px; margin:0 auto; padding:22px;}

.top{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:14px 14px; margin:0 0 18px 0;
  border-radius:22px;
  background:rgba(8,12,24,.55);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* top nav buttons (назад / на сайт) */
.navBtns{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 16px 0;}

/* search suggest dropdown */
.searchForm{position:relative;}
.suggest{
  position:absolute;
  left:0; right:0;
  top:72px;
  background: rgba(14,18,30,.96);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  overflow:hidden;
  z-index: 50;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.suggestItem{
  display:flex;
  gap:10px;
  padding:10px 12px;
  text-decoration:none;
  color: rgba(233,240,255,.92);
  border-bottom:1px solid rgba(255,255,255,.06);
  transform: translateY(-4px);
  opacity: 0;
  animation: suggestIn .18s ease forwards;
}
.suggestItem:last-child{border-bottom:0;}
.suggestItem:hover{background: rgba(255,255,255,.05);}
.suggestName{font-weight:850;}
.suggestShow .suggestItem{animation: suggestIn .18s ease forwards;}
@keyframes suggestIn{to{transform:translateY(0); opacity:1;}}

/* compare inputs */
.compareRow{display:flex; gap:10px; flex-wrap:wrap;}
.cmpInputWrap{position:relative; flex:1; min-width:220px;}
.cmpInput{width:100%;}
.cmpInputWrap .suggest{top:52px;}

/* delta arrows near position */
.posWrap{display:flex; align-items:center; gap:8px;}
.delta{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.delta.up{border-color: rgba(68, 227, 155, .35); background: rgba(68, 227, 155, .10); color: rgba(68, 227, 155, .95);}
.delta.down{border-color: rgba(255, 86, 86, .35); background: rgba(255, 86, 86, .10); color: rgba(255, 86, 86, .95);}
.delta.flat{opacity:.7;}

/* rank cell in tables */
.rankCell{display:flex; align-items:center; gap:10px; justify-content:flex-end;}
.rankIcon{
  width:74px; height:28px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  position:relative;
}
.rankIcon img{max-width:100%; max-height:100%; object-fit:contain; display:block;}
.rankName{font-weight:850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px;}

/* pulsing border by tier */
.tier-silver .rankIcon{box-shadow: 0 0 0 rgba(200,210,255,0);} 
.tier-gold .rankIcon{box-shadow: 0 0 0 rgba(255,208,90,0);} 
.tier-guardian .rankIcon{box-shadow: 0 0 0 rgba(79,163,255,0);} 
.tier-eagle .rankIcon{box-shadow: 0 0 0 rgba(173,110,255,0);} 
.tier-supreme .rankIcon{box-shadow: 0 0 0 rgba(255,110,110,0);} 
.tier-global .rankIcon{box-shadow: 0 0 0 rgba(0,212,255,0);} 

.tier-silver .rankIcon{animation:pulseSilver 2.2s ease-in-out infinite;}
.tier-gold .rankIcon{animation:pulseGold 2.2s ease-in-out infinite;}
.tier-guardian .rankIcon{animation:pulseGuard 2.2s ease-in-out infinite;}
.tier-eagle .rankIcon{animation:pulseEagle 2.2s ease-in-out infinite;}
.tier-supreme .rankIcon{animation:pulseSupreme 2.2s ease-in-out infinite;}
.tier-global .rankIcon{animation:pulseGlobal 1.6s ease-in-out infinite;}

@keyframes pulseSilver{0%,100%{box-shadow:0 0 0 rgba(200,210,255,0);}50%{box-shadow:0 0 18px rgba(200,210,255,.18);}}
@keyframes pulseGold{0%,100%{box-shadow:0 0 0 rgba(255,208,90,0);}50%{box-shadow:0 0 18px rgba(255,208,90,.22);}}
@keyframes pulseGuard{0%,100%{box-shadow:0 0 0 rgba(79,163,255,0);}50%{box-shadow:0 0 18px rgba(79,163,255,.22);}}
@keyframes pulseEagle{0%,100%{box-shadow:0 0 0 rgba(173,110,255,0);}50%{box-shadow:0 0 18px rgba(173,110,255,.22);}}
@keyframes pulseSupreme{0%,100%{box-shadow:0 0 0 rgba(255,110,110,0);}50%{box-shadow:0 0 18px rgba(255,110,110,.22);}}
/* Всемирная элита — уникальное свечение */
@keyframes pulseGlobal{0%,100%{box-shadow:0 0 0 rgba(0,212,255,0);}50%{box-shadow:0 0 28px rgba(0,212,255,.32), 0 0 60px rgba(170,90,255,.18);}}

/* same pulse for rank panel badge */
.rankPanel.tier-silver .rankBadge{animation:pulseSilver 2.2s ease-in-out infinite;}
.rankPanel.tier-gold .rankBadge{animation:pulseGold 2.2s ease-in-out infinite;}
.rankPanel.tier-guardian .rankBadge{animation:pulseGuard 2.2s ease-in-out infinite;}
.rankPanel.tier-eagle .rankBadge{animation:pulseEagle 2.2s ease-in-out infinite;}
.rankPanel.tier-supreme .rankBadge{animation:pulseSupreme 2.2s ease-in-out infinite;}
.rankPanel.tier-global .rankBadge{animation:pulseGlobal 1.6s ease-in-out infinite;}

.brand{display:flex; align-items:center; gap:14px;}
.brandLink{display:inline-flex; align-items:center;}
.brandLink img{
  height:42px; width:auto;
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.brandTitle{
  display:inline-block;
  font-weight:800;
  font-size:18px;
  letter-spacing:.4px;
  color:var(--text);
  text-decoration:none;
}
.brandTitle:hover{color:#ffffff}
.brand span{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.badges{display:flex; gap:10px; flex-wrap:wrap;}
.badge{
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  text-decoration:none;
  font-size:12px;
  transition:.18s ease;
  user-select:none;
}
.badge:hover{
  transform:translateY(-1px);
  border-color:rgba(91,140,255,.45);
  background:rgba(91,140,255,.08);
}
.badge.primary{
  background:linear-gradient(135deg, rgba(91,140,255,.95), rgba(154,107,255,.95));
  border:none;
}
.badge.ghost{
  background:transparent;
  border:1px dashed rgba(255,255,255,.14);
  color:rgba(233,240,255,.90);
}

.grid{display:grid; grid-template-columns: 1fr 340px; gap:18px;}

.card{
  background:linear-gradient(160deg,var(--card),var(--card2));
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.h1{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.h1 h1{margin:0; font-size:22px;}
.h1 p{margin:4px 0 0; color:var(--muted); font-size:13px;}

.pill{
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  background:rgba(91,140,255,.14);
  border:1px solid rgba(91,140,255,.30);
  color:#cfe0ff;
  white-space:nowrap;
}
.pill.ok{background:rgba(59,214,113,.14); border-color:rgba(59,214,113,.28); color:#c9ffe0;}
.pill.warn{background:rgba(255,204,102,.14); border-color:rgba(255,204,102,.26); color:#ffe7b3;}

/* text colors (для табличек/панелей) */
.tGreen{color:rgba(110, 255, 170, .95);}
.tRed{color:rgba(255, 125, 125, .95);}
.tAmber{color:rgba(255, 210, 120, .95);}

.hr{height:1px; background:rgba(255,255,255,.10); margin:16px 0;}

.sectionhead{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.sectionhead b{font-size:15px;}

label{display:block; margin-bottom:6px; font-size:12px; color:var(--muted);}

input{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--text);
  outline:none;
  transition:.18s ease;
}
input:focus{border-color:rgba(91,140,255,.60); background:rgba(91,140,255,.08);}

.btn{
  width:100%;
  padding:11px 14px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  background:linear-gradient(135deg, rgba(91,140,255,.95), rgba(154,107,255,.95));
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  transition:.18s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(91,140,255,.28);}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}
th, td{padding:10px 10px;}
th{
  text-align:left;
  font-weight:700;
  color:#dbe6ff;
  position:sticky;
  top:74px;
  background:rgba(10,14,28,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index:2;
}
tr td{border-top:1px solid rgba(255,255,255,.08);}
tr:hover td{background:rgba(255,255,255,.03);}

.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;}
.rankImg{height:22px; width:auto; border-radius:10px; background:rgba(0,0,0,.2);}

.nameRow{display:flex; gap:10px; align-items:center;}
.avatar{
  width:30px; height:30px;
  border-radius:999px;
  display:inline-flex;
  align-items:center; justify-content:center;
  font-weight:800;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.err{
  padding:12px;
  border-radius:14px;
  background:rgba(255,107,107,.12);
  border:1px solid rgba(255,107,107,.35);
  color:#ffc7c7;
}

/* top-3 */
tr.top1 td{background:linear-gradient(90deg, rgba(255,204,102,.18), rgba(154,107,255,.05));}
tr.top2 td{background:linear-gradient(90deg, rgba(154,107,255,.14), rgba(91,140,255,.04));}
tr.top3 td{background:linear-gradient(90deg, rgba(91,140,255,.14), rgba(59,214,113,.04));}
.trophy{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:10px; margin-right:6px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
}

/* progress */
.progress{
  width:100%;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.progress>div{
  height:100%;
  background:linear-gradient(90deg, rgba(91,140,255,.95), rgba(154,107,255,.95));
  border-radius:999px;
  box-shadow:0 12px 36px rgba(91,140,255,.25);
}
.progressMeta{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:8px; color:var(--muted); font-size:12px;
}

/* weapon cards */
.weaponGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap:12px;
}
.weaponCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.weaponLeft{display:flex; align-items:center; gap:10px;}
.weaponIcon{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-size:18px;
}
.weaponName{font-weight:800; line-height:1.05;}
.weaponKey{color:var(--muted); font-size:11px; margin-top:3px;}
.weaponKills{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(59,214,113,.12);
  border:1px solid rgba(59,214,113,.26);
  color:#c9ffe0;
  font-size:12px;
  white-space:nowrap;
}

@media (max-width:1100px){ .grid{grid-template-columns:1fr;} }
@media (max-width:600px){
  .wrap{padding:14px;}
  .top{flex-direction:column; align-items:flex-start;}
  th{top:118px;}
}

/* ← Назад на сайт (справа сверху) */
.back-btn{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10000;

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

  padding: 10px 14px;
  border-radius: 999px;

  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;

  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(91,140,255,.95), rgba(154,107,255,.95));
  box-shadow: 0 18px 55px rgba(0,0,0,.35);

  transition: transform .15s ease, filter .15s ease;
}
.back-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.back-btn:active{
  transform: translateY(0);
}

@media (max-width: 600px){
  .back-btn{
    top: 12px;
    right: 12px;
    padding: 9px 12px;
    font-size: 12.5px;
  }
}


/* stats panels */
.statGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}
.statCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.statLeft{display:flex; align-items:center; gap:12px; min-width:0;}
.statIcon{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  flex:0 0 auto;
}
.statIcon svg{width:22px; height:22px; opacity:.95}
.statLabel{color:var(--muted); font-size:11.5px; margin-bottom:3px;}
.statValue{font-weight:900; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.statSub{color:rgba(233,240,255,.78); font-size:11.5px; margin-top:3px;}

/* svg in weapon icons */
.weaponIcon svg{width:22px; height:22px; opacity:.95}


/* rank panel (CS2-like) */
.rankPanel{
  margin:12px 0 18px;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.rankLeft{display:flex; align-items:center; gap:12px; min-width:0;}
.rankBadge{
  width:92px; height:54px;
  display:flex; align-items:center; justify-content:center;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  flex:0 0 auto;
  overflow:hidden;
}
.rankBadge img{max-width:100%; max-height:100%; object-fit:contain; display:block;}
.rankText{min-width:0}
.rankTitle{font-weight:950; font-size:16px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rankSub{margin-top:6px; font-size:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.rankBar{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}
.rankFill{
  height:100%;
  background:rgba(255,255,255,.32);
  border-right:1px solid rgba(255,255,255,.18);
}
.muted{color:var(--muted);}

.rankNext{font-weight:800; opacity:.95;}
/* Mobile optimization */
@media (max-width: 900px){
  .container{padding:14px;}
  .hero{padding:16px;}
  .statGrid{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .weaponGrid{grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));}
}

@media (max-width: 560px){
  .topbar{gap:10px;}
  .heroHead{flex-direction:column; align-items:flex-start; gap:10px;}
  .heroTitle{font-size:22px;}
  .pill{font-size:12px; padding:6px 10px;}
  .statGrid{grid-template-columns: 1fr;}
  .weaponGrid{grid-template-columns: 1fr;}
  .weaponCard{padding:12px;}
  .weaponIcon{width:42px; height:42px;}
  .weaponKills{font-size:12px; padding:6px 10px;}
  .rankWrap{flex-direction:column; gap:12px;}
  .rankBadge{width:140px; height:80px;}
  .progressMeta{flex-direction:column; gap:8px; align-items:flex-start;}
}

/* =========================
   MOBILE OPTIMIZATION ONLY
   (append-only)
   ========================= */

:root{
  --mobile-pad: 12px;
}

/* не ломаем ширину из-за паддингов */
*, *:before, *:after { box-sizing: border-box; }

img { max-width: 100%; height: auto; }

/* ---------- tablets & down ---------- */
@media (max-width: 1024px) {
  .container, .wrap, .page, .main {
    width: 100%;
    padding-left: var(--mobile-pad);
    padding-right: var(--mobile-pad);
  }
}

/* ---------- phones ---------- */
@media (max-width: 768px) {
  /* общий ритм */
  body { font-size: 14px; }
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }

  /* верхние кнопки */
  .top-actions, .header-actions, .nav-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .top-actions a, .header-actions a, .nav-actions a,
  .top-actions button, .header-actions button, .nav-actions button {
    flex: 1 1 auto;
    min-width: 140px;
  }

  /* двухколоночная раскладка (лево/право) -> колонкой */
  .layout, .grid, .content-grid, .page-grid, .two-col,
  .main-grid {
    display: block !important;
  }

  /* если у тебя есть конкретные классы для левого/правого блока */
  .left, .right, .sidebar, .right-panel, .search-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 14px;
  }

  /* карточки статистики -> 1 колонка */
  .stats-grid, .cards, .cards-grid, .stat-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* оружие -> 2 колонки */
  .weapons-grid, .weapon-grid, .weapons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* прогресс / ранги */
  .rank-card { max-width: 100% !important; }
  .rank-image { width: 88px !important; height: 88px !important; }
  .rank-title { font-size: 16px !important; }

  /* таблицы (Все игроки/Топ) — делаем горизонтальный скролл */
  .table-wrap, .table-container, .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }
  table { min-width: 900px; } /* чтобы колонки не схлопывались */
}

/* ---------- small phones ---------- */
@media (max-width: 480px) {
  body { font-size: 13px; }

  /* оружие -> 1 колонка на очень маленьких */
  .weapons-grid, .weapon-grid, .weapons {
    grid-template-columns: 1fr !important;
  }

  /* кнопки */
  button, .btn, a.btn {
    width: 100% !important;
  }

  /* подсказки поиска — чтобы не вылезали */
  .suggest, .suggest-list, .autocomplete, .nick-suggest {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 40vh !important;
    overflow: auto !important;
  }

  /* места/стрелки компактнее */
  .pos, .place, .rank-pos {
    white-space: nowrap;
  }
}

/* iOS safe-area (если есть вырез) */
@supports (padding: env(safe-area-inset-top)) {
  .container, .wrap, .page, .main {
    padding-left: calc(var(--mobile-pad) + env(safe-area-inset-left));
    padding-right: calc(var(--mobile-pad) + env(safe-area-inset-right));
  }
}

.mv{ margin-left:6px; font-weight:900; font-size:12px; opacity:.95; }
.mv.up{ color:#2ecc71; }
.mv.down{ color:#e74c3c; }
.mv.same{ color:rgba(255,255,255,.35); }
  }
}