/* ActiveGuess — plate под input после submit (4 состояния). */

.active-guess {
  position: relative;
  margin-top: 8px; padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  overflow: hidden;
  /* Стабильная высота при быстрой смене слов (стрим-шторм): контент строки жёстко
     клэмпится (.word height ниже), min-height страхует пустые состояния — иначе
     эмодзи/аватарка/ник меняли высоту блока на ±2px и вся страница ниже прыгала. */
  min-height: 44px; box-sizing: border-box;
  /* Короткий откат рамки/glow когда .is-new снимается — синхронно с AttemptsList. */
  transition: border-color 90ms ease, box-shadow 90ms ease;
}
.active-guess[hidden] { display: none; }

/* Border-color по состоянию — статичный, без entry-glow. Transition на .active-guess
   сглаживает смену цвета при переходе valid/not-found/repeat. */
.active-guess.repeat    { border-color: var(--mid); }
.active-guess.not-found { border-color: var(--far); }
.active-guess.valid     { border-color: var(--accent); }

/* Live chat preview — сырое сообщение из Twitch-чата (28 символов, без dictionary lookup).
   Throttled ≈62 fps на сервере + rAF на клиенте. Без entry-анимации, без цветной плашки,
   приглушённый стиль чтобы отличать от валидного attempt'а. */
.active-guess.preview { border-color: var(--border); opacity: 0.9; }
.active-guess.preview::before { display: none; }
.active-guess.preview .rank  { color: var(--muted); font-weight: 400; }

/* При смене слова: плашка ::before плавно тянется к новой ширине (transition на width
   в базовом ::before — 400мс). Потом, как только полоса дошла до точки назначения,
   стартует fade-out keyframes (opacity + filter brightness → none) за 750мс.
   animation-delay = 400ms + backwards держит 0%-кадр до старта (плашка яркая всё время
   движения). Базовый и финальный opacity = row::before (см. styles/row.css) — после
   окончания анимации цвет плашки совпадает с заливкой ряда в AttemptsList. */
.active-guess.is-new::before {
  animation: activeGuessBarFlash 750ms ease-out 400ms backwards;
}
@keyframes activeGuessBarFlash {
  0%   { opacity: 0.32; filter: brightness(1.15) saturate(1.1); }
  100% { opacity: 0.16; filter: none; }
}
@keyframes activeGuessBarFlashLight {
  0%   { opacity: 0.45; filter: brightness(1.15) saturate(1.1); }
  100% { opacity: 0.28; filter: none; }
}
@media (prefers-color-scheme: light) {
  .active-guess.is-new::before { animation-name: activeGuessBarFlashLight; }
}
[data-theme="light"] .active-guess.is-new::before { animation-name: activeGuessBarFlashLight; }

.active-guess::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--w, 0%); background: var(--c, var(--miss));
  opacity: 0.16;
  /* Полоса плавно тянется к новой ширине за 400мс — fade-out (animation) стартует
     ровно после движения, синхронизировано в keyframe-delay. */
  transition: width 400ms ease-out;
  pointer-events: none;
}
@media (prefers-color-scheme: light) {
  .active-guess::before { opacity: 0.28; }
}
[data-theme="light"] .active-guess::before { opacity: 0.28; }
.active-guess > * { position: relative; }

.active-guess .word {
  font-size: 17px; font-weight: 600; letter-spacing: 0.2px;
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap;
  /* Центрируем слово/аватарку/ник по вертикали (как в .row .w). */
  display: inline-flex; align-items: center;
  /* Жёсткий клэмп высоты строки: разные варианты контента (эмодзи-глиф выше текста,
     аватарка 18px, ник 12px) больше НЕ раздувают блок — высокий глиф визуально
     центрируется и чуть выступает за line-box, layout не двигается. */
  height: 22px;
  /* Узкий fade у правого края .word — прямо перед .rank (теперь auto-width flex-item).
     Длинное слово (напр. «комплектпотребкооперация») плавно гаснет на 14px перед цифрой,
     никнейм не переносится на вторую строку — высота .active-guess остаётся стабильной.
     Идентично .row .w из styles/row.css — этот же класс применяется в streamHistory. */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(to right, black calc(100% - 14px), transparent 100%);
}
.active-guess .rank {
  flex: 0 0 auto;
  padding-left: 8px;
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px;
}
.active-guess .rank.miss { color: var(--far); font-weight: 600; }

/* Никнейм игрока в active-guess (.word .nick) — общий стиль с .row .w .nick. */
.active-guess .word .nick { margin-left: 10px; letter-spacing: 0.2px; }
.active-guess .word .lamp + .nick { margin-left: 0; }
.active-guess .word .nick .emo { font-size: 1em; margin-right: 0; }
.active-guess .word .nick .name {
  font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 4px;
}
.active-guess .word .lamp { margin: 0; }