/*
 * 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.
 */

/* Outcome banner pop animation — flashes bright then fades back */
@keyframes outcome-pop-neon {
  0%   { background-color: rgba(0, 255, 180, 0.55); box-shadow: 0 0 24px 6px rgba(0, 255, 180, 0.5); transform: scale(1.03); }
  60%  { background-color: rgba(0, 255, 180, 0.18); box-shadow: 0 0 10px 2px rgba(0, 255, 180, 0.2); transform: scale(1.01); }
  100% { background-color: rgba(0, 255, 180, 0.06); box-shadow: none; transform: scale(1); }
}

@keyframes outcome-pop-danger {
  0%   { background-color: rgba(255, 60, 60, 0.55); box-shadow: 0 0 24px 6px rgba(255, 60, 60, 0.5); transform: scale(1.03); }
  60%  { background-color: rgba(255, 60, 60, 0.18); box-shadow: 0 0 10px 2px rgba(255, 60, 60, 0.2); transform: scale(1.01); }
  100% { background-color: rgba(255, 60, 60, 0.06); box-shadow: none; transform: scale(1); }
}

#spin-status.pop-neon {
  animation: outcome-pop-neon 1.4s ease-out forwards;
}

#spin-status.pop-danger {
  animation: outcome-pop-danger 1.4s ease-out forwards;
}