/* Счётчик кристаллов: вверху по центру полосы вкладок.

   Полоса вкладок (.tabs в css/base.css) — flex-строка, в которой строка опыта
   прижата вправо через margin-left: auto, а вкладки добавляются слева. Ни один
   набор auto-отступов в такой строке не даёт настоящего центра полосы: свободное
   место делится между отступами, и элемент встаёт посередине промежутка между
   вкладками и строкой опыта, а не посередине окна. Поэтому счётчик вынут из
   потока и центрируется относительно самой полосы.

   Точка отсчёта объявляется здесь, а не в css/base.css: файл подключается после
   него, специфичность та же, и при равной специфичности побеждает последнее
   правило. Сам base.css при этом не тронут. */
.tabs { position: relative; }

.crystals {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--fg);
  white-space: nowrap;
  /* Счётчик ничего не нажимает. На узком окне, где вкладки дотягиваются до
     середины, он не должен перехватывать клик по вкладке под собой — это и
     есть гарантия «ничего не перекрывает», а не надежда на то, что места
     хватит. */
  pointer-events: none;
}

.crystals-icon {
  /* Тот же голубой, что у .c-blue: холодный камень, а не подсветка успеха —
     зелёный в приложении означает «шаг выполнен». */
  color: #6ec6ff;
  font-size: 0.9375rem;
  line-height: 1;
  display: inline-block;
}

/* Сердечко вместо ромба — и розовый вместо голубого, тот же, что у падающих
   сердец в css/celebrate.css. Класс ставится по выбранному значку, а не по
   логину: кто вошёл, спрашивают один раз, в LT.ranks.isZanna. */
.crystals-icon-heart { color: #ff5c8a; }

.crystals-count {
  font-weight: 600;
  /* Цифры одной ширины: без этого растущее число дёргалось бы на каждом кадре,
     а вместе с ним и вся центрированная строка. */
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: left;
}

@keyframes lt-crystal-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.crystals-icon-pop { animation: lt-crystal-pop 520ms ease-out; }

/* «+30» справа от числа: вверх и в прозрачность. Вверх, но не выше полосы —
   полоса вкладок стоит у самого верха окна, и всплывающая над ней надпись
   была бы обрезана краем экрана. */
.crystals-plus {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
  animation: lt-crystal-plus 620ms ease-out both;
}

@keyframes lt-crystal-plus {
  0% { opacity: 0; transform: translateY(-10%) scale(0.85); }
  25% { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(-150%) scale(1); }
}

/* Пока свободная середина в полосе есть — счётчик стоит в центре окна. Когда
   вкладки дорастают до неё (узкое окно, крупный масштаб текста), он
   возвращается в поток и встаёт рядом со строкой опыта: лучше сдвинуться, чем
   лечь поверх вкладки. */
@media (max-width: 1200px) {
  .crystals {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin-left: 10px;
  }
}

/* То же, что и у празднований: движение выключается системной настройкой.
   Число при этом всё равно меняется — js/ui/crystals-ui.js в таком случае
   просто подставляет новое значение, не запуская кадры. */
@media (prefers-reduced-motion: reduce) {
  .crystals-icon-pop { animation: none; }
  .crystals-plus { display: none; }
}