/* OverlayActions — индикатор-бар команд снизу на стрим-странице/OBS-оверлее.
   Сами плашки НЕ кликабельны (overlay не интерактивен). Активирует чат-команда. */

.overlay-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  /* Внутри .col-board (flex-колонка) гарантируем последнее место — иначе на победном
     экране (body.stream-won) CSS-order перепланирует ростер/стату, и без явного order
     этот блок может «всплыть» вверх. */
  order: 10;
  padding: 6px;
  border-radius: var(--radius-sm, 10px);
  /* Тёмная подложка плотнее (было 0.32) — иначе тонет на ярком геймплее. */
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 240ms ease, border-color 240ms ease;
  /* На обычной стрим-странице растянут на всю ширину col-board. */
  width: 100%;
  box-sizing: border-box;
  /* Не сжимаем при overflow — это компактный bar, доска сжимается, не он. */
  flex-shrink: 0;
}
.overlay-actions[hidden] { display: none; }

.oa-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border-radius: calc(var(--radius-sm, 10px) - 4px);
  background: rgba(255, 255, 255, 0.04);
  position: relative;          /* для оверлея .oa-cooldown поверх emoji */
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;        /* строго read-only */
}

.oa-emo {
  font-size: 24px;
  line-height: 1.1;
  filter: saturate(1.1);
}
.oa-cmd {
  margin-top: 2px;
  font-size: 11px;
  /* font-family НЕ задаём — наследуем системный шрифт страницы (как у ников игроков
     в .row/.active-guess). Жирность и белый цвет сохраняются для контраста на видео. */
  font-weight: 700;
  color: var(--text, #e7e9ee);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* Видимость по состоянию игры:
     non-won — видны 5 реакций (4 эмодзи + подсказка), хлопушка скрыта.
     won    — бар прозрачный, посередине одна квадратная золотая хлопушка
              (цвет/прозрачность как у победной плашки .win.is-all-cheered).
   Класс stream-won уже устанавливается onWin → снимается в applyNewGame. */
.overlay-actions .oa-cheer { display: none; }
body.stream-won .overlay-actions .oa-react,
body.stream-won .overlay-actions .oa-hint  { display: none; }
body.stream-won .overlay-actions .oa-cheer { display: flex; }
/* Won: бар становится невидимой обёрткой (без фона/бордера/тени), сжимается под
   одну плашку. Сама плашка `.oa-cheer` получает золото по образцу .win.is-all-cheered
   (WinBanner.css:39 — gradient/border/shadow на --gold-rgb=244,196,48) → визуально
   одна цельная золотая плашка размером 1:1 как обычная реакция `!любовь`. */
body.stream-won .overlay-actions {
  width: auto;
  align-self: center;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;                        /* подложка плотно прилегает к плашке */
}
body.stream-won .overlay-actions .oa-cheer {
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.28), rgba(255, 215, 0, 0.16));
  border: 1px solid rgba(var(--gold-rgb), 0.55);
  /* Размер: padding/border-radius наследуем от .oa-btn (~6px), box-shadow убран — две подложки
     (внешний контейнер + golden glow) сливались в визуальный «двойной» background. Теперь одна
     цельная золотая кнопка размером как `!любовь` до Won. min-width = 1/5 типичной ширины бара. */
  border-radius: calc(var(--radius-sm, 10px) - 4px);
  box-shadow: none;
  min-width: 92px;
}

/* Лёгкое свечение на активной хлопушке (после OnWin → JS добавляет .oa-active). */
.oa-cheer.oa-active {
  box-shadow: 0 0 0 1px rgba(255, 196, 88, 0.45), 0 0 14px rgba(255, 196, 88, 0.22);
}

/* Подсказка в кулдауне — тусклая, под эмодзи рисуется счётчик секунд. */
.oa-hint.oa-cooling .oa-emo { opacity: 0.32; }
.oa-hint.oa-cooling .oa-cmd { opacity: 0.5; }
.oa-cooldown {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #e7e9ee);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  pointer-events: none;
}
.oa-cooldown[hidden] { display: none; }

/* OBS-режим: общую подложку бара убираем — каждая кнопка получает свою glass-плашку
   в стиле .row (единый визуальный язык overlay'я). Stream-won сохраняет золотую плашку
   на корне (победный glow). */
html.obs-mode .overlay-actions {
  background: transparent;
  border: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  padding: 0;
  /* Единый ритм зазоров оверлея — 6px (как везде), вместо базовых 8px. Возвращает 2px
     победному стеку, чтобы хлопушка точно влезала по нижнему краю бокса. */
  margin-top: 6px;
}
html.obs-mode .oa-btn {
  background: var(--panel-solid);
  -webkit-backdrop-filter: var(--blur-light);
          backdrop-filter: var(--blur-light);
  border: 1px solid var(--border);
}
/* Won в obs-mode: внешний контейнер прозрачный (наследует base правило для stream-won).
   Раньше здесь было второе золотое gradient/border — давало эффект «двух подложек» поверх
   уже золотой .oa-cheer. Теперь только сама кнопка золотая, контейнер невидим. */

/* Тёмный/светлый theme: команда под эмодзи читаемая. */
@media (prefers-color-scheme: light) {
  .overlay-actions { background: rgba(20, 24, 32, 0.45); }
  html.obs-mode .overlay-actions { background: rgba(20, 24, 32, 0.40); }
  /* Шрифт остаётся светлым (text-shadow вытягивает на тёмной подложке). */
}
[data-theme="light"] .overlay-actions { background: rgba(20, 24, 32, 0.45); }
[data-theme="light"] html.obs-mode .overlay-actions { background: rgba(20, 24, 32, 0.40); }

/* Узкие OBS-боксы (≤340px) — уменьшаем размеры. */
@media (max-width: 340px) {
  .oa-emo { font-size: 20px; }
  .oa-cmd { font-size: 9.5px; }
  .oa-btn { padding: 4px 2px; }
  .overlay-actions { gap: 4px; padding: 4px; }
}