/* ============================================================
   ТОП ТАНКОВ (/top) — рейтинг всей техники по одной характеристике.
   Визуальный язык — экран сравнения (tank-hud.css): тёмные стеклянные
   панели, тонкие полоски, мелкие капслок-подписи, золото/серебро/бронза
   для призовых мест. Сверху вниз: заголовок с переключателем снаряда,
   лента характеристик, строка отбора, подиум топ-3 и список — вся ширина
   страницы уходит под сам рейтинг.
   Токены (--panel, --line, --green, --cyan, --amber…) заданы в style.css.
   ============================================================ */
.top-page{
  --top-gold:#ffd54a;
  --top-silver:#d7e2ea;
  --top-bronze:#e0a066;
  --top-accent:var(--cyan);
  position:relative;
  display:flex; flex-direction:column; gap:0.9rem;
  min-height:calc(100vh - 215px);
  padding:1rem 1.15rem 1.2rem;
  border:1px solid var(--line-soft);
  border-radius:14px;
  color:var(--text);
  line-height:1.45;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(73,243,214,0.08), transparent 55%),
    radial-gradient(90% 60% at 100% 0%, rgba(255,201,77,0.07), transparent 55%),
    rgba(7,10,9,0.74);
}

/* ---- лента характеристик ----
   Шесть ходовых характеристик — чипами на виду, остальные — в панели за
   кнопкой «Ещё N характеристик». Колонки слева больше нет: рейтингу отдана
   вся ширина страницы. */
.top-metric-bar{
  display:flex; align-items:center; gap:0.4rem 0.5rem; flex-wrap:wrap;
  padding:0 0.35rem;
}
.top-bar-label{
  flex:none; min-width:7.4rem;
  font-size:0.62rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-faint);
}
.top-ribbon{display:flex; align-items:center; gap:0.35rem; flex-wrap:wrap;}
.top-chip-metric{
  display:inline-flex; align-items:center;
  height:2.1rem; padding:0 0.9rem;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line-soft);
  border-radius:0.3rem;
  color:var(--text-dim);
  font-family:inherit; font-size:0.8rem; font-weight:700;
  cursor:pointer; white-space:nowrap;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.top-chip-metric:hover{border-color:var(--top-accent); color:var(--text);}
.top-chip-metric.active{
  background:rgba(73,243,214,0.12);
  border-color:rgba(73,243,214,0.4);
  color:#fff; font-weight:800;
  box-shadow:inset 0 0 1.1rem rgba(73,243,214,0.08);
}

/* Кнопка «Ещё N характеристик» и выпадающая панель под ней */
.top-metric-more{position:relative;}
.top-metric-pick{
  display:inline-flex; align-items:center; gap:0.4rem;
  height:2.1rem; padding:0 0.9rem;
  background:transparent;
  border:1px dashed var(--line);
  border-radius:0.3rem;
  color:var(--text-faint);
  font-family:inherit; font-size:0.8rem; font-weight:700;
  cursor:pointer; white-space:nowrap;
  transition:border-color .15s ease, color .15s ease;
}
.top-metric-pick:hover{border-color:var(--top-accent); color:var(--text-dim);}
/* На широком экране на кнопке только «Ещё N…»; подпись «Характеристика: …»
   нужна узкому экрану, где ленты чипов нет (см. адаптив внизу файла). */
.top-metric-pick-label, .top-metric-pick-value{display:none;}
.top-metric-pick .top-dir-arrow{flex:none;}

.top-side{
  position:absolute; z-index:40; right:0; top:calc(100% + 0.45rem);
  width:min(34rem, 82vw);
  display:none; flex-direction:column; gap:0.9rem;
  padding:0.9rem 0.85rem 1rem;
  background:#0d1211;
  border:1px solid var(--line);
  border-radius:0.6rem;
  box-shadow:0 1.4rem 3rem rgba(0,0,0,0.6);
  max-height:min(30rem, 70vh);
  overflow-y:auto;
  scrollbar-width:thin;
}
.top-side.open{display:flex;}
.top-side::-webkit-scrollbar{width:0.35rem;}
.top-side::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.14); border-radius:1rem;}
.top-side-head{
  position:relative;
  display:flex; align-items:baseline; gap:0.5rem;
  padding:0 1.6rem 0 0.25rem;
}
.top-side-title{font-size:0.7rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-dim);}
.top-side-hint{font-size:0.66rem; color:var(--text-faint);}
.top-side-close{position:absolute; right:-0.2rem; top:-0.3rem;}
.top-side-backdrop{display:none;}
/* Панель — в две колонки: обе группы характеристик видны разом */
.top-groups{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.9rem; align-items:start;}
.top-group-title{
  margin:0 0 0.4rem; padding:0 0.25rem;
  font-size:0.62rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--text-faint);
}
.top-metrics{display:flex; flex-direction:column; gap:0.2rem;}
.top-metric{
  position:relative;
  display:flex; align-items:center; gap:0.5rem;
  width:100%; padding:0.5rem 0.65rem 0.5rem 0.8rem;
  background:rgba(255,255,255,0.03);
  border:1px solid transparent;
  border-radius:0.35rem;
  color:var(--text-dim);
  font-family:inherit; font-size:0.8rem; font-weight:700; text-align:left; line-height:1.2;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.top-metric::before{
  content:''; position:absolute; left:0; top:22%; bottom:22%; width:2px;
  border-radius:1px; background:var(--top-accent); opacity:0;
  transition:opacity .15s ease;
}
.top-metric:hover{background:rgba(255,255,255,0.07); border-color:var(--line-soft); color:var(--text);}
.top-metric.active{
  color:#fff; background:rgba(73,243,214,0.10);
  border-color:rgba(73,243,214,0.35);
  box-shadow:inset 0 0 1.4rem rgba(73,243,214,0.06);
}
.top-metric.active::before{opacity:1; box-shadow:0 0 0.5rem var(--top-accent);}
.top-metric-label{flex:1 1 auto; min-width:0;}
.top-metric-tag{
  flex:none;
  font-size:0.52rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-faint);
  border:1px solid var(--line-soft); border-radius:0.2rem;
  padding:0.1rem 0.3rem;
}
.top-metric.active .top-metric-tag{color:var(--top-accent); border-color:rgba(73,243,214,0.4);}

/* ---- рейтинг ---- */
.top-main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:0.9rem;}

.top-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap;
  padding:0.4rem 0.35rem 0.9rem;
  border-bottom:1px solid var(--line-soft);
}
.top-head-text{min-width:0; flex:1 1 20rem;}
.top-eyebrow{font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--top-accent); margin-bottom:0.35rem;}
.top-eyebrow span{color:var(--text-dim);}
.top-title{
  margin:0; font-size:clamp(1.5rem, 2.4vw, 2.1rem); font-weight:800; line-height:1.05; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,0.8);
}
.top-desc{margin:0.4rem 0 0; font-size:0.78rem; color:var(--text-dim); line-height:1.5; max-width:44rem;}
.top-head-tools{display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap;}
.top-shells{display:flex; align-items:center; gap:0.3rem;}
.top-shells[hidden]{display:none;}
.top-shells-label{font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint); margin-right:0.25rem;}
.top-page .cmp-shell-btn{--cmp-side:var(--top-accent); font-size:0.72rem; padding:0.35rem 0.75rem;}
.top-page .cmp-shell-btn.active{color:#0a0f0d;}
.top-dir-btn{
  display:inline-flex; align-items:center; gap:0.45rem;
  padding:0.4rem 0.8rem;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line-soft);
  border-radius:0.3rem;
  color:var(--text-dim);
  font-family:inherit; font-size:0.72rem; font-weight:800; letter-spacing:0.05em; text-transform:uppercase;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.top-dir-btn:hover{border-color:var(--top-accent); color:var(--top-accent);}
.top-dir-btn.flipped{border-color:rgba(255,181,69,0.5); color:var(--amber);}
.top-dir-arrow{width:0.7em; height:0.55em; background:currentColor; clip-path:polygon(0 0, 100% 0, 50% 100%);}
.top-dir-arrow-up{clip-path:polygon(50% 0, 100% 100%, 0 100%);}

/* ---- фильтры ---- */
.top-filters{display:flex; flex-direction:column; gap:0.45rem; padding:0 0.35rem;}
.top-filter-row{display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap;}
.top-filter-label{flex:none; min-width:7.4rem; font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint);}
.top-chips{display:flex; flex-wrap:wrap; gap:0.25rem;}
.top-filter-sep{flex:none; width:1px; height:1.4rem; background:var(--line-soft);}
/* Чипы — как в окне выбора танка на экране сравнения */
.top-page .filter-chip{
  min-width:2.2rem; height:1.9rem; padding:0 0.55rem; margin:0;
  display:flex; align-items:center; justify-content:center; gap:0.35rem;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line-soft);
  border-radius:0.25rem;
  color:var(--text-dim);
  font-size:0.74rem; font-weight:700;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.top-page .filter-chip img{width:1.2rem; height:1.2rem; object-fit:contain;}
.top-page .filter-chip:hover{border-color:var(--cyan); color:var(--cyan); transform:none;}
.top-page .filter-chip.active{border-color:var(--green); color:var(--green); box-shadow:0 0 0 1px var(--green); background:rgba(255,255,255,0.05); transform:none;}
.top-nation-btn, .top-reset{
  display:inline-flex; align-items:center; gap:0.3rem;
  height:1.9rem; padding:0 0.75rem;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line-soft);
  border-radius:0.25rem;
  color:var(--text-dim);
  font-family:inherit; font-size:0.74rem; font-weight:700;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.top-nation-btn:hover{border-color:var(--cyan); color:var(--cyan);}
.top-nation-btn.active{border-color:var(--green); color:var(--green); box-shadow:0 0 0 1px var(--green);}
.top-reset{background:transparent;}
.top-reset:hover{border-color:var(--magenta); color:var(--magenta);}
.top-search{
  flex:1 1 11rem; min-width:9rem; max-width:16rem;
  height:1.9rem; padding:0 0.75rem;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line-soft);
  border-radius:0.25rem;
  color:var(--text);
  font-family:inherit; font-size:0.76rem;
  outline:none;
  transition:border-color .15s ease;
}
.top-search:focus{border-color:var(--cyan); box-shadow:0 0 0 1px rgba(73,243,214,0.2);}
.top-search::placeholder{color:var(--text-faint);}
.top-count{margin-left:auto; font-size:0.7rem; color:var(--text-faint); white-space:nowrap;}
.top-count b{color:var(--text-dim);}

/* ---- перелистывание топа ----
   При смене характеристики (снаряда, фильтра, направления) старый рейтинг
   уходит вниз-в-прозрачность, а новый въезжает каскадом: подиум от центра к
   краям, список сверху вниз. Уходит только рейтинг — шапка, лента и фильтры
   перерисовываются мгновенно, чтобы нажатие отзывалось сразу. */
.top-podium, .top-list{
  transition:opacity .15s ease, transform .15s ease;
}
.is-swapping .top-podium, .is-swapping .top-list{
  opacity:0; transform:translateY(0.5rem);
  pointer-events:none;
}

/* ---- подиум топ-3 ---- */
.top-podium{
  display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:0.9rem;
  align-items:end;
  padding:0.4rem 0 0;
}
.top-podium[hidden]{display:none;}
.top-pod{
  --pod:var(--top-silver);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.2rem;
  min-height:19rem;
  padding:0.9rem 0.9rem 1rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.012) 45%, rgba(0,0,0,0.16));
  border:1px solid var(--line-soft);
  border-radius:0.6rem;
  transition:border-color .2s ease;
  animation:top-pod-in .45s cubic-bezier(.2,.9,.3,1) backwards;
}
.top-pod:nth-child(1){animation-delay:.07s;}
.top-pod:nth-child(3){animation-delay:.13s;}
@keyframes top-pod-in{from{opacity:0; transform:translateY(1rem) scale(0.97);} to{opacity:1; transform:none;}}
/* Само значение приходит следом за карточкой — цифра «дощёлкивается» */
.top-pod-value{animation:top-val-in .42s cubic-bezier(.2,.9,.3,1) backwards; animation-delay:.2s;}
.top-pod-1 .top-pod-value{animation-delay:.14s;}
@keyframes top-val-in{from{opacity:0; transform:translateY(0.35rem) scale(0.9);} to{opacity:1; transform:none;}}
/* Карточка подиума ведёт на карточку машины (/tank/<id>): под курсором —
   тонкая подсветка кромки, чтобы место читалось как отдельный объект. */
.top-pod{cursor:pointer;}
.top-pod:hover{border-color:color-mix(in srgb, var(--pod) 40%, transparent);}
/* цветная кромка призового места — как кромка стороны у карточки в сравнении */
.top-pod::after{
  content:''; position:absolute; left:0; right:0; top:0; height:0.18rem;
  background:var(--pod);
  box-shadow:0 0 1.4rem 0.1rem var(--pod);
}
.top-pod-1{--pod:var(--top-gold); min-height:22rem; border-color:rgba(255,213,74,0.28);}
.top-pod-2{--pod:var(--top-silver);}
.top-pod-3{--pod:var(--top-bronze);}
.top-pod-flag{
  position:absolute; left:-60%; top:14%;
  width:520%; max-width:none; height:auto;
  opacity:0.22;
  filter:brightness(1.6) saturate(1.25) blur(3px);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 42%, transparent 86%);
  mask-image:linear-gradient(180deg, #000 0%, #000 42%, transparent 86%);
  pointer-events:none;
  z-index:0;
}
.top-pod > *:not(.top-pod-flag){position:relative; z-index:1;}
.top-pod-place{
  align-self:flex-start;
  display:inline-flex; align-items:baseline; gap:0.3rem;
  padding:0.25rem 0.7rem 0.25rem 0.55rem;
  color:var(--pod);
  background:linear-gradient(90deg, color-mix(in srgb, var(--pod) 22%, transparent), color-mix(in srgb, var(--pod) 6%, transparent));
  border:1px solid color-mix(in srgb, var(--pod) 55%, transparent);
  clip-path:polygon(0.45rem 0, 100% 0, calc(100% - 0.45rem) 100%, 0 100%);
  font-size:0.6rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; line-height:1;
}
.top-pod-place b{font-size:1.5em; font-weight:900; letter-spacing:0;}
.top-pod-place i{font-style:normal; opacity:0.8;}
/* Высота окна с картинкой — фиксированная. Раньше она была резиновой, и
   карточка вытягивалась под пропорции конкретного танка: широкий силуэт
   делал второе место выше третьего, хотя место у них соседнее. Высота взята
   с запасом под пропорции иконок (примерно 7:4), чтобы танк по-прежнему
   занимал карточку по ширине, а не ужимался в полоску. */
.top-pod-art{
  position:relative; flex:none; height:10rem; width:100%;
  display:flex; align-items:center; justify-content:center;
  margin:0.1rem 0 0.2rem;
}
.top-pod-1 .top-pod-art{height:12rem;}
.top-pod-tier-mark{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-52%);
  font-size:6.5rem; font-weight:800; line-height:1;
  color:rgba(255,255,255,0.05);
  -webkit-text-stroke:1px rgba(255,255,255,0.07);
  letter-spacing:-0.03em;
  pointer-events:none; user-select:none;
}
.top-pod-art img{
  position:relative; z-index:1;
  width:118%; max-width:none; height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0.6rem 0.8rem rgba(0,0,0,0.6));
}
.top-pod-name{
  font-size:1.15rem; font-weight:800; line-height:1.15; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,0.8);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.top-pod-1 .top-pod-name{font-size:1.3rem;}
.top-pod-value{
  margin-top:0.55rem;
  font-size:2rem; font-weight:800; line-height:1; color:var(--pod);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 1.2rem color-mix(in srgb, var(--pod) 45%, transparent);
}
.top-pod-1 .top-pod-value{font-size:2.5rem;}
.top-pod-metric{font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint); margin-top:0.2rem;}
.top-pod .top-ctx{margin-top:0.55rem; justify-content:center;}

/* ---- общие мелочи карточек/строк ---- */
.top-meta{
  display:inline-flex; align-items:center; gap:0.35rem; flex-wrap:wrap;
  font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint);
}
.top-meta-type{width:1rem; height:1rem; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.9));}
.top-meta-tier{color:var(--text-dim); font-weight:800;}

/* Премиум и коллекционная техника — значок класса, уровень и название в цвет
   подсветки (классы вешает public/tankRarity.js) */
.tank-rare .top-meta-tier{color:var(--tank-rarity);}
.tank-rare .top-meta-type{filter:var(--tank-rarity-tint) drop-shadow(0 1px 2px rgba(0,0,0,0.9));}
.top-row.tank-rare .top-row-name,
.top-pod.tank-rare .top-pod-name{color:var(--tank-rarity);}
.top-ctx{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:0.15rem 0.45rem;
  font-size:0.68rem; color:var(--text-dim); font-variant-numeric:tabular-nums;
}
.top-ctx-k{color:var(--text-faint);}
.top-ctx-sep{width:3px; height:3px; border-radius:50%; background:var(--text-faint); opacity:0.6;}

/* ---- список ---- */
.top-list{display:flex; flex-direction:column; gap:0.3rem;}
.top-row{
  display:grid; grid-template-columns:2.6rem 5.4rem minmax(10rem, 1.2fr) minmax(8rem, 1fr) 5.5rem 6rem;
  align-items:center; gap:0.85rem;
  padding:0.4rem 0.8rem 0.4rem 0.4rem;
  border-radius:0.4rem;
  background:rgba(255,255,255,0.03);
  border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease;
  animation:top-row-in .35s ease backwards;
  animation-delay:calc(var(--i, 0) * 0.03s);
}
@keyframes top-row-in{from{opacity:0; transform:translateY(0.5rem);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){
  .top-row-fresh, .top-pod, .top-pod-value{animation:none;}
  .top-podium, .top-list{transition:none;}
}
.top-row{cursor:pointer;}
.top-row:hover{background:rgba(255,255,255,0.07); border-color:var(--line-soft);}
.top-row-rank{text-align:center; font-size:1rem; font-weight:800; color:var(--text-faint); font-variant-numeric:tabular-nums;}
.top-row-medal-1 .top-row-rank{color:var(--top-gold); font-size:1.25rem; text-shadow:0 0 0.8rem rgba(255,213,74,0.5);}
.top-row-medal-2 .top-row-rank{color:var(--top-silver); font-size:1.2rem;}
.top-row-medal-3 .top-row-rank{color:var(--top-bronze); font-size:1.2rem;}
.top-row-art{
  position:relative; height:3.1rem; overflow:hidden; border-radius:0.3rem;
  display:flex; align-items:center; justify-content:center;
}
.top-row-flag{
  position:absolute; inset:0;
  background-repeat:no-repeat; background-position:left top; background-size:auto 200%;
  opacity:0.45;
  -webkit-mask-image:linear-gradient(to right, black 0%, rgba(0,0,0,0.7) 40%, transparent 95%);
  mask-image:linear-gradient(to right, black 0%, rgba(0,0,0,0.7) 40%, transparent 95%);
}
.top-row-art img{position:relative; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,0.7));}
.top-row-info{min-width:0; display:flex; flex-direction:column; gap:0.15rem;}
.top-row-name{font-size:0.95rem; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 2px rgba(0,0,0,0.7);}
.top-row-bar{min-width:0;}
.top-row-track{display:block; height:0.4rem; border-radius:1rem; background:rgba(255,255,255,0.08); overflow:hidden;}
.top-row-fill{
  display:block; height:100%; border-radius:1rem;
  background:linear-gradient(90deg, rgba(73,243,214,0.35), var(--cyan));
  transition:width .55s cubic-bezier(.2,.8,.3,1);
}
.top-row-medal-1 .top-row-fill{background:linear-gradient(90deg, rgba(255,213,74,0.35), var(--top-gold)); box-shadow:0 0 0.6rem rgba(255,213,74,0.45);}
.top-row-medal-2 .top-row-fill{background:linear-gradient(90deg, rgba(215,226,234,0.3), var(--top-silver));}
.top-row-medal-3 .top-row-fill{background:linear-gradient(90deg, rgba(224,160,102,0.3), var(--top-bronze));}
.top-row-share{
  text-align:right; font-size:0.72rem; color:var(--text-faint);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.top-row-medal-1 .top-row-share{color:var(--top-gold); opacity:0.75;}
.top-row-value{
  text-align:right; font-size:1.05rem; font-weight:800; color:var(--text);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.top-row-value-best{color:var(--top-gold);}
.top-more{display:flex; justify-content:center;}
.top-more[hidden]{display:none;}
.top-more-btn{
  padding:0.5rem 1.3rem;
  background:rgba(255,255,255,0.05);
  border:1px dashed var(--line);
  border-radius:0.35rem;
  color:var(--text-dim);
  font-family:inherit; font-size:0.78rem; font-weight:700;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.top-more-btn:hover{border-color:var(--green); color:var(--green); background:rgba(143,209,63,0.08);}
.top-empty{margin:0; padding:2.5rem 1rem; text-align:center; color:var(--text-dim);}
.top-empty[hidden]{display:none;}
.top-foot{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.7rem 0.35rem 0;
  border-top:1px solid var(--line-soft);
}
.top-foot-note{flex:1 1 auto; font-size:0.66rem; color:var(--text-faint); line-height:1.5;}

/* ---- окно выбора наций (как на странице рейтинга) ---- */
.top-nation-popup{
  position:fixed; inset:0; z-index:80;
  display:none; align-items:center; justify-content:center;
  background:rgba(4,7,6,0.55);
  backdrop-filter:blur(0.4rem);
  -webkit-backdrop-filter:blur(0.4rem);
}
.top-nation-popup.open{display:flex;}
.top-nation-popup-inner{
  width:min(560px, 92vw); max-height:80vh; overflow-y:auto;
  background:linear-gradient(180deg,#181f1b,#101512);
  border:1px solid rgba(255,255,255,0.13); border-radius:0.5rem;
  box-shadow:0 1.5rem 4rem rgba(0,0,0,0.65);
  padding:1rem;
  animation:cmp-window-in .2s cubic-bezier(.2,.9,.3,1);
}
.top-nation-popup-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:0.78rem; font-weight:800; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--text-dim); margin-bottom:0.8rem;
}
.top-nation-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:0.55rem;}
.top-nation-tile{
  position:relative; height:3.8rem; border-radius:0.45rem; overflow:hidden;
  border:1px solid var(--line-soft); cursor:pointer; user-select:none;
  background-color:#1a211d; background-size:cover; background-position:left center;
  display:flex; align-items:flex-end; padding:0;
  font-family:inherit; color:var(--text);
  transition:.15s;
}
.top-nation-tile::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.6));}
.top-nation-tile span{position:relative; padding:0.3rem 0.55rem; font-size:0.72rem; font-weight:800; text-shadow:1px 1px 0 rgba(0,0,0,0.85);}
.top-nation-tile:hover{border-color:var(--cyan); transform:translateY(-1px);}
.top-nation-tile.active{border-color:var(--green); box-shadow:0 0 0 2px rgba(143,209,63,0.35);}
.top-nation-tile.active::after{
  content:'✓'; position:absolute; top:0.25rem; right:0.45rem;
  color:var(--green); font-size:0.85rem; font-weight:900; text-shadow:1px 1px 0 rgba(0,0,0,0.8);
}

/* ---- адаптив ---- */
@media (max-width:1250px){
  .top-row{grid-template-columns:2.4rem 4.6rem minmax(9rem, 1.3fr) minmax(6rem, 0.8fr) 4.8rem 5.6rem;}
  .top-pod-value{font-size:1.7rem;}
  .top-pod-1 .top-pod-value{font-size:2.1rem;}
}
@media (max-width:1100px){
  /* Доля от лидера — приятная мелочь, но полоска показывает то же самое:
     на средних экранах уступает место названию и значению. */
  .top-row{grid-template-columns:2.4rem 4.6rem minmax(9rem, 1.3fr) minmax(6rem, 0.8fr) 5.6rem;}
  .top-row-share{display:none;}
  .top-groups{grid-template-columns:minmax(0, 1fr);}
  .top-side{width:min(26rem, 88vw);}
}
@media (max-width:900px){
  .top-page{padding:0.8rem; min-height:0;}

  /* Лента чипов в строку не помещается, а всех характеристик тут два десятка
     — не окинуть взглядом. Поэтому кнопка становится полем «Характеристика:
     …», панель открывается снизу и закрывается сразу после выбора. */
  .top-bar-label, .top-ribbon{display:none;}
  .top-metric-bar{padding:0;}
  .top-metric-more{flex:1 1 100%;}
  .top-metric-pick{
    display:flex; width:100%; height:auto; padding:0.55rem 0.8rem;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--line-soft);
    border-radius:0.4rem;
    color:var(--text);
    font-size:0.82rem; font-weight:800; text-align:left;
  }
  .top-metric-pick-label{
    display:block; flex:none;
    font-size:0.58rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--text-faint);
  }
  .top-metric-pick-value{display:block; flex:1 1 auto; min-width:0; color:var(--top-accent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .top-metric-pick-more{display:none;}
  .top-metric-pick .top-dir-arrow{color:var(--text-dim);}

  .top-side{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:60;
    display:flex; width:auto; max-width:100%; max-height:76vh;
    margin:0; padding:0.9rem 0.9rem 1.2rem;
    border-radius:0.9rem 0.9rem 0 0;
    box-shadow:0 -1rem 3rem rgba(0,0,0,0.6);
    transform:translateY(101%);
    transition:transform .22s ease;
  }
  .top-side.open{transform:none;}
  .top-side-backdrop{
    display:block; position:fixed; inset:0; z-index:59;
    background:rgba(0,0,0,0.55);
    opacity:0; pointer-events:none;
    transition:opacity .22s ease;
  }
  .top-side-backdrop.open{opacity:1; pointer-events:auto;}
  .top-metric{padding:0.55rem 0.7rem;}

  /* Подиум остаётся подиумом и на узком экране — три места в ряд, первое
     крупнее. В столбик три карточки занимали три экрана прокрутки. */
  .top-pod, .top-pod-1{min-height:0;}
  .top-pod-art{height:8.5rem;}
  .top-pod-1 .top-pod-art{height:9.5rem;}
  /* Уровни и классы — по своей строке: вперемешку в одну они не читаются */
  .top-filter-label{flex-basis:100%;}
  .top-filter-sep{display:none;}
  .top-search{max-width:none;}
  .top-count{margin-left:0; flex-basis:100%;}
  .top-foot{flex-direction:column; align-items:stretch; gap:0.6rem;}
}
@media (max-width:640px){
  .top-row{grid-template-columns:2rem 4rem minmax(0, 1fr) auto; gap:0.55rem; padding-right:0.6rem;}
  .top-row-bar{grid-column:2 / span 3; grid-row:2;}
  .top-row{grid-template-rows:auto auto; row-gap:0.3rem;}
  .top-row-rank{grid-row:1 / span 2;}
  .top-row-value{font-size:1rem;}
  .top-ctx{display:none;}
  .top-head-tools{width:100%; justify-content:space-between;}
}

@media (max-width:700px){
  .top-page{padding:0.6rem; gap:0.7rem;}
  .top-main{gap:0.7rem;}

  .top-podium{gap:0.35rem; padding:0;}
  /* Первое место должно возвышаться над вторым и третьим — иначе это не
     подиум, а три одинаковых плитки. Высоту задаём явно: у длинных названий
     соседние карточки иначе перерастают победителя. */
  .top-pod{min-height:12rem; padding:0.45rem 0.3rem 0.6rem; gap:0.1rem; border-radius:0.45rem;}
  .top-pod-1{min-height:13.6rem;}
  .top-pod-place{align-self:center; padding:0.15rem 0.45rem 0.15rem 0.35rem; font-size:0.46rem;}
  /* «место» рядом с цифрой на такой ширине уже не помещается */
  .top-pod-place i{display:none;}
  .top-pod-art{height:4.4rem; margin:0.1rem 0;}
  .top-pod-1 .top-pod-art{height:5.4rem;}
  .top-pod-tier-mark{font-size:3.2rem;}
  /* Длинные названия («Progetto M40 mod. 65») на 100 px в строку не влезают —
     даём две строки вместо многоточия сразу после первого слова. */
  .top-pod-name, .top-pod-1 .top-pod-name{
    font-size:0.62rem; line-height:1.2; white-space:normal;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    /* Место под две строки держим всегда: иначе карточка с длинным названием
       перерастает соседей и подиум перекашивается. */
    min-height:2.4em;
  }
  .top-pod .top-meta{font-size:0.5rem; gap:0.2rem;}
  .top-pod .top-meta-type{width:0.8rem; height:0.8rem;}
  .top-pod-value{margin-top:0.3rem; font-size:1.05rem;}
  .top-pod-1 .top-pod-value{font-size:1.3rem;}
  /* Подпись «альфа · базовый · делит место» на телефоне ложится в две строки
     — место под них держим у всех трёх карточек, иначе подиум съезжает. */
  .top-pod-metric{margin-top:0.15rem; font-size:0.46rem; letter-spacing:0.08em; min-height:2.2em;}
  .top-pod .top-ctx{display:none;}

  /* Выбор снаряда и направление сортировки — в одну строку они на телефон не
     помещались и распирали страницу вбок. */
  .top-head{padding-bottom:0.7rem;}
  .top-head-tools{gap:0.35rem 0.4rem;}
  .top-shells{flex-wrap:wrap; gap:0.25rem;}
  .top-shells-label{margin-right:0; flex-basis:100%;}
  .top-page .cmp-shell-btn{font-size:0.66rem; padding:0.3rem 0.55rem;}
  .top-dir-btn{padding:0.35rem 0.65rem; font-size:0.66rem;}

  .top-filters{gap:0.4rem; padding:0;}
  .top-filter-row{gap:0.35rem 0.4rem;}
  /* Подпись — своей строкой, уровни и классы — по своей ленте с прокруткой:
     вперемешку в одну строку на телефоне не читается ни то ни другое. */
  .top-filter-label{flex:1 1 100%; font-size:0.55rem;}
  .top-chips{
    flex:1 1 100%; min-width:0;
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    padding-bottom:0.1rem;
  }
  .top-chips::-webkit-scrollbar{display:none;}
  .top-page .filter-chip{flex:none; min-width:1.9rem; height:1.8rem; padding:0 0.45rem; font-size:0.68rem;}
  .top-nation-btn, .top-reset{flex:none; height:1.8rem; padding:0 0.6rem; font-size:0.68rem;}
  .top-search{flex:1 1 7rem; min-width:6rem; max-width:none; height:1.8rem; font-size:0.72rem;}
  .top-count{flex:none; margin-left:auto; font-size:0.62rem;}
}