/* IndexPage — перенос «glass-look» из OBS overlay (pages/stream/StreamPage.css `html.obs-mode`)
   на главную страницу. User-driven: «мне нравятся текущие наработки по ростеру и актуальному
   слову на обс странице, перенеси их в игру на сайт».

   Применяем только к ID'шным элементам (#active-guess + #players-roster), чтобы не задеть
   компоненты в других местах (history rows, разные mount'ы PlayersRoster и т.п.). */

/* ===== Активное слово (#active-guess) — glass-фон + яркая заливка по рангу ===== */
#active-guess {
  background: var(--panel-solid);
  -webkit-backdrop-filter: var(--blur-light);
          backdrop-filter: var(--blur-light);
}
#active-guess::before {
  opacity: 0.30;
  filter: saturate(1.3);
}
/* Flash при появлении нового слова: ярче + финальный кадр match'ит base — без
   «загорается заново» при снятии .is-new (как в obs StreamPage.css:339-348). */
#active-guess.is-new::before {
  animation-name: activeGuessBarFlashObs;
}
@keyframes activeGuessBarFlashObs {
  0%   { opacity: 0.55; filter: brightness(1.5) saturate(1.7); }
  100% { opacity: 0.30; filter: saturate(1.3); }
}

/* ===== Ростер игроков (#players-roster) — подложка как в obs ===== */
#players-roster {
  background: var(--panel-solid);
  -webkit-backdrop-filter: var(--blur-light);
          backdrop-filter: var(--blur-light);
  border-radius: var(--radius-sm, 10px);
  padding: 6px 12px;
  min-height: 44px;
  box-sizing: border-box;
}
/* Аватарки центрируются по вертикали: padding-top = padding-bottom .pl-emo (5px),
   даёт симметрию внутри подложки. */
#players-roster .pl-emo,
#players-roster .pl-stream-head { padding-top: 5px; }

/* Контейнер аватарок не должен вылазить за подложку. Mask-fade у правого края — последняя
   аватарка плавно растворяется (как в obs `.pl-emos-bottom`). */
#players-roster .pl-emos,
#players-roster .pl-emos-bottom {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}