/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 *= require_tree .
 *= require_self
 */

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css");

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.score-update {
  animation: scoreFlash 1s ease-in-out;
}

@keyframes scoreFlash {
  0% { transform: scale(1); color: inherit; }
  50% { transform: scale(1.2); color: #FFD700; text-shadow: 0 0 10px #FFD700; }
  100% { transform: scale(1); color: inherit; }
}

.scoreboard-main {
  background: linear-gradient(135deg, #000428 0%, #004e92 100%);
  border: 3px solid #FFD700;
  border-radius: 15px;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

.match-controls .btn {
  margin: 5px;
  min-width: 120px;
}

.goal-list .goal-item {
  transition: all 0.3s ease;
}

.goal-list .goal-item:hover {
  transform: translateX(10px);
}

.timer-display {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  letter-spacing: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .team-score {
    font-size: 4rem !important;
  }
  
  .team-name {
    font-size: 1.5rem !important;
  }
  
  .match-time {
    font-size: 2rem !important;
  }
}

.score-update {
  animation: scoreFlash 1s ease-in-out;
}