@property --skill-ready-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* The frame stays fixed. Only the highlight travels around its perimeter. */
:is(#game #hotbar .slot, .icons button).ready::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 3;
  box-sizing: border-box;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--skill-ready-angle),
    transparent 0deg 220deg, #ffd68b22 250deg,
    #ffd68baa 290deg, #fff5d6 315deg, transparent 338deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: skill-ready-orbit 2.4s linear infinite;
  filter: drop-shadow(0 0 2px #ffe6a4);
}
:is(#game #hotbar .slot, .icons button).ready[data-use-mode='self']::before {
  padding: 3px;
  animation-duration: 1.8s;
}
:is(#game #hotbar .slot, .icons button).ready::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle, #fff9dfcc, #ffd68b44 50%, transparent 75%);
  animation: skill-ready-flash .6s ease-out both;
}
#game #hotbar .slot.ready.unavailable::before {
  animation-play-state: paused;
  opacity: .35;
}
@keyframes skill-ready-orbit {
  to { --skill-ready-angle: 360deg; }
}
@keyframes skill-ready-flash {
  from { opacity: 1; transform: scale(.3); }
  to { opacity: 0; transform: scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
  :is(#game #hotbar .slot, .icons button).ready::before {
    animation: none;
    background: none;
    mask: none;
    -webkit-mask: none;
    border: 2px solid #ffe6a4;
  }
  :is(#game #hotbar .slot, .icons button).ready::after {
    animation: none;
    opacity: 0;
  }
}