/* Pitch Visualization Styles */

/* Individual pitch visualization - embedded in team-lineup */
.pitch-visualization {
    position: relative;
    width: 100%;
}

/* SVG container */
.pitch-svg {
    width: 100%;
    height: auto;
    max-height: 500px;
    display: block;
}

/* Pitch background */
.pitch-background {
    fill: #f8f9fa; /* Light grey */
}

/* Pitch markings */
.pitch-markings {
    opacity: 0.8;
}

/* Player positions group */
.player-positions {
    cursor: pointer;
}

/* Player circle background */
.player-circle {
    fill: white;
    stroke: #2c3e50;
    stroke-width: 0.5;
    transition: all 0.2s ease;
}

/* Home team specific styling */
.home-pitch .player-circle {
    fill: #126E51;
    stroke: white;
    stroke-width: 0.4;
}

/* Away team specific styling */
.away-pitch .player-circle {
    fill: #000000;
    stroke: white;
    stroke-width: 0.4;
}

/* Player number text - only within pitch visualization */
.pitch-visualization .player-number {
    fill: white;
    font-size: 3px;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Player name text - only within pitch visualization */
.pitch-visualization .player-name {
    fill: #2c3e50;
    font-size: 2px;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Hover effects */
.player-marker:hover .player-circle {
    stroke-width: 0.8;
    filter: brightness(1.1);
}

.pitch-visualization .player-marker:hover .player-number {
    font-weight: 700;
}

/* Responsive breakpoints */

/* Mobile Small: 0-374px (Base styles above) */

/* Mobile Medium: 375px-424px */
@media (min-width: 375px) and (max-width: 424px) {
    .pitch-svg {
        max-height: 450px;
    }
}

/* Mobile Large: 425px-767px */
@media (min-width: 425px) and (max-width: 767px) {
    .pitch-svg {
        max-height: 500px;
    }
}

/* Tablet: 768px-1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .pitch-svg {
        max-height: 450px;
    }
}

/* Laptop: 1024px-1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
    .pitch-svg {
        max-height: 500px;
    }
}

/* Laptop Large: 1440px+ */
@media (min-width: 1440px) {
    .pitch-svg {
        max-height: 550px;
    }
}