/* General Styles */
body {
    font-family: 'Play', Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Ensure the main content container aligns properly */
#content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px 20px; /* Add top padding to clear the navbar */
    margin: 0 auto;
    font-family: 'Play', Arial, sans-serif;
}

/* Head to Head Section */
.matchup-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center align content */
    width: 100%;
    margin-top: 30px;
}

.matchup-container img {
    max-width: 300px;
    height: auto;
}

/* Combined Container */
.combined-container {
    display: flex;
    justify-content: space-between; /* Center the team logos and VS text */
    align-items: center; /* Align items vertically */
    gap: 25px; /* Space between team containers and VS text */
    width: 100%;
    padding: 20px;
    flex-wrap: wrap; /* Allow wrapping for smaller viewports */
}

/* Team Container */
.team-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center align content */
}

/* Team Logo Wrapper */
.team-logo-wrapper {
    width: 225px;
    height: 225px;
    margin-bottom: 10px;
    align-content: center;
}

.matchteam-logo img {
    max-width: 100%; /* Ensure logos fit within the wrapper */
    max-height: 100%; /* Ensure logos fit within the wrapper */
    width: 225px;
    height: 225px;
    border-radius: 10px;
}

/* VS Container */
.vs-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Team Name */
.team-name {
    font-weight: bold; /* Make team names bold */
    color: #fff; /* White color for visibility */
    text-align: center; /* Center the team names */
    margin-bottom: 5px; /* Space between the team name and map name */
}

.map-info-container {
    display: flex;
    flex-wrap: wrap; /* Allow maps to wrap to the next row if necessary */
    justify-content: space-evenly; /* Distribute maps evenly */
    width: 100%;
}

.map-info-row {
    margin-bottom: 20px; /* Add spacing between rows */
}

/* Ensure the map display wrapper centers the grid */
.map-info-wrapper {
    padding: 20px 0; /* Vertical spacing */
}

/* Dynamically adjust the grid based on the number of maps */
.map-info-grid {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.map-winner {
    color: green;
    font-weight: bold;
}

.map-score-container {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

.map-score {
    color: white;
    font-weight: bold;
}

.team1-score, .team2-score {
    display: flex;
    align-items: center;
    gap: 5px; /* Space between the logo and score */
}

.team1-score img {
    width: 32px;
    height: 32px;
    border-radius: 5px;
}

.team2-score img {
    width: 32px;
    height: 32px;
    border-radius: 5px;
}

/* Styling for individual map info items */
.map-info {
    text-align: center; /* Center-align content */
}

.map-info img:hover {
    transform: scale(1.05); /* Enlarge slightly on hover */
}

.map-info {
    display: grid;
    text-align: center;
    border: 1px solid #8254FF;
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 10px;
    background-color: rgba(0, 0, 0, 0.5);
}

.map-winner, .map-score {
    font-size: 1rem;
}

/* Map Images */
.map-image {
    display: flex;  /* Enables flexbox for alignment */
    justify-content: center;  /* Center aligns images */
    margin: 20px;  /* Adds some space around images */
}

.map-image img {
    height: auto;
    transition: transform 0.2s;
    border-radius: 8px;
    box-shadow: 0 0 10px white;
    width: 215px;
}

.map-image img:hover {
    transform: scale(1.05);  /* Slightly enlarge on hover */
}

/* Map Name */
.map-name {
    font-size: 1.0em;
    color: #FFD700;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    font-weight: bold;
}

/* Teams and VS Container */
.teams-vs-container {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

/* Tiebreaker Map Styling */
.tiebreaker-info {
    text-align: center;
    border-radius: 8px;
}

/* VS Image */
.vs-image img {
    width: 100px;
    height: auto;
    padding-bottom: 20px;
}

/* Match Stats */
.match-stats {
    text-align: center;
    margin-top: 20px;
    color: #fff;
}

/* Center the tiebreaker map on the second row */
.tiebreaker-map {
    grid-column: span 2; /* Make it span both columns */
    text-align: center; /* Center-align text and image */
}

/* Link styling */
.team-name a {
    text-decoration: none; /* Remove underline */
    color: white; /* Default text color */
    font-weight: bold; /* Make it bold if desired */
}

/* Remove purple highlight for visited links */
.team-name a:visited {
    color: white; /* Match the default color */
}

/* Hover effect */
.team-name a:hover {
    color: red; /* Change to red when hovered */
    text-decoration: none;
}

/* Stats Table Container */
#stats-container {
    margin: 0;
    padding: 20px;
    z-index: 100;
    display: none;
    border-radius: 8px;
}

/* Stats Table */
#stats-table {
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */
    width: auto;
    min-width: 100%;
    table-layout: fixed;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    border-collapse: collapse;
}

/* Table Header and Cells */
#stats-table th, #stats-table td {
    padding: 2px 4px; /* Compact padding for cleaner layout */
    font-size: 13px; /* Consistent font size */
    text-align: center; /* Center-align content */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Prevent overflow */
    text-overflow: ellipsis; /* Truncate long text */
    border: 1px solid #4B4B63; /* Subtle border for cells */
}

/* Header Styling */
#stats-table th {
    color: #FFFFFF; /* White text */
    text-transform: uppercase; /* Uppercase header text */
    font-weight: bold; /* Bold headers */
}

/* Cell Styling */
#stats-table td {
    color: white;
    font-family: 'Play', Arial, sans-serif;
    font-weight: bold;
    border-radius: 10px;
}

/* Sticky Header */
#stats-table thead th {
    position: sticky; /* Sticky header on scroll */
    top: 0; /* Stick to top of the container */
    background-color: rgba(108, 0, 255, 0.1);
    z-index: 10; /* Ensure header stays on top */
}

/* Headers 1 & 2 */
#stats-table td:nth-child(-n+2) {
    background-color: rgba(108, 0, 255, 0.1); /* Softer light purple */
    border-right: 2px solid #6C00FF; /* Neon purple border */
    box-shadow: 0 0 8px rgba(108, 0, 255, 0.5); /* Softer glow */
}

/* Group 1: Column 1 */
#stats-table td:nth-child(n+1):nth-child(-n+1) {
    font-weight: normal;
}

/* Group 2: Columns 3 through 11 */
#stats-table td:nth-child(n+3):nth-child(-n+11) {
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */
    border-right: 1px solid #8254FF; /* Slightly darker purple */
    box-shadow: 0 0 10px rgba(108, 0, 255, 0.3); /* Subtle glow */
}

/* Group 3: Columns 12 through 15 */
#stats-table td:nth-child(n+12):nth-child(-n+15) {
    background-color: rgba(108, 0, 255, 0.1); /* Softer light purple */
    border-right: 1px solid #8254FF; /* Slightly darker purple */
    box-shadow: 0 0 10px rgba(108, 0, 255, 0.3); /* Subtle glow */
}

/* Group 3: Columns 16 through 17 */
#stats-table td:nth-child(n+16):nth-child(-n+17) {
    background-color: rgba(108, 0, 255, 0.1); /* Softer light purple */
    border-right: 1px solid #8254FF; /* Slightly darker purple */
    box-shadow: 0 0 10px rgba(108, 0, 255, 0.3); /* Subtle glow */
}

/* Hover Effect */
#stats-table tbody tr:hover {
    background-color: rgba(108, 0, 255, 0.3); /* Highlight row with purple glow */
    box-shadow: 0 0 10px rgba(108, 0, 255, 0.6);
    transition: background-color 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

/* Placeholder for Missing Data */
#stats-table .placeholder {
    font-style: italic; /* Italicize placeholder text */
    color: gray; /* Subtle gray text */
}

/* Highlight for Important Data */
#stats-table .highlight {
    font-weight: bold; /* Bold for emphasis */
    color: gold; /* Gold for highlighting */
}

/* Responsive Design */
@media (max-width: 768px) {
    #stats-table {
        width: 90%; /* Use most of the screen width on smaller screens */
    }
    
    #stats-table th, #stats-table td {
        font-size: 10px; /* Reduce font size */
        padding: 3px; /* Compact layout */
    }
}

#stats-title {
    font-family: 'Play', Arial, sans-serif; /* Match the font with the rest of the page */
    font-size: 24px; /* Adjust font size */
    font-weight: bold; /* Make the title bold */
    text-transform: uppercase; /* Optional: Make all letters uppercase */
    color: #FFD700; /* Gold color to make it stand out */
    text-align: center; /* Center-align the title */
    margin-bottom: 20px; /* Add spacing below the title */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Add a subtle shadow */
    padding: 10px; /* Add padding for a box-like effect */
    border-radius: 8px; /* Round the edges */
}

.team-result {
    text-align: center; /* Center text inside the team-result container */
    position: relative; /* Needed for absolute positioning of the score */
}

.team-result .score {
    font-size: 24px; /* Ensure consistent font size */
    font-weight: bold;
    margin-bottom: 15px;
}

.winner {
    color: green;
}

.loser {
    color: red;
}

.winner-score {
    color: green; /* Winning score in green */
}

.loser-score {
    color: red; /* Losing score in red */
}

.phase-content {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 15px rgba(108, 0, 255, 0.8);
    border-radius: 8px;
    display: grid;
    align-items: center;
    justify-content: center;
    align-content: center;
    justify-items: center;
}

/* Hide dropdown on desktop, show on mobile */
.mobile-only {
    display: none;
  }

/* Small Display */
@media (max-width: 992px) {

    /* Ensure the main content container aligns properly */
    #content-container {
        display: flex; /* Use flexbox */
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center horizontally */
        padding: 0 5px; /* Optional padding */
        margin-left: 0px;
        font-family: 'Play', Arial, sans-serif; /* Custom font */
    }

}


@media (max-width: 768px) {
    .mobile-only {
        display: grid;
        margin-bottom: 15px;
        gap: 5px;
        color: white;
        justify-items: center;
    }
  
    .map-info {
      display: none; /* Hide all map info blocks by default */
    }
  
    .map-info.active {
      display: block; /* Show selected one only */
    }
  }

  /* On desktop, show everything by default */
@media (min-width: 769px) {
    .map-info {
      display: block;
    }

  .map-select-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px auto;
    padding: 10px 20px;
    border: 1px solid #8254FF;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 12px rgba(130, 84, 255, 0.6);
    width: 90%;
    max-width: 400px;
  }
  
  .map-select-wrapper label {
    font-family: 'Play', Arial, sans-serif;
    font-size: 14px;
    color: #FFD700;
    text-shadow: 1px 1px 2px black;
    margin-bottom: 6px;
  }
  
  .map-select-wrapper select {
    background: rgba(20, 20, 40, 0.9);
    color: white;
    font-family: 'Play', Arial, sans-serif;
    font-size: 16px;
    padding: 8px 12px;
    border: 1px solid #6C00FF;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(108, 0, 255, 0.4);
    outline: none;
    appearance: none;
    width: 100%;
  }
  
  /* Optional: Add a custom dropdown arrow (for WebKit-based browsers) */
  .map-select-wrapper select::-ms-expand {
    display: none;
  }

  .map-select-wrapper {
    display: none !important; /* ❌ Hides dropdown on desktop */
  }
  
  .map-select-wrapper select:focus {
    border-color: #FFD700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
  }  
}

@media (max-width: 576px) {

    /* Shrink logos and reduce gap */
    .team-logo-wrapper {
      width: 140px;
      height: 140px;
    }
  
    .matchteam-logo img {
      width: 140px;
      height: 140px;
    }
  
    .vs-image img {
      width: 60px;
      padding-bottom: 10px;
    }
  
    .combined-container {
      flex-direction: column;
      gap: 10px;
      padding: 10px;
    }
  
    .map-image img {
      width: 160px;
    }
  
    .map-info {
        width: 100%;
        max-width: 180px; /* fits nicely inside mobile column */
    }    
  
    .map-name {
      font-size: 0.85em;
    }
  
    .map-score-container {
      font-size: 1rem;
      gap: 4px;
    }
  
    .team1-score img, .team2-score img {
      width: 24px;
      height: 24px;
    }
  
    .team-name {
      font-size: 1rem;
    }
  
    .phase-content {
        background: none;
        box-shadow: none;
        border-radius: 8px;
        display: grid;
        align-items: center;
        justify-content: center;
        align-content: center;
        justify-items: center;
    }
  
    /* Stats Table Specific */
    #stats-table {
      min-width: 600px;
      width: max-content;
      overflow-x: auto;
      display: block;
      height: 50vh;
    }
  
    #stats-container {
      overflow-x: auto;
      margin: 0;
      display: none;
      border-radius: 8px;
      padding: 0px;
      }
  
    #stats-table th, #stats-table td {
      font-size: 10px;
      padding: 3px;
    }

    .map-info-grid {
        display: grid;
        margin-top: 20px;
        justify-items: center;
    }    

  .table-scroll-wrapper {
    overflow-x: auto;
    width: 100%;
  }
  
}