/* Accent Gradient Applications */

/* Apply gradient to accent elements */
.versus,
.tab-btn.active,
.btn-accent {
  background: var(--accent-gradient);
  color: white;
}

/* Gradient border for focus states */
.form-control:focus,
.player-select:focus {
  border-color: transparent;
  background-image: linear-gradient(white, white), var(--accent-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 0 2px rgba(168, 223, 127, 0.25);
}

/* Apply gradient text to important elements */
.gradient-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Score Display Button Gradient */
.score-btn {
  background: var(--accent-gradient);
  color: white;
  border: none;
}

.score-btn:hover {
  background: linear-gradient(to right top, #97d064 0%, #4599b3 33%, #9255e0 100%);
}

/* Custom Loader with Gradient */
.loading-spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 4px solid transparent;
  background-image: var(--accent-gradient);
  background-origin: border-box;
  background-clip: border-box;
}