/* A separate artifact cue preserves the basic attack's cooldown ring and the
   existing legendary weapon empowerment presentation. */
.equipmentArtifactFeedback {
  --artifact-ready-color: #ead3a1;
  position: absolute;
  left: 0;
  bottom: calc(100% + 18px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 220px;
  padding: 5px 7px 5px 5px;
  border: 1px solid var(--artifact-ready-color);
  border-radius: 9px;
  background: #17131f;
  color: #f6efe2;
  box-shadow: 0 3px 12px #0007;
  text-align: left;
  pointer-events: none;
  animation: equipmentReadyPulse 320ms ease-out;
}
.equipmentArtifactFeedback[hidden], .equipmentFeedbackSrOnly[hidden] { display: none; }
.equipmentArtifactTimer { position: relative; width: 30px; height: 30px; flex: 0 0 30px; }
.equipmentArtifactTimer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 2; }
.equipmentArtifactTrack { stroke: #574c60; }
.equipmentArtifactRemaining { stroke: var(--artifact-ready-color); stroke-dasharray: 100; stroke-dashoffset: 0; stroke-linecap: round; }
.equipmentArtifactIcon { position: absolute; inset: 5px; display: grid; place-items: center; }
.equipmentArtifactIcon img { display: block; width: 20px; height: 20px; object-fit: contain; }
.equipmentArtifactCopy { display: grid; gap: 2px; min-width: 0; }
.equipmentArtifactCopy strong { color: #fff6e7; font: 700 11px/1.2 system-ui, sans-serif; }
.equipmentArtifactBenefit { color: #e1d7e6; font: 500 10px/1.2 system-ui, sans-serif; }
.equipmentArtifactSeconds { align-self: flex-start; min-width: 25px; margin-top: 1px; color: var(--artifact-ready-color); font: 700 10px/1.2 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.equipmentFeedbackSrOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes equipmentReadyPulse { from { box-shadow: 0 0 12px #ead3a15c; } to { box-shadow: 0 3px 12px #0007; } }
@media (prefers-reduced-motion: reduce) { .equipmentArtifactFeedback { animation: none; } }
@media (max-width: 480px) {
  .equipmentArtifactFeedback { left: 6px; bottom: calc(100% + 15px); gap: 4px; max-width: 190px; padding: 4px; }
  .equipmentArtifactCopy strong { font-size: 10px; }
  .equipmentArtifactBenefit { font-size: 9px; }
}