/* AGENT CUP — вёрстка по Figma xqW0UtZ0xTQtVVVpWlOu1F.
   Все значения взяты из Figma API (см. spec/spec.md). Магических чисел нет. */

:root {
  /* цвета — node fills */
  --bg: #010e08;                    /* 1920 / Header / Footer fill */
  --text: #f1fff6;                  /* Updated Text, Copyright Text */
  --white: #ffffff;                 /* RU label, логотип */
  --green: #26e610;                 /* stroke кнопки, Ellipse fill */
  --on-green: #010e08;              /* Button Text на градиенте */
  --lang-bg: rgba(255, 255, 255, 0.05); /* фон переключателя языка */

  /* Button fill: GRADIENT_LINEAR(#12d335 0%, #57f662 45.58%, #00ff1a 100%)
     handles [[0.4901,1.0],[0.4901,-0.2229]] → ось снизу вверх, длина 1.2229 высоты.
     Стопы пересчитаны в CSS-проценты: 45.58% → 55.74%, 100% → 122.29%. */
  --btn-gradient: linear-gradient(to top, #12d335 0%, #57f662 55.74%, #00ff1a 122.29%);
  --btn-glow: 0 0 20px 0 rgba(87, 246, 98, 0.6); /* DROP_SHADOW blur=20 */

  /* геометрия — root frame */
  --container: 1440px;              /* Main section width, обе ширины макета */
  --gap-root: 36px;                 /* itemSpacing фрейма 1920 */
  --gap-section: 80px;              /* itemSpacing Main section */
  --radius-pill: 50px;             /* Button cornerRadius */
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.3;                 /* lineHeightPercentFontSize=130 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; }

/* Фон динамический: покрывает любую высоту страницы (sticky footer тянет .ac-page).
   Собран из слоёв вместо одной картинки, поэтому тайлится бесконечно без растяжения:
   1) базовый цвет #010e08;
   2) зелёные свечения (Ellipse #26e610) — CSS-градиенты, повторяются по вертикали;
   3) текстура-шум — бесшовный тайл. */
.ac-page {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
}

/* Свечения: мягкие крупные пятна #26e610 по краям, чередуются лево→право.
   Паттерн 2000px повторяется по вертикали — покрывает любую высоту без растяжения.
   Крупный радиус + мягкое затухание убирают эффект «штампа». */
/* Фон — оригинальная картинка из Figma (Background 1920×6367), сделана бесшовной
   по вертикали (края растворены в базовый цвет). repeat-y покрывает любую высоту:
   до 6367px это ровно макет, дальше картинка повторяется — период огромный,
   стык бесшовный, повтор глазом не читается. */
.ac-page__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url('../img/bg-desktop.webp');
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto;
}

.ac-page__inner {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;                   /* тянется на всю высоту — прижимает футер к низу */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-root);
}

/* Main занимает свободное место, толкая футер вниз при любом объёме данных */
.main { flex: 1 0 auto; }

/* Одна формула на все 7 брейкпойнтов. Проверено против макета:
   1920→1440(поля 240) · 1536→1440(48) · 1440→1408(16) · 1100→1068(16)
   768→736(16) · 450→418(16) · 360→328(16). Медиазапрос не нужен. */
.container {
  width: min(var(--container), 100% - 32px);
  margin-inline: auto;
}

/* ─── Кнопка (COMPONENT_SET Button 1:3565) ─────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;                        /* itemSpacing */
  height: 44px;
  padding: 15px 36px;
  border: 1px solid var(--green);   /* stroke weight=1 align=INSIDE */
  border-radius: var(--radius-pill);
  background: var(--btn-gradient);
  box-shadow: var(--btn-glow);
  color: var(--on-green);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 18.2px;              /* Button Text h=18 */
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* ─── Header (INSTANCE 26:1382, h=92) ─────────────────────────────── */
.header {
  width: 100%;
  background: var(--bg);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 24px;                        /* Container itemSpacing */
  height: 92px;
  padding-block: 24px;
}

.header__logo { width: 120.71px; height: 36px; }

/* DOM-порядок mobile-first: logo, cta, break, updated, lang.
   На десктопе переставляем: logo | updated · cta · lang */
.header__cta {
  order: 2;
  width: 204px;                     /* Button box w=204 */
}
.header__updated { order: 1; }
.lang { order: 3; }

.header__break { display: none; }   /* перенос строки появляется на ≤450 */

/* w=201 из Figma. Кириллица рендерится Onest (Poppins её не содержит),
   метрики уже фигмовского фолбэка — ширину фиксируем, чтобы соседи не поехали. */
.header__updated {
  width: 201px;
  margin: 0 0 0 auto;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  white-space: nowrap;
}

/* Переключатель языка (Button 26:1327, 96×44, padding 4) */
.lang {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--lang-bg);
}

.lang__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--white);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  text-decoration: none;
  cursor: pointer;
}

.lang__btn--active {
  background: var(--btn-gradient);
  color: var(--on-green);
}

/* ─── Footer (INSTANCE 26:1405, h=84) ─────────────────────────────── */
.footer {
  width: 100%;
  background: var(--bg);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 84px;
  padding-block: 24px;
}

.footer__logo { width: 120.71px; height: 36px; }

.footer__copy {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  white-space: nowrap;              /* Copyright Text h=18 — одна строка */
}

/* ─── Main ─────────────────────────────────────────────────────────── */
.main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
}

/* ─── Hero: Ranking and Leader sections (1:3626) ───────────────────── */
.hero {
  display: flex;
  gap: 24px;                        /* itemSpacing */
}

/* Community CTA (1:3524) — 732×497, radius 20, radial-градиент со скошенными
   осями: CSS radial-gradient такое не умеет, поэтому точная копия в hero-bg.svg */
.hero__card {
  display: flex;
  flex-direction: column;
  gap: 64px;
  flex: 732 1 0;                    /* доля 732 — на 1440 совпадает с макетом, дальше тянется */
  min-width: 0;
  min-height: 547px;               /* box h=547; растёт, если контента больше */
  padding: 24px;
  border-radius: 20px;
  background-image: url('../img/hero-bg.svg');
  background-size: 100% 100%;
  box-shadow:
    0 3px 4px 0 rgba(0, 0, 0, 0.25),
    inset 0 10px 25px 0 rgba(36, 155, 87, 0.1);
  overflow: hidden;
  container-type: inline-size;     /* шрифты внутри считаются от ширины карточки (cqi) */
}

.hero__top {
  display: flex;
  flex-direction: column;
  gap: 26px;                        /* Daily Ranking Section itemSpacing */
}

/* Badge and Label (1:3781) — 188×34 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  height: 34px;                     /* box h=34 */
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);       /* BACKGROUND_BLUR radius=4 */
}

.badge__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  animation: badge-dot-pulse 1.6s ease-in-out infinite;
}

/* «живой» индикатор: пульсация по прозрачности, без изменения размера */
@keyframes badge-dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .badge__dot { animation: none; }
}

.badge__label {
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
  line-height: 18.2px;
  white-space: nowrap;
}

.hero__details {
  display: flex;
  flex-direction: column;
  gap: 24px;                        /* Agent Cup Details itemSpacing */
}

.hero__info {
  display: flex;
  flex-direction: column;
  gap: 16px;                        /* Agent Cup Info itemSpacing */
}

/* Agent Cup Title (1:3527) — 100px/90px, градиентный текст */
.hero__title {
  margin: 0;
  /* 100px при ширине карточки 732 (13.66cqi×732≈100); при сжатии — плавно меньше */
  font-size: clamp(48px, 13.66cqi, 100px);
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;             /* «AGENT CUP» уменьшается, а не переносится/режется */
  background: linear-gradient(101.43deg, #cbffc7 49.11%, #269510 98.45%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__desc {
  width: 100%;
  margin: 0;
  color: var(--text);
  font-size: clamp(16px, 3.28cqi, 24px);  /* 24px при карточке 732; на узких меньше */
  font-weight: 400;
  line-height: 1.3;
}

.hero__buttons {
  display: flex;
  gap: 16px;                        /* Agent Cup Buttons itemSpacing */
}

.hero__btn-primary { width: 204px; }  /* Button 1:3569 w=204 */
.hero__btn-ghost   { width: 185px; }  /* Button 1:3578 w=185 */

/* Вторичная кнопка (1:3578): без обводки и свечения */
.btn--ghost {
  border: 0;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  color: var(--white);
}

/* Info Section (1:3590) — 684, gap 8 */
.hero__stats {
  display: flex;
  flex-wrap: wrap;                  /* боксы переносятся, а не сжимаются с обрезкой */
  gap: 8px;
}

/* Period / Update / Timezone Info — radius 20, рамка градиентом */
.stat-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 89px;                 /* box h=89; растёт под контент */
  padding: 16px;
  border-radius: 20px;
  background: rgba(1, 14, 8, 0.25);
  backdrop-filter: blur(2px);
}

/* stroke: GRADIENT_LINEAR(#3d423c → #106706) weight=1 align=INSIDE */
.stat-box::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 20px;
  background: linear-gradient(180deg, #3d423c 0%, #106706 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.stat-box--fill   { flex: 1 1 auto; min-width: max-content; }  /* не уже контента */
.stat-box--update { flex: 1 1 auto; min-width: max-content; }

.stat-box__label {
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  white-space: nowrap;
}

.stat-box__value {
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
  line-height: 31.2px;
  white-space: nowrap;
}

/* ─── Leaderboard Section (1:3698) ─────────────────────────────────── */
.leader {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 684 1 0;                    /* доля 684 — пара к hero-карточке (732:684 как в макете) */
  min-width: 0;
}

/* Leaderboard Section h=547: карточка 354 + gap 24 + Bottom Info 169 */

/* Community CTA (1:3649) — 684×324, свой радиальный градиент */
.leader__card {
  min-height: 354px;               /* box h=354; растёт под контент */
  container-type: inline-size;     /* адаптивный шрифт имени лидера */
  padding: 24px;
  border-radius: 20px;
  background-image: url('../img/leader-bg.svg');
  background-size: 100% 100%;
  box-shadow:
    0 3px 4px 0 rgba(0, 0, 0, 0.25),
    inset 0 10px 25px 0 rgba(36, 155, 87, 0.1);
  overflow: hidden;
}

.leader__info {
  display: flex;
  flex-direction: column;
  gap: 24px;                        /* Leaderboard Info itemSpacing */
}

.leader__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 34px;
}

/* Leader Label (1:3773) — 152×34 */
.leader__badge {
  width: 152px;                     /* box w=152 */
  height: 34px;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  white-space: nowrap;
}

.leader__amount {
  color: var(--text);
  font-size: 24px;
  font-weight: 600;
  line-height: 31.2px;
  white-space: nowrap;
}

.leader__detailed {
  display: flex;
  flex-direction: column;
  gap: 16px;                        /* Leader Detailed Info itemSpacing */
}

/* Leader Name (1:3653) — 64px/57.6 */
.leader__name {
  margin: 0;
  color: var(--text);
  font-size: 64px;
  font-weight: 600;
  line-height: 83.2px;              /* lineHeightPx=83.2 */
  white-space: nowrap;
}

.leader__additional {
  display: flex;
  gap: 16px;
  height: 31px;                     /* box h=31 */                        /* Leader Additional Info itemSpacing */
  color: var(--text);
  font-size: 24px;
  font-weight: 400;
  line-height: 31.2px;
  white-space: nowrap;
}

.leader__stats {
  display: flex;
  gap: 8px;                         /* Leader Stats itemSpacing */
}

/* Points / Deposits / Today Info — как stat-box, но БЕЗ градиентной рамки */
.stat-box--plain { flex: 1; }
.stat-box--plain::before { content: none; }

/* ─── Bottom Info (1:3687) — 4 счётчика 165×149 ────────────────────── */
.totals {
  display: flex;
  flex-wrap: wrap;                  /* при длинных суммах счётчики переносятся */
  gap: 8px;
  min-height: 169px;
  height: auto;
}

.total {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: max-content;           /* не уже суммы */
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(1, 14, 8, 0.25);
  backdrop-filter: blur(2px);
}

/* Badge 44×44, radius 10, stroke #26e610 0.5 */
.total__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 4px;
  border: 0.5px solid var(--green);
  border-radius: 10px;
}

/* Рамка каждого счётчика — цвета своей иконки (stroke из Figma) */
.total__badge--green  { border-color: #26e610; }
.total__badge--orange { border-color: #f6a457; }
.total__badge--purple { border-color: #be57f6; }
.total__badge--pink   { border-color: #f6577f; }

.total__details {
  display: flex;
  flex-direction: column;
  gap: 4px;                         /* Participants Details itemSpacing */
}

.total__value {
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
  line-height: 31.2px;
  white-space: nowrap;
}

.total__label {
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  white-space: nowrap;
}

/* ─── Заголовки секций ─────────────────────────────────────────────── */
/* 56px/50.4, textCase=UPPER, тот же градиент, что у Agent Cup Title */
.section-title {
  width: fit-content;
  max-width: 100%;                  /* не шире секции — иначе не переносится */
  /* height НЕ фиксируем: при переносе на 2-ю строку фикс-высота обрезала бы
     градиент (background-clip: text красит только внутри бокса), и второе слово
     становилось невидимым. Высота растёт под число строк. */
  margin: 0;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  background: linear-gradient(101.43deg, #cbffc7 49.11%, #269510 98.45%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── Prize Pool Section (1:3755) ──────────────────────────────────── */
.prizes {
  display: flex;
  flex-direction: column;
  gap: 24px;                        /* itemSpacing */
}

/* Prize Distribution (1:3797) — cross=MAX → карточки по нижнему краю */
.prizes__grid {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  height: 317px;
}

.prize {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 64px;                        /* itemSpacing */
  padding: 16px;
  border-radius: 20px;
  background: rgba(1, 14, 8, 0.25);
  backdrop-filter: blur(2px);       /* BACKGROUND_BLUR radius=4 */
  overflow: hidden;                 /* clipsContent: true */
}

/* stroke weight=1 align=INSIDE, у каждого места свой градиент */
.prize::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: 20px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.prize--4 { height: 217px; }
.prize--4::before { background: linear-gradient(128.28deg, #43413b 32.53%, #d5d5d5 76.99%); }
.prize--3 { height: 249px; }
.prize--3::before { background: linear-gradient(131.1deg, #3c2c1a 31.1%, #d7ac88 76.51%); }
.prize--2 { height: 249px; }
.prize--2::before { background: linear-gradient(229.2deg, #43413b 31.86%, #d5d5d5 75.41%); }
.prize--5 { height: 217px; }
.prize--5::before { background: linear-gradient(230.47deg, #43413b 34.32%, #d5d5d5 77.6%); }

/* First Place Info (1:3798): свой фон, золотая рамка, padding-top 24 без низа */
.prize--1 {
  height: 317px;
  align-items: center;
  gap: 16px;
  padding: 24px 16px 0;
  background: rgba(247, 209, 78, 0.05);
}
.prize--1::before { background: linear-gradient(180deg, #f7d14e 0%, #f7d14e 76.99%); }

/* Badge: контейнер 64×64 + подпись «место» */
.prize__badge {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
}

/* First Place Badge (13:533) — вертикальный, по центру */
.prize__badge--stack {
  flex-direction: column;
  gap: 4px;
  height: 86px;
}

.prize__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 10px;
  color: #010e08;
  font-size: 36px;
  font-weight: 700;
  line-height: 46.8px;
}

.prize--4 .prize__num,
.prize--5 .prize__num {
  background: linear-gradient(135.34deg, #353535 38.47%, #161515 69.97%);
  color: var(--white);              /* Position fill #ffffff */
}
.prize--3 .prize__num { background: linear-gradient(135.34deg, #d7ac88 38.47%, #b69877 69.97%); }
.prize--2 .prize__num { background: linear-gradient(135.34deg, #d5d5d5 38.47%, #918e83 69.97%); }
.prize--1 .prize__num { background: linear-gradient(135.34deg, #fbe67b 38.47%, #f7d14e 69.97%); }

.prize__place {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 18.2px;
  white-space: nowrap;
}

.prize__amount {
  position: relative;
  z-index: 1;
  height: 57px;
  color: var(--text);
  font-size: 44px;
  font-weight: 700;
  line-height: 57.2px;
  white-space: nowrap;
}

/* Trophy: рамка + картинка, обе с точными координатами из Figma.
   Картинки нарезаны из оригиналов по imageTransform (spec/crop_trophies.py). */
.prize__trophy {
  position: absolute;
  overflow: hidden;                 /* clipsContent: true у мест 2–5 */
}

.prize__trophy img {
  position: absolute;
  max-width: none;
}

.prize--4 .prize__trophy { left: 155.4px; top: 99px;  width: 120px; height: 118px; }
.prize--3 .prize__trophy { left: 155.2px; top: 131px; width: 120px; height: 118px; }
.prize--2 .prize__trophy { left: 155.2px; top: 131px; width: 120px; height: 118px; }
.prize--5 .prize__trophy { left: 155.2px; top: 99px;  width: 120px; height: 118px; }

.prize--4 .prize__trophy img { left: -9.3px; top: 38.5px; width: 174.2px; height: 123.1px; }
.prize--3 .prize__trophy img { left: 0;      top: 22px;   width: 160px;   height: 140.7px; }
.prize--2 .prize__trophy img { left: 0;      top: 0;      width: 153.8px; height: 160.8px; }
.prize--5 .prize__trophy img { left: 3px;    top: 52.8px; width: 161.7px; height: 108.2px; }

/* First Place Trophy: clipsContent false — режет уже карточка */
.prize__trophy--first {
  left: 15.6px;
  top: 199px;
  width: 244px;
  height: 118px;
  overflow: visible;
}

.prize__trophy--first img {
  left: -10.25px;
  top: -12.12px;
  width: 264.51px;
  height: 264.51px;
}

/* На десктопе обёртка не влияет на раскладку */
.prize__body { display: contents; }

/* ─── Top 3 Today Section (14:581) ─────────────────────────────────── */
.top3s {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: 50px;              /* padding top/bottom */
  background: linear-gradient(112.53deg, rgba(6,28,0,0.05) -3.8%, rgba(159,195,162,0.05) 55.57%, rgba(6,28,0,0.05) 100%);
}

.top3s__grid {
  display: flex;
  gap: 16px;
  height: 434px;                    /* Top 3 Today Distribution h=434 */
}

/* Community CTA ×3 — 469.33×434, свой радиальный градиент и подсветка */
.top3 {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;                        /* First Place Details itemSpacing */
  padding: 24px;
  border-radius: 20px;
  background-size: 100% 100%;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* INNER_SHADOW y=10 blur=40 — отдельным слоем поверх фона */
.top3::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
}

.top3--1st { background-image: url('../img/top3-1st-bg.svg'); }
.top3--1st::after { box-shadow: inset 0 10px 40px 0 rgba(247, 209, 78, 0.3); }
.top3--2nd { background-image: url('../img/top3-2nd-bg.svg'); }
.top3--2nd::after { box-shadow: inset 0 10px 40px 0 rgba(168, 161, 161, 0.3); }
.top3--3rd { background-image: url('../img/top3-3rd-bg.svg'); }
.top3--3rd::after { box-shadow: inset 0 10px 40px 0 rgba(141, 108, 81, 0.3); }

.top3__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
}

.top3__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 10px;
  color: #010e08;
  font-size: 36px;
  font-weight: 700;
  line-height: 46.8px;
}

.top3--1st .top3__num { background: linear-gradient(135.34deg, #fbe67b 38.47%, #f7d14e 69.97%); }
.top3--2nd .top3__num { background: linear-gradient(135.34deg, #d5d5d5 38.47%, #918e83 69.97%); }
.top3--3rd .top3__num { background: linear-gradient(135.34deg, #d7ac88 38.47%, #b69877 69.97%); }

.top3__amount {
  color: var(--text);
  font-size: 24px;
  font-weight: 600;
  line-height: 31.2px;
  white-space: nowrap;
}

/* Details Container h=88: имя 54 + gap 16 + мета 18 */
.top3__details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 88px;
}

.top3__name {
  height: 54px;                     /* box h=54 */
  margin: 0;
  color: var(--text);
  font-size: 36px;
  font-weight: 600;
  line-height: 54px;                /* lineHeightPx=54 */
  white-space: nowrap;
}

.top3__meta {
  display: flex;
  gap: 16px;
  height: 18px;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  white-space: nowrap;
}

/* Stats — две колонки, в каждой два бокса по 89 */
.top3__stats {
  display: flex;
  gap: 8px;
  height: 186px;
}

.top3__col {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

/* ─── Full Ranking Section (16:817) ────────────────────────────────── */
.ranking {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ranking__head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  height: 73px;
}

.ranking__controls {
  display: flex;
  gap: 16px;
  margin-top: 14.5px;               /* Frame 2147223175 y=14.5 */
  margin-left: auto;
}

/* Ввод (30:323) — 264×44, r=30 */
.field {
  width: 264px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid #106706;
  border-radius: 30px;
  background: rgba(1, 14, 8, 0.25);
  color: var(--white);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  outline: none;
}

.field::placeholder { color: var(--white); opacity: 1; }

/* Список (30:263). Выпадающий список раскрывается по клику (data-select). */
.select {
  position: relative;
  display: flex;
  align-items: center;
  width: 264px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid #106706;
  border-radius: 30px;
  background: rgba(1, 14, 8, 0.5);
  color: var(--white);
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  cursor: pointer;
  user-select: none;
}

.select__arrow {
  position: absolute;
  left: 225px;                      /* Arrow - Down 2 x=220 + 5 внутри иконки */
  top: 18.5px;
  width: 14px;
  height: 7px;
  transition: none;
}

.select[aria-expanded="true"] .select__arrow { transform: rotate(180deg); }

/* Выпадающий список стран (Options List Container: fill #010e08, опции 41px, Montserrat 16) */
.select__list {
  position: absolute;
  left: 0;
  top: 49px;                        /* под селектом, gap 5 */
  z-index: 20;
  width: 100%;
  max-height: 264px;
  overflow-y: auto;
  border: 1px solid #106706;
  border-radius: 20px;
  background: #010e08;
  padding: 4px;
}

.select__list[hidden] { display: none; }

.select__option {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.select__option:hover,
.select__option[aria-selected="true"] { background: rgba(255, 255, 255, 0.06); }

.select__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 30px);
}

/* Button «Только призовая зона» — тот же градиент, opacity 0.5 (Figma) */
.btn--filter {
  width: 230px;
  border: 0;
  background: linear-gradient(to top,
    rgba(18, 211, 53, 0.5) 0%,
    rgba(87, 246, 98, 0.5) 55.74%,
    rgba(0, 255, 26, 0.5) 122.29%);
  box-shadow: none;
  color: var(--white);
}

/* Full Ranking Distribution (16:902) */
/* Единый грид заголовков и строк.
   minmax(min, 1fr): колонка тянется на широких экранах, но не сжимается уже
   своего текста. Сумма минимумов задаёт min-width таблицы — если контейнер
   меньше, включается горизонтальный скролл (на любой ширине, а не только ≤768).
   Так между брейкпойнтами ничего не наезжает и статус не обрезается. */
:root {
  --rank-grid:
    minmax(40px, 44px)                /* Место */
    minmax(96px, 1.1fr)               /* Участники (AG-179541) */
    minmax(96px, 1fr)                 /* Страна (Turkmenistan) */
    minmax(104px, 1.1fr)              /* Депозиты ($2 545 917) */
    minmax(48px, 0.6fr)               /* Игроки */
    minmax(140px, 1fr)                /* Баллы (progress) */
    minmax(56px, 0.6fr)               /* За день */
    minmax(66px, 0.7fr)               /* Приз */
    minmax(122px, 122px);             /* Статус — фикс, не сжимать */
}

.ranking__viewport {
  position: relative;                 /* якорь для стрелки-подсказки, которая не скроллится */
}

.ranking__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 0;                    /* горизонтальный padding у строк, чтобы фон был во всю ширину */
  border-radius: 20px;
  background: rgba(1, 14, 8, 0.5);
  overflow-x: auto;                   /* скролл появляется, когда колонки не влезают */
}

/* Подсказка «листай вправо»: тонкий шеврон у правого края области строк.
   Живёт вне скролл-контейнера, поэтому не уезжает вместе с контентом.
   Появляется только когда есть куда листать, гаснет у конца (класс на JS). */
.ranking__hint {
  position: absolute;
  top: 24px;
  bottom: 24px;
  right: 0;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 16px;
  pointer-events: none;
  border-radius: 0 20px 20px 0;
  background: linear-gradient(to right, rgba(1, 14, 8, 0) 0%, rgba(1, 14, 8, 0.65) 75%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ranking__viewport.is-scrollable .ranking__hint { opacity: 1; pointer-events: auto; cursor: pointer; }

.ranking__hint svg { animation: ac-hint-nudge 1.5s ease-in-out infinite; }

@keyframes ac-hint-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .ranking__hint svg { animation: none; }
}

/* Заголовки и строки делят один min-width (944px = сумма минимумов колонок
   768 + гэпы 128 + падинги 48). На широком экране grid растягивается до тела
   (width:auto = 100%), на узком фиксируется на 944 и тело скроллится. Так cols
   и rows всегда одной ширины → колонки выровнены, зебра доходит до края,
   правый padding сохраняется. Длиннее минимума — обрезается «…». */
.ranking__cols {
  display: grid;
  grid-template-columns: var(--rank-grid);
  gap: 16px;
  min-width: 944px;
  height: 18px;
  padding: 0 24px;
}

.ranking__cols span {
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ranking__rows {
  min-width: 944px;
}

.rank-row {
  display: grid;
  grid-template-columns: var(--rank-grid);
  align-items: center;
  gap: 16px;
  width: 100%;                        /* = ширине строк-обёртки → зебра до конца справа */
  height: 42px;
  padding: 8px 24px;
}

.rank-row:nth-child(odd) { background: rgba(255, 255, 255, 0.05); }

.rank-row__cell {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 18.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;          /* если данные всё же длиннее минимума — «…», не наезд */
}

.rank-row__icon { display: flex; }

/* Icon Background 24×24 r=4 */
.rank-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: #010e08;
  font-size: 14px;
  font-weight: 700;
  line-height: 18.2px;
}

.rank-badge--gold   { background: linear-gradient(135.34deg, #fbe67b 38.47%, #f7d14e 69.97%); }
.rank-badge--silver { background: linear-gradient(135.34deg, #d5d5d5 38.47%, #918e83 69.97%); }
.rank-badge--bronze { background: linear-gradient(135.34deg, #d7ac88 38.47%, #b69877 69.97%); }
.rank-badge--dark   { background: linear-gradient(135.34deg, #353535 38.47%, #161515 69.97%); color: var(--white); }
.rank-badge--none   { background: none; color: var(--white); }

/* Progress Container 140.4×26 */
.rank-row__progress {
  display: flex;
  flex-direction: column;
  width: 140.4px;
  height: 26px;
}

.rank-row__progress-text {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 18.2px;
}

.progress {
  display: block;
  width: 140.4px;
  height: 8px;
  border-radius: 100px;
  background: rgba(1, 14, 8, 0.25);
}

.progress__bar {
  display: block;
  width: 83px;                      /* Progress Bar w=83 */
  height: 8px;
  border-radius: 100px;
  background: linear-gradient(97.02deg, #80da78 50.34%, #269510 99.41%);
}

/* Статус: r=20, padding 4/8, фон = цвет с alpha 0.05 */
.rank-row__status {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 18.2px;
  white-space: nowrap;
}

.rank-row__status--prize  { background: rgba(38, 230, 16, 0.05);  color: #26e610; }
.rank-row__status--rising { background: rgba(18, 202, 248, 0.05); color: #12caf8; }
.rank-row__status--active { background: rgba(255, 255, 255, 0.05); color: var(--white); }

/* Button «Показать еще» — 172×44, fill #ffffff/0.05 */
/* .btn задаёт display:inline-flex, который перебивает браузерный [hidden] —
   без этого правила скрытая через JS кнопка всё равно рисовалась. */
.btn--more[hidden] { display: none; }

.btn--more {
  width: 172px;
  align-self: center;
  border: 0;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  color: var(--white);
}

/* ─── Daily Momentum + Scoring Rules ───────────────────────────────── */
.momentum-section {
  display: flex;
  gap: 24px;
  height: 303px;
}

.momentum,
.rules {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
}

/* Daily Momentum Title / Scoring Rules Label — 36/700 lh=46.8 */
.panel-title {
  margin: 0;
  color: var(--white);
  font-size: 36px;
  font-weight: 700;
  line-height: 46.8px;
  white-space: nowrap;
}

.momentum .panel-title { height: 44px; }

/* Distribution: SPACE_BETWEEN, не gap */
.momentum__list {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

.momentum__row {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 18px;
}

/* Фиксированная ширина колонки метки: цифры в номерах разной ширины, и при
   min-width метка тянулась под контент по-разному — треки начинались не по одной
   линии. Жёсткая width выравнивает старт всех полос. */
.momentum__id {
  width: 90px;
  flex: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 18.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.momentum__track {
  width: 525px;
  height: 18px;
  border-radius: 100px;
  background: rgba(1, 14, 8, 0.25);
}

.momentum__bar {
  display: block;
  width: 83px;                      /* Momentum Bar w=83 */
  height: 18px;
  border-radius: 100px;
  background: linear-gradient(105.49deg, #80da78 47.48%, #269510 97.17%);
}

.momentum__points {
  width: 27px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 18.2px;
}

/* Scoring Rules */
.rules__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  height: 47px;
}

.btn--refresh {
  width: 202px;
  margin-top: 1.5px;                /* Button y=1.5 */
  padding: 13px 36px;
  border: 0;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  color: var(--white);
  line-height: 18.2px;
}

.rules__list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

/* Rule Info — 660×56, r=20, градиентная рамка */
.rule {
  position: relative;
  display: flex;
  gap: 16px;
  height: 56px;
  padding: 8px 12px;
  border-radius: 20px;
  background: rgba(1, 14, 8, 0.25);
}

.rule::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 20px;
  background: linear-gradient(180deg, #3d423c 0%, #106706 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Rule Badge — два слоя заливки, видим верхний (зелёный) */
.rule__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background-image:
    linear-gradient(141.95deg, #80da78 15.42%, #269510 71.95%),
    linear-gradient(135.34deg, #fbe67b 38.47%, #f7d14e 69.97%);
  color: #010e08;
  font-size: 14px;
  font-weight: 700;
  line-height: 18.2px;
}

.rule__details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 0;
}

.rule__label {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 18.2px;
}

.rule__desc {
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
}

/* ══════════════════════════════════════════════════════════════════════
   АДАПТИВ. Брейкпойнты взяты из макета: 1440, 1100, 768, 450, 360.
   Контейнер min(1440, 100%-32px) сам даёт поля 240/48/16 — правки не нужны.
   ══════════════════════════════════════════════════════════════════════ */

/* Momentum-панель фиксирована, Rules тянется (layoutSizing из Figma) */
.momentum { flex: none; width: 708px; }
.rules    { flex: 1; }

/* Полоса момента — FILL, а не фикс 525 */
.momentum__track { flex: 1; width: auto; }

/* ─── ≤1100: hero в колонку, main gap 36 ──────────────────────────── */
@media (max-width: 1100px) {
  .main { gap: 36px; }

  .hero { flex-direction: column; }
  .hero__card,
  .leader { flex: none; width: 100%; }

  .hero__desc { width: 100%; }
  .hero__stats { width: 100%; }

  /* Leaderboard 515 = карточка 354 + gap 24 + Bottom Info 137.
     min-height, а не height — при переносе счётчиков контейнер растёт */
  .totals { min-height: 137px; height: auto; }


}

/* ─── ≤768: призы, топ-3 и нижние панели в колонку ────────────────── */
/* Карточки призов и топ-3 переключаются в компактный столбик уже с 1200px:
   пять/три карточки в ряд перестают вмещать реальные суммы ($1 200 и длинные
   номера) раньше, чем на 768. Отход от макета на 1100 — осознанный, ради того
   чтобы контент не вылезал. */
@media (max-width: 1200px) {
  /* Prize Pool: карточки в столбик, внутри — горизонтально */
  .prizes__grid {
    flex-direction: column;
    gap: 8px;
    height: auto;
    align-items: stretch;
  }

  .prize,
  .prize--1,
  .prize--2,
  .prize--3,
  .prize--4,
  .prize--5 {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    height: 123px;
    padding: 16px;
  }

  .prize--1 { align-items: center; }

  .prize__badge,
  .prize__badge--stack {
    flex-direction: row;
    gap: 16px;
    height: 44px;
  }

  .prize__amount { font-size: 24px; line-height: 31.2px; height: 31px; }

  /* Top-3 в колонку */
  .top3s { padding-block: 24px; }
  .top3s__grid { flex-direction: column; gap: 8px; height: auto; }

  /* Momentum / Rules друг под другом — в ряд две панели не вмещают текст правил */
  .momentum-section { flex-direction: column; height: auto; }
  .momentum, .rules { width: 100%; flex: none; height: auto; }

  /* высота auto → space-between схлопнул бы строки, поэтому фиксированный gap */
  .momentum__list { justify-content: flex-start; gap: 16px; }

  /* длинные заголовки панелей («ПРАВИЛА НАЧИСЛЕНИЯ») переносятся, не обрезаются */
  .panel-title { white-space: normal; }
  .momentum .panel-title { height: auto; }
}

@media (max-width: 768px) {
  .main { gap: 24px; }
}

/* ─── ≤450: мобильная раскладка ───────────────────────────────────── */
/* Шапка в две строки: логотип+кнопка сверху, «Обновлено»+язык снизу.
   Включается с 700px — на одной строке всё перестаёт помещаться раньше 450. */
@media (max-width: 700px) {
  .header__inner {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    height: 128px;
    padding: 24px 0 8px;
  }

  .header__logo  { order: 0; }
  .header__cta   { order: 1; width: 180px; margin-left: auto; padding: 13px 24px; }
  .header__break { order: 2; display: block; width: 100%; height: 0; }
  .header__updated { order: 3; margin-left: 0; }
  .lang { order: 4; margin-left: auto; }
}

@media (max-width: 450px) {
  /* Секции */
  .main { gap: 24px; }
  .prizes, .ranking { gap: 16px; }
  .top3s { gap: 16px; }

  .section-title {
    font-size: 36px;
    line-height: 1.05;
    /* без фикс-высоты — иначе перенос второго слова теряет градиент и «испаряется» */
  }

  /* Hero */
  .hero__card {
    gap: 16px;
    height: auto;
    padding: 16px;
  }

  .hero__top { gap: 16px; }
  .hero__details { gap: 24px; }
  .hero__info { gap: 8px; }

  .hero__title {
    width: 100%;
    height: auto;
    font-weight: 600;
    /* шрифт адаптивный от ширины карточки — не фикс 64px, иначе вылезает за экран */
    font-size: clamp(32px, 15cqi, 64px);
    line-height: 1.05;
  }

  .hero__desc {
    height: auto;
    font-size: 16px;
    font-weight: 500;
    line-height: 20.8px;
  }

  .hero__buttons { gap: 8px; }
  .hero__btn-primary,
  .hero__btn-ghost { flex: 1; width: auto; }

  /* Инфо-боксы: подпись и значение в строку */
  .hero__stats { flex-direction: column; gap: 8px; }

  .stat-box {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 37px;
    padding: 8px 16px;
  }

  .stat-box--update { width: 100%; }
  .stat-box__value { font-size: 16px; line-height: 20.8px; }

  /* Лидер */
  .leader__card { height: auto; padding: 16px; }
  .leader__name { height: 47px; font-size: 36px; font-weight: 700; line-height: 46.8px; }
  .leader__additional { height: auto; font-size: 14px; line-height: 18.2px; }
  .leader__stats { flex-direction: column; }
  .stat-box--plain { flex: none; }

  /* (2×2 перенесено в ≤768) */

  /* Нижние панели */
  .momentum, .rules { gap: 16px; padding: 16px; }
  /* На 360 «DAILY MOMENTUM» не влезает в строку → перенос (в макете h=94, 2 строки) */
  .panel-title { font-size: 36px; line-height: 46.8px; white-space: normal; }
  .momentum .panel-title { height: auto; }
  .rules__list { gap: 8px; }
  .rule { height: auto; }
  .btn--refresh { width: auto; }
}

/* ─── ≤400: раскладка фрейма 360 ──────────────────────────────────── */
@media (max-width: 400px) {
  .hero__buttons { flex-direction: column; }
  .hero__btn-primary,
  .hero__btn-ghost { width: 100%; }

  .totals { flex-direction: column; flex-wrap: nowrap; }

  /* Participants Info: иконка, сразу за ней значение (main=FLEX_START) */
  .total {
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    height: 69px;
    padding: 8px 16px;
  }
  .total__badge { flex: none; }
}

/* ─── Адаптив: контролы таблицы, призовые карточки, трофеи ─────────── */

/* Trophy на десктопе абсолютный; на ≤768 карточка горизонтальная и он в потоке */
/* Заголовок и контролы в ряд не помещаются уже с ~1100 — переносим контролы
   под заголовок начиная с 1200 (иначе кнопка «Только призовая зона» уходит
   за край, а заголовок обрезается до «ПОЛНЫЙ»). */
@media (max-width: 1200px) {
  .ranking__head {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    height: auto;
  }

  .ranking__controls {
    margin: 0;
    gap: 16px;
  }

  /* Список и Ввод равной ширины; min-width:0 — чтобы input сжимался и делил поровну */
  .select { flex: 1 1 0; min-width: 0; width: auto; }
  .field  { flex: 1 1 0; min-width: 0; width: auto; }
  .btn--filter { flex: none; }

  .select__arrow { left: auto; right: 20px; }
}

@media (max-width: 450px) {
  .ranking__head { gap: 16px; }

  .ranking__controls {
    flex-direction: column;
    gap: 8px;
  }

  .field, .select, .btn--filter { width: 100%; flex: none; }
}

/* ─── Top-3 компактный: карточка в колонку, боксы горизонтально (≤1200) ─ */
@media (max-width: 1200px) {
  .top3 { height: auto; padding: 16px; gap: 8px; }

  .top3__head { height: 44px; }
  .top3__num { width: 44px; height: 44px; font-size: 24px; line-height: 31.2px; }
  .top3__amount { font-size: 24px; font-weight: 600; }

  .top3__details { gap: 4px; height: 76px; }
  .top3__meta { height: 18px; }

  .top3__stats { height: 102px; }   /* First Place Stats h=102 */
  .top3__col { gap: 8px; }

  /* Points Info Container: горизонтальный */
  .top3 .stat-box {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 47px;
    padding: 8px 16px;
  }

  /* при длинных числах два столбца боксов не влезают → один столбец */
  .top3__stats { flex-wrap: wrap; height: auto; }
  .top3__col { flex: 1 1 100%; }
}

/* ─── Панели momentum / rules ─────────────────────────────────────────
   На узких экранах высоту НЕ фиксируем: заголовок панели может занять две
   строки (RU «ДИНАМИКА ЗА ДЕНЬ»), а число строк динамики меняется (1–5).
   Фикс-высота душила контент и он наезжал на соседний блок. Высота = auto,
   строки через gap (не space-between, который схлопывается без фикс-высоты). */

@media (max-width: 450px) {
  /* Top-3: боксы снова вертикальные, h=73 */
  .top3 .stat-box {
    flex-direction: column;
    align-items: flex-start;
    height: 73px;
    padding: 8px 16px;
  }

  /* Momentum: строки через фикс-gap, высота панели по контенту */
  .momentum { padding: 16px; gap: 16px; }
  .momentum__list { flex: none; justify-content: flex-start; gap: 24px; }
  .rules { padding: 16px; }

  /* Scoring Rules Title: заголовок и кнопка друг под другом */
  .rules__head { flex-direction: column; align-items: stretch; gap: 8px; height: auto; }
  .btn--refresh { width: 100%; margin-top: 0; }

  /* Заголовок hero переносится сам */
  .hero__title { height: auto; }
}

/* ─── Точечные фиксы адаптива (сверены замерами) ───────────────────── */
@media (max-width: 1100px) {
  /* head таблицы: gap 24 (Frame 2147223176) */
  .ranking__head { gap: 24px; }
}

@media (max-width: 450px) {
  /* на 450/360 gap секции 16 */
  .ranking__head { gap: 16px; }
  .leader__additional { height: 21px; font-size: 16px; line-height: 20.8px; }
}

@media (max-width: 400px) {
  /* Кнопки в колонке не должны растягиваться по высоте */
  .hero__btn-primary,
  .hero__btn-ghost { flex: none; height: 44px; }
}

@media (max-width: 450px) {
  .top3__stats { height: 154px; }   /* боксы становятся вертикальными */
}

/* ─── Состояния. Взяты из прототипных связей Figma (ON_HOVER / ON_CLICK).
   Переходы в макете заданы как мгновенные — transition не добавляем. ─── */

/* Hover-состояния кнопок — из компонентов Figma (Property 1=Variant2).
   Основная: фон темнеет, текст становится белым. */
.btn:hover {
  background: linear-gradient(to top, #05781a 0%, #1a9322 55.74%, #075e0f 122.29%);
  color: var(--white);
}

/* «Только призовая зона»: полупрозрачный градиент → яркий, текст тёмный */
.btn--filter:hover {
  background: var(--btn-gradient);
  color: var(--on-green);
}

/* Вторичная («Призовой фонд»): прозрачная → белая заливка, текст тёмный */
.btn--ghost:hover {
  background: var(--white);
  color: var(--on-green);
}

/* «Показать еще» / «Обновить данные» — заметнее при наведении */
.btn--more:hover,
.btn--refresh:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Поле поиска: рамка #106706 → #26e610 (Ввод → Property 1=Variant2) */
.field:hover,
.field:focus-visible,
.select:hover {
  border-color: var(--green);
}

/* Строки таблицы: подсветка до 10% белого (Main Container → Variant2/3) */
.rank-row:hover,
.rank-row:nth-child(odd):hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Доступность: видимый фокус там, где элементы интерактивные */
.btn:focus-visible,
.lang__btn:focus-visible,
.select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ─── Трофеи: горизонтальные карточки (≤1200), рамка не режет ───────── */
@media (max-width: 1200px) {
  /* порядок мест: 1, 2, 3, 4, 5 */
  .prize--1 { order: 1; }
  .prize--2 { order: 2; }
  .prize--3 { order: 3; }
  .prize--4 { order: 4; }
  .prize--5 { order: 5; }

  /* содержимое карточки: бейдж сверху, сумма снизу */
  .prize__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 91px;
  }

  .prize__badge,
  .prize__badge--stack { flex-direction: row; gap: 16px; height: 44px; }
  .prize__num { width: 44px; height: 44px; font-size: 24px; line-height: 31.2px; }
  .prize__amount { height: 31px; font-size: 24px; line-height: 31.2px; }

  .prize,
  .prize--1 { align-items: flex-start; justify-content: flex-start; }
  .prize--1 { padding: 16px; }

  /* специфичность как у десктопных правил, иначе они перебьют */
  .prize--1 .prize__trophy,
  .prize--2 .prize__trophy,
  .prize--3 .prize__trophy,
  .prize--4 .prize__trophy,
  .prize--5 .prize__trophy {
    left: auto;
    right: 16px;
    top: 16px;
    height: 91px;
    overflow: visible;             /* clipsContent: false — режет карточка */
  }

  .prize--1 .prize__trophy { width: 146px; }
  .prize--2 .prize__trophy,
  .prize--3 .prize__trophy,
  .prize--4 .prize__trophy,
  .prize--5 .prize__trophy { width: 136px; }

  .prize--2 .prize__trophy img { left: 0;      top: -13.8px; width: 186.6px; height: 195.1px; }
  .prize--3 .prize__trophy img { left: -6.9px; top: 0;       width: 195.3px; height: 171.8px; display: block; }
  .prize--4 .prize__trophy img { left: -17.2px; top: 22.4px; width: 209.9px; height: 148.4px; }
  .prize--5 .prize__trophy img { left: 0;      top: 39.8px;  width: 195.8px; height: 131.1px; }
}

@media (max-width: 450px) {
  .prize--1 .prize__trophy { width: 185px; }
  .prize--2 .prize__trophy,
  .prize--3 .prize__trophy,
  .prize--4 .prize__trophy,
  .prize--5 .prize__trophy { width: 161px; }
}

@media (max-width: 400px) {
  .prize--1 .prize__trophy { width: 140px; }
  .prize--2 .prize__trophy,
  .prize--3 .prize__trophy,
  .prize--4 .prize__trophy,
  .prize--5 .prize__trophy { width: 116px; }
}


/* ширины полос: класс вместо style="" — строгий CSP не пускает инлайн-стили */
.w-0 { width: 0%; }
.w-1 { width: 1%; }
.w-2 { width: 2%; }
.w-3 { width: 3%; }
.w-4 { width: 4%; }
.w-5 { width: 5%; }
.w-6 { width: 6%; }
.w-7 { width: 7%; }
.w-8 { width: 8%; }
.w-9 { width: 9%; }
.w-10 { width: 10%; }
.w-11 { width: 11%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-14 { width: 14%; }
.w-15 { width: 15%; }
.w-16 { width: 16%; }
.w-17 { width: 17%; }
.w-18 { width: 18%; }
.w-19 { width: 19%; }
.w-20 { width: 20%; }
.w-21 { width: 21%; }
.w-22 { width: 22%; }
.w-23 { width: 23%; }
.w-24 { width: 24%; }
.w-25 { width: 25%; }
.w-26 { width: 26%; }
.w-27 { width: 27%; }
.w-28 { width: 28%; }
.w-29 { width: 29%; }
.w-30 { width: 30%; }
.w-31 { width: 31%; }
.w-32 { width: 32%; }
.w-33 { width: 33%; }
.w-34 { width: 34%; }
.w-35 { width: 35%; }
.w-36 { width: 36%; }
.w-37 { width: 37%; }
.w-38 { width: 38%; }
.w-39 { width: 39%; }
.w-40 { width: 40%; }
.w-41 { width: 41%; }
.w-42 { width: 42%; }
.w-43 { width: 43%; }
.w-44 { width: 44%; }
.w-45 { width: 45%; }
.w-46 { width: 46%; }
.w-47 { width: 47%; }
.w-48 { width: 48%; }
.w-49 { width: 49%; }
.w-50 { width: 50%; }
.w-51 { width: 51%; }
.w-52 { width: 52%; }
.w-53 { width: 53%; }
.w-54 { width: 54%; }
.w-55 { width: 55%; }
.w-56 { width: 56%; }
.w-57 { width: 57%; }
.w-58 { width: 58%; }
.w-59 { width: 59%; }
.w-60 { width: 60%; }
.w-61 { width: 61%; }
.w-62 { width: 62%; }
.w-63 { width: 63%; }
.w-64 { width: 64%; }
.w-65 { width: 65%; }
.w-66 { width: 66%; }
.w-67 { width: 67%; }
.w-68 { width: 68%; }
.w-69 { width: 69%; }
.w-70 { width: 70%; }
.w-71 { width: 71%; }
.w-72 { width: 72%; }
.w-73 { width: 73%; }
.w-74 { width: 74%; }
.w-75 { width: 75%; }
.w-76 { width: 76%; }
.w-77 { width: 77%; }
.w-78 { width: 78%; }
.w-79 { width: 79%; }
.w-80 { width: 80%; }
.w-81 { width: 81%; }
.w-82 { width: 82%; }
.w-83 { width: 83%; }
.w-84 { width: 84%; }
.w-85 { width: 85%; }
.w-86 { width: 86%; }
.w-87 { width: 87%; }
.w-88 { width: 88%; }
.w-89 { width: 89%; }
.w-90 { width: 90%; }
.w-91 { width: 91%; }
.w-92 { width: 92%; }
.w-93 { width: 93%; }
.w-94 { width: 94%; }
.w-95 { width: 95%; }
.w-96 { width: 96%; }
.w-97 { width: 97%; }
.w-98 { width: 98%; }
.w-99 { width: 99%; }
.w-100 { width: 100%; }

/* ─── Full Ranking: интерактив (JS) ────────────────────────────────── */
.rank-row.is-hidden { display: none; }

.btn--filter.is-active {
  background: var(--btn-gradient);
  color: var(--on-green);
}

.ranking__empty {
  padding: 24px;
  text-align: center;
  color: var(--muted, rgba(244, 255, 247, 0.66));
  font-size: 16px;
}
.ranking__empty[hidden] { display: none; }