/* ReactionsBar — capsule с 6 кнопками (👋💪❤️🧠💡 + 🎉 в win-режиме). */

.reactions-bar {
  position: fixed;
  left: 50%;
  bottom: calc(86px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: 280px; max-width: calc(100vw - 32px);
  display: flex;
  background: rgba(10, 13, 20, 0.55);
  border: 1px solid var(--border);
  border-radius: 100px;
  -webkit-backdrop-filter: var(--blur-strong);
          backdrop-filter: var(--blur-strong);
  padding: 6px;
  z-index: var(--z-overlay);
  gap: 4px;
  box-shadow: var(--shadow-capsule);
  overflow: hidden;
  transition: width 0.32s cubic-bezier(.4, .0, .2, 1),
              background 0.28s ease,
              border-color 0.28s ease;
}
.reactions-bar[hidden] { display: none !important; }

/* PRO default-bar (5 эмодзи): золотой фон + утолщённый gold border (чтобы не пикселило).
   Заметно отличается от обычной хлопушки (rb-win) без агрессивного свечения. */
.reactions-bar:not(.rb-win) {
  background:
    linear-gradient(135deg, rgba(var(--gold-rgb), 0.28), rgba(var(--gold-rgb), 0.10)),
    rgba(10, 13, 20, 0.55);
  border: 2px solid rgba(var(--gold-rgb), 0.55);
}
@media (prefers-color-scheme: light) {
  .reactions-bar:not(.rb-win) {
    background:
      linear-gradient(135deg, rgba(var(--gold-rgb), 0.32), rgba(var(--gold-rgb), 0.14)),
      rgba(255, 255, 255, 0.65);
  }
}
[data-theme="light"] .reactions-bar:not(.rb-win) {
  background:
    linear-gradient(135deg, rgba(var(--gold-rgb), 0.32), rgba(var(--gold-rgb), 0.14)),
    rgba(255, 255, 255, 0.65);
}

.reaction-btn {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: inherit;
  padding: 7px 4px;
  border-radius: 100px;
  font-size: 20px; line-height: 1.1;
  cursor: pointer;
  transition:
    transform 0.26s cubic-bezier(.4, .0, .2, 1),
    opacity   0.26s cubic-bezier(.4, .0, .2, 1),
    flex-basis 0.32s cubic-bezier(.4, .0, .2, 1),
    padding   0.32s cubic-bezier(.4, .0, .2, 1),
    max-width 0.32s cubic-bezier(.4, .0, .2, 1),
    background-color var(--t-quick);
}

/* Свёрнутое состояние: только ❤️ (rb-anchor) видна, остальные спрятаны. */
.reactions-bar.collapsed:not(.rb-win) {
  width: 60px;
  gap: 0;
  justify-content: center;
}
.reactions-bar.collapsed:not(.rb-win) .rb-default:not(.rb-anchor) {
  opacity: 0; transform: scale(0.4);
  flex: 0 0 0; max-width: 0; padding: 0; min-width: 0;
  pointer-events: none;
}
.reactions-bar.collapsed:not(.rb-win) .rb-anchor { opacity: 0.38; }
.reactions-bar.collapsed:not(.rb-win) .rb-anchor:hover { opacity: 1; }

@media (hover: hover) {
  .reaction-btn:hover { background: var(--surface-hover); }
}

/* Pulse при нажатии — общий keyframes для ReactionsBar + BottomNav. */
.reaction-btn.pulse { animation: basePulse 0.38s ease-out; }
@keyframes basePulse {
  0%   { transform: scale(1);    background-color: transparent; }
  40%  { transform: scale(1.32); background-color: rgba(255,255,255,0.22); }
  100% { transform: scale(1);    background-color: transparent; }
}

@media (prefers-color-scheme: light) {
  .reactions-bar { background: rgba(255, 255, 255, 0.55); }
}
[data-theme="light"] .reactions-bar { background: rgba(255, 255, 255, 0.55); }

/* Win-mode: только хлопушка, остальные скрыты. */
.reactions-bar.rb-win .rb-default { display: none; }
.reactions-bar.rb-win { width: 72px; }
.reactions-bar:not(.rb-win) .rb-cheer { display: none; }

/* === Эффекты — летающие частицы. Живут поверх .win/body. === */

.confetti-piece {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  animation: confettiCannon 1.5s cubic-bezier(.2,.7,.5,1) forwards;
}
.confetti-piece.confetti-emoji {
  width: auto; height: auto;
  background: none !important;
  border-radius: 0;
  font-size: 22px; line-height: 1;
}
/* Аватарка зрителя в залпе при `!`-cheer в стриме (img-tag, не текст). Кругленькая,
   немного больше эмодзи (28×28). object-fit:cover на случай не-квадратных аватарок. */
.confetti-piece.confetti-ava {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent !important;
  object-fit: cover;
}
/* Хлопушки из одной нижней пушки (allCheered):
   - confettiBgMotion (transform): rise (ease-out до пика) → hold (~0.3с зависания на пике)
     → fall (короткое ease-in ускорение, затем linear ровное падение вниз) за 4с.
     Per-segment easing через animation-timing-function в keyframes.
   - confettiBgBlink (opacity): мерцание 1↔0.05 с самого вылета, бесконечно.
   JS удаляет каждую частицу в случайный момент во время падения — выглядит как «погасли».
   z-index 0 — сзади контента (--z-content), но поверх body-фона. */
.confetti-piece.confetti-bg {
  width: 12px; height: 12px;
  z-index: 0;
  animation:
    confettiBgMotion var(--motion-dur, 8s) forwards,
    confettiBgBlink  var(--blink-dur, 0.5s) ease-in-out infinite;
}
@keyframes confettiBgMotion {
  0%   { transform: translate(0, 0) rotate(0deg);
         animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }   /* rise (0-20%) */
  20%  { transform: translate(var(--dx-peak), var(--dy-peak)) rotate(360deg);
         animation-timing-function: linear; }                           /* hold start */
  35%  { transform: translate(var(--dx-peak), var(--dy-peak)) rotate(380deg);
         animation-timing-function: cubic-bezier(0.4, 0, 0.7, 0.4); }   /* accel start (после долгого hold) */
  40%  { transform: translate(var(--dx-fall), var(--dy-fall)) rotate(440deg);
         animation-timing-function: linear; }                           /* медленное падение (40-100%) */
  100% { transform: translate(var(--dx-end), var(--dy-end)) rotate(700deg); }
}
@keyframes confettiBgBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.05; }
}
@keyframes confettiCannon {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(720deg); opacity: 0; }
}

/* Дождь эмодзи — фоновый слой между body::before (gradient) и контентом. */
.emoji-rain {
  position: fixed;
  top: -10vh;
  font-size: 28px; line-height: 1;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
  opacity: 0.85;
  animation: emojiRainFall 2.4s linear forwards;
}
@keyframes emojiRainFall {
  0%   { transform: translateY(0); }
  100% { transform: translateY(120vh); }
}

/* OBS-zoom: .confetti-bg и .emoji-rain рендерятся в document.body (вне zoom-контекста main),
   физический размер не масштабируется автоматически. Компенсируем через --obs-scale,
   чтобы при scale=2.75 они выглядели единообразно с другим content. При scale=1 no-op. */
html.obs-mode .confetti-piece.confetti-bg {
  width:  calc(12px * var(--obs-scale, 1));
  height: calc(12px * var(--obs-scale, 1));
}
html.obs-mode .emoji-rain {
  font-size: calc(28px * var(--obs-scale, 1));
}

/* Финальный фейерверк (allCheered) — взрывная частица.
   z-index: 0 — фоновый слой как emoji-rain/confetti-bg, не перекрывает WinBanner и контент. */
.firework-piece {
  position: fixed;
  font-size: 32px; line-height: 1;
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 0;
  transform: translate(0, 0) rotate(0);
  animation: fireworkBurst 1.7s ease-out forwards;
}
@keyframes fireworkBurst {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}