/* Реакции: панель выбора и слой, по которому они всплывают над сукном.
   Отдельным файлом — ни с чем не пересекается и подключается одной строкой. */

/* Слой ничего не ловит: реакции летят поверх стола, но целиться сквозь них
   надо как ни в чём не бывало. Ниже табло и кнопок, выше канвы. */
#emo {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

#emo .emo-fly {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 2px;
  transform: translate(-50%, -50%);
  animation: emo-rise 2.2s ease-out both;
  will-change: transform, opacity;
}
#emo .face {
  font-size: 34px;
  line-height: 1;
  /* Эмодзи над зелёным сукном без тени сливается с ним на светлых местах. */
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}
/* Подпись автора: реакция летит вдали от табло, и без неё непонятно, чья. */
#emo .who {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 7px;
  color: #16140f;
  background: hsl(var(--hue, 40) 42% 62%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

@keyframes emo-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--s, 1)) rotate(var(--tilt, 0deg));
  }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--dx, 0px)), calc(-50% - var(--dy, 120px)))
      scale(var(--s, 1)) rotate(var(--tilt, 0deg));
  }
}

/* --- панель выбора -------------------------------------------------------- */

#react-bar {
  position: fixed;
  right: 10px;
  bottom: 48px;
  z-index: 6;
  display: flex;
  gap: 2px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(18, 20, 24, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: emo-pop 0.16s ease-out both;
}
#react-bar.hidden { display: none; }

#react-bar .emo-pick {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
#react-bar .emo-pick:hover { background: rgba(236, 231, 220, 0.12); }
#react-bar .emo-pick:active { transform: scale(0.88); }
/* Отказ по частоте: молча проглоченное нажатие читается как поломка панели. */
#react-bar .emo-pick.nope { animation: emo-nope 0.32s ease-in-out; }

@keyframes emo-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes emo-nope {
  0%, 100% { transform: none; }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Полёт — украшение, и первым идёт под нож. Реакцию всё равно показываем:
   она несёт смысл, а не только движение. */
@media (prefers-reduced-motion: reduce) {
  #emo .emo-fly { animation: emo-fade 2.2s linear both; }
  #react-bar { animation: none; }
  #react-bar .emo-pick.nope { animation: none; outline: 1px solid var(--alarm, #e0705a); }
  @keyframes emo-fade {
    0%, 100% { opacity: 0; }
    12%, 76% { opacity: 1; }
  }
}