/* 27.10 (Сергей): реакции в бою (js/react.js). Телефон — столбик над «Рывком», ПК (body.pcg) — ряд по центру внизу. Файл чата «Механики» */
.rx-bar { position: absolute; left: 16px;   /* по левому краю «Рывка» (Сергей, 27.10) */ bottom: calc(env(safe-area-inset-bottom, 0px) + 122px); display: none; flex-direction: column; gap: 6px; z-index: 5; pointer-events: auto; }
.rx-bar.show { display: flex; }
.rx-b { position: relative; width: 29px; height: 29px; padding: 0; border-radius: 50%; border: 2.5px solid var(--ink); background: rgba(255, 246, 220, .92);   /* 27.10 (Сергей): вдвое меньше и на телефоне */
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), 0 2px 0 var(--ink); display: flex; align-items: center; justify-content: center; touch-action: none; cursor: pointer; }
.rx-b canvas { position: relative; z-index: 1; width: 20px; height: 20px; pointer-events: none; }
.rx-b::before { content: ''; position: absolute; inset: -3px -12px; }   /* касание ловится чуть шире кружка — маленькую кнопку легче нажать пальцем */
.rx-b i { display: none; }
.rx-b.hit { animation: rxhit .35s ease-out; }
@keyframes rxhit { 0% { transform: scale(1); } 30% { transform: scale(.86); } 70% { transform: scale(1.06); } 100% { transform: scale(1); } }
body.pcg .rx-b::before { inset: -4px; }
body.pcg .rx-bar { left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 66px); flex-direction: row; gap: 9px; }   /* 27.10 (Сергей): на ПК кружки вдвое меньше */
body.pcg .rx-b i { display: block; position: absolute; right: -5px; bottom: -5px; z-index: 2; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); color: #fff; border: 1.5px solid #fff;
  font: 900 9px/11px Rubik, sans-serif; font-style: normal; text-align: center; }