.action-chest{ position: relative; display:flex; align-items:center; justify-content:center; gap: 34px; padding: 22px 20px 8px; }
.action-btn{ display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:none; color: var(--text); font-family: var(--f-ui); cursor:pointer; }
.action-btn .circle{ width:52px; height:52px; border-radius:50%; border: 1.5px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; transition: transform .12s ease, background .2s ease; }
.action-btn:active .circle{ transform: scale(0.92); }
.action-btn.primary .circle{
  width:68px; height:68px;
  background: var(--gold-gradient);
  border:none;
  animation: photoGlow 2.2s ease-in-out infinite;
  /* visual-only offset (flow untouched, so Pause/Test stay exactly where they were):
     lifts the circle up so it slightly breaches the identity card above,
     like this hero is stepping into frame for the photo */
  position: relative;
  top: -30px;
  z-index: 5;
}
.action-btn.primary .title{
  position: relative;
  top: -8px;
}
.action-btn.primary .caption{
  position: relative;
  top: -8px;
}
@keyframes photoGlow{
  0%, 100% { box-shadow: 0 8px 24px rgba(198,169,105,0.35), 0 0 0 0 rgba(198,169,105,0.45); }
  50% { box-shadow: 0 8px 24px rgba(198,169,105,0.45), 0 0 0 8px rgba(198,169,105,0); }
}
.action-btn .circle svg{ width:20px; height:20px; }
.action-btn.primary .circle svg{ width:24px; height:24px; color:#1a1408; }
.action-btn .title{ font-size:13px; font-weight:600; }
.action-btn .caption{ font-size:10.5px; color: var(--text-faint); font-family: var(--f-body); }

/* межмодульно: визуальная реакция на паузу живёт на элементе модуля hero (.hero.paused),
   класс toggle'ится отсюда, из action-chest.js — см. комментарий там же */
.hero.paused .media-slot--hero{ filter: grayscale(0.5) brightness(0.75); }