/* Custom styles for MiraLiga Fantasy */

/* Active Tab Styles */
.active-tab {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.15));
  color: #34d399 !important;
  border: 1px solid rgba(52, 211, 153, 0.3);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}

/* Soccer Pitch Styling */
.soccer-pitch {
  background: radial-gradient(circle at center, #1b7338 0%, #135529 70%, #0d3b1d 100%);
  border: 3px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.5);
  position: relative;
  min-height: 580px; /* High field for mobile to display all 4 rows clearly without crowding */
}

@media (min-width: 640px) {
  .soccer-pitch {
    min-height: 520px;
    max-height: 640px;
  }
}

/* Field Grass Pattern Stripes */
.pitch-overlay {
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.04),
    rgba(0, 0, 0, 0.04) 30px,
    transparent 30px,
    transparent 60px
  );
}

/* White Field Markings */
.pitch-overlay::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-50%);
}

.pitch-overlay::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.penalty-box-top {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 48px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  border-right: 2px solid rgba(255, 255, 255, 0.3);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.penalty-box-bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 48px;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  border-right: 2px solid rgba(255, 255, 255, 0.3);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

/* Pitch Player Card */
.pitch-player-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.pitch-player-card:hover {
  transform: translateY(-4px) scale(1.04);
  z-index: 20;
}

.pitch-player-card:active {
  transform: scale(0.97);
}

/* Position Badges */
.pos-por { background-color: #f59e0b; color: #000; }
.pos-def { background-color: #3b82f6; color: #fff; }
.pos-med { background-color: #10b981; color: #fff; }
.pos-del { background-color: #ef4444; color: #fff; }

/* Podium styling */
.podium-gold {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.05) 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.podium-silver {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.15) 0%, rgba(100, 116, 139, 0.05) 100%);
  border: 1px solid rgba(148, 163, 184, 0.4);
}
.podium-bronze {
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.15) 0%, rgba(146, 64, 14, 0.05) 100%);
  border: 1px solid rgba(180, 83, 9, 0.4);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #090d16;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}