/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Hide native number-input spinners — golf entry uses custom +/- buttons */
input.no-spin::-webkit-outer-spin-button,
input.no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input.no-spin {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Score-change flash — applied by score_flash_controller.js when a ticker
 * value differs from the last seen value. Brief colored glow that holds
 * its peak ~half the duration so the change is clearly noticeable. */
@keyframes scoreFlashGreen {
  0%   { box-shadow: 0 0 0 0px  rgba(16, 185, 129, 0.0);  background-color: rgba(16, 185, 129, 0.0);  }
  15%  { box-shadow: 0 0 16px 8px rgba(16, 185, 129, 0.8); background-color: rgba(16, 185, 129, 0.45); }
  60%  { box-shadow: 0 0 16px 8px rgba(16, 185, 129, 0.6); background-color: rgba(16, 185, 129, 0.35); }
  100% { box-shadow: 0 0 0 0px  rgba(16, 185, 129, 0.0);  background-color: rgba(16, 185, 129, 0.0);  }
}
@keyframes scoreFlashRed {
  0%   { box-shadow: 0 0 0 0px  rgba(220, 38, 38, 0.0);  background-color: rgba(220, 38, 38, 0.0);  }
  15%  { box-shadow: 0 0 16px 8px rgba(220, 38, 38, 0.8); background-color: rgba(220, 38, 38, 0.45); }
  60%  { box-shadow: 0 0 16px 8px rgba(220, 38, 38, 0.6); background-color: rgba(220, 38, 38, 0.35); }
  100% { box-shadow: 0 0 0 0px  rgba(220, 38, 38, 0.0);  background-color: rgba(220, 38, 38, 0.0);  }
}
.score-flash-green {
  animation: scoreFlashGreen 1.6s ease-out;
  border-radius: 12px;
}
.score-flash-red {
  animation: scoreFlashRed 1.6s ease-out;
  border-radius: 12px;
}