/* ============================================================================
   Раздел «Конкурс недели»: эмблема на карточке баланса и экран раздела.

   ЧТО ЗДЕСЬ ГЛАВНОЕ

   1. **Эмблема позиционируется правилом `.balance > .contest-emblem`, а не
      `.contest-emblem`.** В screens.css живёт `.balance > *:not(canvas)
      { position: relative }` - оно возвращает детей карточки в поток, и его
      вес (0,1,1) БОЛЬШЕ веса одного класса (0,1,0). Напиши тут просто
      `.contest-emblem { position: absolute }` - кнопка встала бы обычной
      строкой и растянула карточку баланса. Ровно на этом 28.07.2026 холст
      гильоша вытянул карточку до 750 px, и в screens.css рядом стоит
      комментарий об этом.

   2. **Цикл двигает только `opacity`, `scale` и золотое свечение** (решение 3
      спеки затеи). Смещения по экрану нет намеренно: кнопка стоит в углу
      карточки с балансом, и уезжающая кнопка ловила бы нажатия там, где её
      уже не видно.

   3. **Локальный тормоз `prefers-reduced-motion` обязателен.** Глобальный
      тормоз в chekanka.css гасит анимацию всем - и эмблема, чей ПОКАЗ держит
      анимация, осталась бы прозрачной навсегда: человек, попросивший систему
      обойтись без анимаций, потерял бы вход в раздел вовсе.

   4. **Число баланса эмблема не перекрывает.** Это свойство геометрии, а не
      стиля, и доказывает его только замер `elementFromPoint` в браузере
      (проба T7 на 320 и 390 px). Здесь оно лишь обеспечено: 40 px в углу,
      отступ 10 px, и у карточки хватает высоты под заголовок.

   Палитра и высоты - токены chekanka.css, своих цветов тут нет ни одного.
   ========================================================================= */

/* ------------------------------------------ Эмблема на карточке баланса -- */

.balance > .contest-emblem {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  /* Медаль лежит в кадре диском с прозрачными углами, поэтому свечение
     drop-shadow повторяет её форму, а не квадрат ассета. */
  animation: contest-mystic 8s var(--snap) infinite;
}

.contest-emblem img {
  display: block;
  width: 100%;
  height: 100%;
  /* Курсор обязан попадать в КНОПКУ, а не в картинку внутри неё: так проба
     читает попадание однозначно, а нажатие всё равно доходит до кнопки. */
  pointer-events: none;
}

/* Нажатие проседает, как у всего нажимаемого в приложении. */
.contest-emblem:active { transform: scale(.94); }

/* Цикл «проявляется из ничего - держится - растворяется - пауза».
   1,2 с проявление (0-15%), 3 с удержание (15-52,5%), 1,2 с растворение
   (52,5-67,5%), 2,6 с пауза (67,5-100%). Итого 8 с - середина рамок 7-9 с. */
@keyframes contest-mystic {
  0%     { opacity: 0;   transform: scale(.82); filter: drop-shadow(0 0 0 rgba(216,162,74,0)); }
  15%    { opacity: 1;   transform: scale(1);   filter: drop-shadow(0 0 7px rgba(216,162,74,.55)); }
  52.5%  { opacity: .96; transform: scale(1);   filter: drop-shadow(0 0 3px rgba(216,162,74,.26)); }
  67.5%  { opacity: 0;   transform: scale(.88); filter: drop-shadow(0 0 0 rgba(216,162,74,0)); }
  100%   { opacity: 0;   transform: scale(.82); filter: drop-shadow(0 0 0 rgba(216,162,74,0)); }
}

/* Тормоз: эмблема стоит на месте и видна целиком. */
@media (prefers-reduced-motion: reduce) {
  .balance > .contest-emblem {
    animation: none;
    opacity: 1;
    transform: none;
    filter: drop-shadow(0 0 3px rgba(216,162,74,.26));
  }
}

/* ------------------------------------------------------ Экран раздела --- */

/* Шапка фонда: одно золото на зону внимания - число фонда. */
.ct-fund { display: flex; gap: 14px; align-items: center; }
.ct-fund__col { min-width: 0; flex: 1 1 auto; }

.ct-fund__head { display: flex; align-items: center; gap: 7px; }
/* Знак раздела: та же медаль, что на карточке баланса, - экран узнаётся по
   ней, а не по одному заголовку. Шапку потока рисует ops.js, чужой файл. */
.ct-fund__ico { display: block; flex: none; opacity: .9; }

.ct-fund__hero {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 8px;
  color: var(--gold);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(255,255,255,.06);
}
.ct-fund__unit { font-size: 14px; font-weight: 600; letter-spacing: .02em; opacity: .72; }
.ct-fund__sub { margin-top: 7px; font-size: 12.5px; line-height: 1.4; color: var(--app-mute); }

/* Кольцо времени до конца недели: тот же приём, что у свежести курса
   (screens.css .ring), только крупнее и с числом внутри. */
.ct-ring {
  position: relative;
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--p, 0) * 1%), rgba(255,255,255,.08) 0);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5);
}
.ct-ring__in {
  position: absolute;
  inset: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 50%;
  background: var(--app-200);
  box-shadow: var(--inset);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.ct-ring__n { font-size: 15px; font-weight: 700; line-height: 1; }
.ct-ring__u { font-size: 9px; letter-spacing: .1em; color: var(--app-mute); text-transform: uppercase; }

/* Моё место. */
.ct-me { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ct-me__rank {
  flex: none;
  min-width: 46px;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: center;
  background: rgba(0,0,0,.26);
  box-shadow: var(--inset);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 700;
}
.ct-me__txt { min-width: 0; font-size: 13px; line-height: 1.45; color: var(--app-mute); }
.ct-me__txt b { color: var(--app-ink); font-weight: 600; }

/* Таблица лидеров. */
.ct-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.ct-row + .ct-row { margin-top: 4px; }
.ct-row__n {
  flex: none;
  width: 22px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--app-mute);
  text-align: right;
}
.ct-row__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-row__v {
  flex: none;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  white-space: nowrap;
  color: var(--app-mute);
}
/* Своя строка - единственная подсвеченная: её ищут глазами первой. */
.ct-row.is-me {
  background: var(--gold-dim);
  border-color: var(--gold-line);
}
.ct-row.is-me .ct-row__name,
.ct-row.is-me .ct-row__v { color: var(--gold); }

/* Мои рефералы: имя и дата столбиком, статус словом справа.
   Одной строкой на 320 px имени не оставалось места вовсе - оно съедалось
   пилюлей и датой до многоточия, а у части строк исчезало целиком (замер
   пробы T7 на 320 px). */
.ct-ref { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.ct-ref + .ct-ref { border-top: 1px solid var(--app-300); }
.ct-ref__col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-ref__name {
  font-family: var(--mono);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-ref__when { font-size: 11.5px; color: var(--app-mute); }
.ct-ref .pill { flex: none; }

/* Ссылка приглашения: утопленная прорезь, как у копируемых значений. */
.ct-link {
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.3);
  box-shadow: var(--inset);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.45;
  /* Ссылка длинная и обязана переноситься: на 320 px иначе появляется
     горизонтальная прокрутка всего экрана. */
  word-break: break-all;
}
.ct-acts { display: flex; gap: 10px; margin-top: 10px; }
.ct-acts .btn { flex: 1 1 0; min-width: 0; }

/* Переключатель уведомлений. */
.ct-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 0 0;
  text-align: left;
}
.ct-switch__t { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.ct-switch__s { display: block; margin-top: 3px; font-size: 12px; color: var(--app-mute); }
.ct-switch__box {
  flex: none;
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(0,0,0,.34);
  box-shadow: var(--inset);
  transition: background var(--t-fast) var(--snap);
}
.ct-switch__box::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--app-400);
  box-shadow: var(--e1);
  transition: transform var(--t-fast) var(--snap), background var(--t-fast) var(--snap);
}
.ct-switch.is-on .ct-switch__box { background: var(--gold-dim); box-shadow: var(--inset), inset 0 0 0 1px var(--gold-line); }
.ct-switch.is-on .ct-switch__box::after { transform: translateX(18px); background: var(--gold); }
.ct-switch[disabled] { opacity: .55; }

/* Прошлые победители - компактные строки. */
.ct-win { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; font-size: 13px; }
.ct-win + .ct-win { border-top: 1px solid var(--app-300); }
.ct-win__when { flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--app-mute); }
.ct-win__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-win__fund {
  flex: none;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  white-space: nowrap;
}

/* Правила: нумерованный список без своей типографики. */
.ct-rules { margin: 10px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.5; }
.ct-rules li + li { margin-top: 7px; }