.b2-action-rings {
  --ring-gold: #f4d68e;
  --ring-ivory: #fff2ce;
  --ring-dim: #a99a7b;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.b2-action-rings[hidden] { display: none; }
.b2-action-ring {
  --pulse-low: 0.12;
  --pulse-high: 0.32;
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--ring-dim);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 25%, #332c20, #19160f 80%);
  color: #c2b493;
  font: 700 clamp(14px, 1.4vw, 18px) var(--caps);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px #000;
  box-shadow: inset 0 0 0 3px #17120c, inset 0 0 0 4px #7a6840, 0 3px 12px #0008;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
  transition: color 180ms, background 180ms, border-color 180ms, box-shadow 180ms;
}
.b2-action-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid var(--ring-gold);
  border-radius: inherit;
  box-shadow: 0 0 14px #f4d68e55;
  pointer-events: none;
  opacity: 0;
}
.b2-action-ring[data-state="empty"]::after,
.b2-action-ring[data-state="ready"]::after { animation: b2-ring-pulse 2s ease-in-out infinite; }
.b2-action-ring[data-state="ready"] {
  --pulse-low: 0.28;
  --pulse-high: 0.72;
  border-color: var(--ring-gold);
  color: var(--ring-ivory);
  background: radial-gradient(circle at 40% 25%, #69532b, #342510 80%);
  box-shadow: inset 0 0 0 3px #2a1d0c, inset 0 0 0 4px #d2ad61, 0 0 20px #e5b65038, 0 3px 12px #0008;
}
.b2-action-ring[data-action="play"][data-state="ready"] {
  color: #241809;
  text-shadow: 0 1px 0 #fff5;
  background: var(--brass-fill);
  box-shadow: inset 0 0 0 3px #bb9147, inset 0 0 0 4px #ffe5a3, 0 0 24px #f4d68e60, 0 3px 12px #0008;
}
.b2-action-ring:disabled { cursor: default; }
.b2-action-ring[data-state="invalid"],
.b2-action-ring[data-state="unavailable"],
.b2-action-ring[data-state="waiting"] { border-color: #776b53; color: #9a8e75; }
.b2-action-ring:enabled:hover { filter: brightness(1.15); }
.b2-action-ring:enabled:active { transform: translate(-50%, -50%) scale(0.96); }
.b2-action-ring:focus-visible { outline: 3px solid var(--ring-ivory); outline-offset: 8px; }
@keyframes b2-ring-pulse {
  0%, 100% { opacity: var(--pulse-low); transform: scale(0.96); }
  50% { opacity: var(--pulse-high); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .b2-action-ring { transition: none; }
  .b2-action-ring::after { animation: none !important; transform: none; }
  .b2-action-ring[data-state="empty"]::after,
  .b2-action-ring[data-state="ready"]::after { opacity: var(--pulse-low); }
}