/* Rei da Planilha - Custom Styles */

/* Football field layout */
.football-field {
  background: linear-gradient(90deg, #2d5016 0%, #3d6b1f 50%, #2d5016 100%);
  border: 3px solid #fff;
  border-radius: 8px;
  position: relative;
}

.football-field::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: #fff;
  transform: translateY(-50%);
}

.football-field::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
}

/* Player cards */
.player-card {
  @apply bg-white rounded-lg shadow-md p-2 m-1 text-center transition-all duration-200;
  min-width: 80px;
  border-left: 4px solid;
}

.player-card.stars-4 {
  border-left-color: #ffd700; /* Gold - 4 stars */
}

.player-card.stars-3 {
  border-left-color: #ff8c00; /* Orange - 3 stars */
}

.player-card.stars-2 {
  border-left-color: #c0c0c0; /* Silver - 2 stars */
}

.player-card.stars-1 {
  border-left-color: #cd5c5c; /* Red - 1 star */
}

/* Position indicators */
.position-gk { @apply bg-yellow-400 text-yellow-900; }
.position-def { @apply bg-blue-400 text-blue-900; }
.position-mid { @apply bg-green-400 text-green-900; }
.position-att { @apply bg-red-400 text-red-900; }

/* Team colors */
.team-1 { @apply bg-green-600 text-white; }
.team-2 { @apply bg-blue-600 text-white; }
.team-3 { @apply bg-red-600 text-white; }
.team-4 { @apply bg-yellow-600 text-yellow-900; }
.team-5 { @apply bg-purple-600 text-white; }
.team-6 { @apply bg-orange-600 text-white; }

/* Animations */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Responsive field layout */
.formation-display {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  height: 200px;
  align-content: space-between;
}

/* Formation grids */
.formation-1-2-2 { grid-template-rows: 1fr 1fr 1fr; }
.formation-1-3-3 { grid-template-rows: 1fr 1fr 1fr; }
.formation-1-4-2 { grid-template-rows: 1fr 1fr 1fr; }

/* Mobile responsiveness */
@media (max-width: 768px) {
  .formation-display {
    height: 150px;
    gap: 0.25rem;
    padding: 0.5rem;
  }
  
  .player-card {
    @apply p-1 text-xs;
    min-width: 60px;
  }
}