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

.main-container {
    width: 80%; /* Set width to 80% of the page */
    margin: 0 auto; /* Center the container horizontally */
}

.banner {
    width: 100%;
    height: 40vh;
    margin-top: 20px;
    justify-content: center;
    position: relative;
}

.banner img {
    width: auto;
    height: 45vh;
    max-width: 100%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.team-section {
    color: white;
}

.teampage-logo {
    margin-right: 20px;
    max-width: 180px;
    display: flex;
}

.teampage-name {
    font-size: 1.5rem;
    text-align: center;
    color: white;
}

.clan-tag {
    margin-left: 5px;
    font-size: 0.8em;
    font-weight: bold;
    color: rgb(180, 178, 178);
    position: relative; /* Ensure positioning context is applied */
    top: 45px; /* Adjust this value to move the clan tag above the team name */
}

.tabs {
    margin-top: 20px;
    position: relative;
    border-bottom: 1px solid gray;
    padding-bottom: 10px;
}

.tabs-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tablinks-container {
    display: flex;
}

.tablinks {
    background: none;
    border: none;
    font-family: 'Play', Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: gray;
    cursor: pointer;
    margin-right: 20px;
    padding-bottom: 5px;
}

.tablinks:hover {
    text-decoration: underline;
    color: orange;
    cursor: pointer;
}

.tablinks.active {
    color: orange;
    text-decoration: underline;
}

.tabcontent {
    display: none;
    color: inherit;
    border: none;
    font: inherit;
    text-align: inherit;
    border-radius: 4px;
}

.tabcontent.active {
    display: block;
    background: none;
    /* Remove or increase max-height */
    max-height: none;  /* Change this to none or set a larger value */
}

.team-members {
    flex: 1; /* Allow it to take up available space */
    margin-right: 20px; /* Add some space between the two sections */
}

.member-info {
    color: white;
    font-weight: bold;
}

.recent-matches-table tr.crown-match td {
    background-color: gold;
    color: black;
    font-weight: bold;
}

/* Team Member Table Styles */
.team-member-table {
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */
    width: 100%; /* Full width for consistency */
    border-collapse: collapse; /* Remove gaps between table cells */
    margin: 20px auto; /* Center the table */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Ensures the rounded corners are visible */
    box-shadow: 0 0 15px rgba(108, 0, 255, 0.8); /* Purple glow effect */
}

.team-member-table th,
.team-member-table td {
    border: 1px solid #4B4B63; /* Subtle border color */
    text-align: center; /* Center align content */
    font-weight: bold; /* Bold text for emphasis */
    padding: 4px; /* Padding for spacing */
    font-family: 'Play', Arial, sans-serif; /* Consistent font family */
}

/* Header Styling */
.team-member-table th {
    background-color: rgba(108, 0, 255, 0.3);
    color: #FFFFFF; /* White text */
    font-size: 14px;
    text-transform: uppercase; /* Uppercase text */
    padding: 2px;
    text-shadow: 0 0 10px rgba(108, 0, 255, 0.8); /* Purple glow */
    border: 1px solid #4B4B63; /* Border for separation */
}

/* Profile Picture Styling */
.team-member-table .profile-picture {
    width: 32px;
    height: 32px;
    border-radius: 50%; /* Circular profile picture */
    object-fit: cover; /* Ensure the image scales without distortion */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

/* Hover Effect */
.team-member-table .profile-picture:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
    box-shadow: 0 0 15px rgba(108, 0, 255, 0.8), 0 0 5px rgba(255, 255, 255, 0.7); /* Stronger purple and white glow */
}

/* Discord Icon Styling */
.team-member-table .discord-icon {
    width: 20px; /* Smaller size for the Discord icon */
    height: 20px;
    margin-left: 5px;
    cursor: pointer;
    border-radius: 50%; /* Circular icon */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth hover transition */
}

/* Hover Effect for Discord Icon */
.team-member-table .discord-icon:hover {
    transform: scale(1.1); /* Slight zoom on hover */
    box-shadow: 0 0 8px 4px rgba(108, 0, 255, 0.8); /* Purple glow on hover */
}

/* Username Wrapper */
.username-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px; /* Adjusted font size */
}

/* Role Column Styling */
.team-member-table td:nth-child(3) {
    font-weight: bold; /* Bold text for emphasis */
    font-size: 14px; /* Font size adjustment */
    color: #FFD700; /* Gold text for roles */
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.8); /* Golden glow */
}

/* Alternating Row Backgrounds */
.team-member-table tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.6); /* Darker row background */
}

.team-member-table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.4); /* Lighter row background */
}

/* Hover Effect for Rows */
.team-member-table tbody tr:hover {
    background-color: rgba(108, 0, 255, 0.3); /* Highlight with purple glow */
    box-shadow: 0 0 10px rgba(108, 0, 255, 0.6);
    transition: background-color 0.3s, box-shadow 0.3s;
}

.clan-info {
    background: none;
    border: none;
    font-family: 'Play', Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    padding-bottom: 5px;
    padding-left: 5px;
}

/* Team Stats Table Styles */
.team-stats-table {
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */
    border-collapse: collapse;
    margin: 20px auto;
    border-radius: 8px;
    overflow: hidden;
    color: #D1D1E0;
    box-shadow: 0 0 15px rgba(108, 0, 255, 0.8); /* Purple glow */
}

/* Table Headers and Cells */
.team-stats-table th, 
.team-stats-table td {
    border: 1px solid #4B4B63; /* Subtle border */
    text-align: center;
    padding: 6px;
}

/* Team Stats Table Header Styling */
.team-stats-table th {
    background-color: rgba(108, 0, 255, 0.3);
    color: #FFFFFF; /* White text */
    font-family: 'Play', Arial, sans-serif; /* Consistent font */
    font-size: 14px; /* Font size */
    text-transform: uppercase; /* Uppercase text */
    text-shadow: 0 0 10px rgba(108, 0, 255, 0.8); /* Purple glow */
    border: 1px solid #4B4B63; /* Border for separation */
}

/* Table Cell Styling */
.team-stats-table td {
    color: white;
    font-family: 'Play', Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #4B4B63;
}

/* Placeholder Styling */
.team-stats-table .placeholder {
    font-style: italic;
    color: gray;
}

/* Highlight Styling */
.team-stats-table .highlight {
    font-weight: bold;
    color: gold;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.8); /* Golden glow for highlights */
}

/* Row Alternating Backgrounds */
.team-stats-table tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.6); /* Darker row background */
}

.team-stats-table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.4); /* Lighter row background */
}

/*  Upcoming Matches Styles */
.section-header {
    font-size: 1.5em;
    font-weight: bold;
    margin: 20px 0;
    color: #ffffff;
    text-align: center;
}

/* Upcoming Matches Table Styles */
.upcoming-matches-table {
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */
    width: 100%; /* Matches the width of other tables for consistency */
    border-collapse: collapse; /* Ensures table has no gaps between cells */
    margin: 20px auto 40px; /* Adjust bottom margin to add space below the table */
    border-radius: 8px;
    overflow: hidden; /* Ensures the rounded corners are visible */
    box-shadow: 0 0 15px rgba(108, 0, 255, 0.8); /* Purple glow effect */
}

.upcoming-matches-table th,
.upcoming-matches-table td {
    border: 1px solid #4B4B63; /* Subtle border */
    text-align: center;
    padding: 4px;
}

/* Updated Header Styling for Upcoming Matches Table */
.upcoming-matches-table th {
    background-color: rgba(108, 0, 255, 0.1); /* Softer light purple */
    font-weight: bold;
    color: white; /* White text */
    font-family: 'Play', Arial, sans-serif; /* Consistent font */
    font-size: 14px;
    text-transform: uppercase; /* Uppercase text */
    padding: 2px; /* Padding for spacing */
    text-shadow: 0 0 10px rgba(108, 0, 255, 0.8); /* Purple glow */
    border: 1px solid #4B4B63; /* Border for separation */
}

/* Table Cell Styling */
.upcoming-matches-table td {
    color: white;
    font-family: 'Play', Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid gray;
}

/* Placeholder Styling */
.upcoming-matches-table .placeholder {
    font-style: italic;
    color: gray;
}

/* Highlight Styling */
.upcoming-matches-table .highlight {
    font-weight: bold;
    color: gold; /* Highlight color for special columns */
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.8); /* Golden glow for highlights */
}

/* Result-specific styles for the upcoming matches table */
.upcoming-matches-table td.win {
    background-color: green; /* Green for win */
    color: white; /* White text for better readability */
    font-weight: bold; /* Make the text bold */
    text-align: center; /* Center the text */
    padding: 4px; /* Add padding for better spacing */
    border-radius: 4px; /* Optional: round the corners slightly */
}

.upcoming-matches-table td.loss {
    
    background-color: red; /* Red for loss */
    color: white; /* White text for better readability */
    font-weight: bold; /* Make the text bold */
    text-align: center; /* Center the text */
    padding: 4px; /* Add padding for better spacing */
    border-radius: 4px; /* Optional: round the corners slightly */
}

/* Alternating Row Backgrounds */
.upcoming-matches-table tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.6); /* Darker row background */
}

.upcoming-matches-table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.4); /* Lighter row background */
}

/* Hover Effect for Rows */
.upcoming-matches-table tbody tr:hover {
    background-color: rgba(108, 0, 255, 0.3); /* Highlight with purple glow */
    box-shadow: 0 0 10px rgba(108, 0, 255, 0.6);
    transition: background-color 0.3s, box-shadow 0.3s;
}

.overview-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items at the start */
    margin-top: 20px;
}

/* Flex container for team members and upcoming matches */
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: white;
}

.flex-item {
    flex: 1;
    margin-right: 20px; /* Add space between items */
}

.flex-item:last-child {
    margin-right: 0; /* Remove margin on the last item */
}

.notes-icon {
    cursor: pointer;
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1); /* Makes the image completely white */
}

/* Recent Matches Table Styles */
.teamrecent-matches-table {
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */
    width: 100%; /* Matches the width of other tables for consistency */
    border-collapse: collapse;
    margin: 20px auto 5px; /* Adjust bottom margin to add space below the table */
    border-radius: 8px;
    overflow: hidden; /* Ensures the rounded corners are visible */
    text-align: center;
    box-shadow: 0 0 15px rgba(108, 0, 255, 0.8); /* Purple glow effect */
}

.teamrecent-matches-table th, 
.teamrecent-matches-table td {
    border: 1px solid #4B4B63; /* Subtle border */
    text-align: center;
    padding: 4px;
}

/* Updated Header Styling for Recent Matches Table */
.teamrecent-matches-table th {
    background-color: rgba(108, 0, 255, 0.1); /* Softer light purple */
    color: #FFFFFF; /* White text */
    font-family: 'Play', Arial, sans-serif; /* Consistent font */
    font-size: 14px; /* Font size */
    text-transform: uppercase; /* Uppercase text */
    padding: 5px; /* Padding for spacing */
    text-shadow: 0 0 10px rgba(108, 0, 255, 0.8); /* Purple glow */
    border: 1px solid #4B4B63; /* Border for separation */
    white-space: nowrap;
}

/* Cell Styling */
.teamrecent-matches-table td {
    font-family: 'Play', Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid gray;
}

/* Placeholder Styling */
.teamrecent-matches-table .placeholder {
    font-style: italic;
    color: gray;
}

/* Highlight Styling */
.teamrecent-matches-table .highlight {
    font-weight: bold;
    color: gold;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.8); /* Golden glow */
}

/* Hover Effect for Rows */
.teamrecent-matches-table tbody tr:hover {
    background-color: rgba(108, 0, 255, 0.3); /* Highlight with purple glow */
    box-shadow: 0 0 10px rgba(108, 0, 255, 0.6);
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* Row Alternating Backgrounds */
.teamrecent-matches-table tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.6); /* Darker row background */
}

.teamrecent-matches-table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.4); /* Lighter row background */
}

/* Separate styles for win/loss cells to avoid overwriting by the crown-match class */
.win, .loss {
    background-color: transparent; /* Keeps original background for win/loss cells */
    color: inherit; /* Inherits text color from the parent element */
}

.win {
    color: green;
    
}

.loss {
    color: red;
}

/* Leaderboard Wrapper */
.leaderboard-wrapper {
    overflow-x: auto; /* Enables horizontal scrolling */
    max-width: 100%; /* Restrict container width to page width */
    color: white;
}

/* Leaderboard Table Styles */
.leaderboard-table {
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */
    width: auto; /* Allow table to expand beyond container width */
    min-width: 100%; /* Ensure the table starts at full width */
    table-layout: fixed; /* Fix column widths */
    border-collapse: collapse;
    margin: 20px auto; /* Center the table */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(108, 0, 255, 0.8); /* General purple glow */
    font-weight: bold;
}

/* Table Headers and Cells */
.leaderboard-table th,
.leaderboard-table td {
    padding: 4px 6px; /* Compact padding */
    font-size: 14px; /* Smaller font size */
    text-align: center;
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden;
    text-overflow: ellipsis; /* Truncate text */
    border: 1px solid #4B4B63; /* Subtle gray border */
}

/* Sticky Table Header */
.leaderboard-table thead th {
    position: sticky;
    top: 0;
    background-color: #293045; /* Match table header color */
    z-index: 10; /* Ensure header stays on top */
    text-transform: uppercase;
    text-shadow: 0 0 10px #6C00FF; /* Purple glow */
}

/* Remove default link styling */
.leaderboard-table a {
    color: inherit; /* Inherit the normal text color */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Optional: Make the text bold */
}

/* Change color to red on hover */
.leaderboard-table a:hover {
    color: red;
}

.center-dropdown {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* --- Section-Specific Styling --- */

/* Group 1: First three columns */
.leaderboard-table th:nth-child(-n+3) {
    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 */

}

.leaderboard-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 2: Columns 4 through 10 */
.leaderboard-table td:nth-child(n+3):nth-child(-n+10) {
    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 */
}

.leaderboard-table th:nth-child(n+4):nth-child(-n+10) {
    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 11 through 14 */
.leaderboard-table th:nth-child(n+11):nth-child(-n+14) {
    background-color: rgba(108, 0, 255, 0.1); /* Softer light purple */
    border-right: 2px solid #4B00FF; /* Deep purple */
    box-shadow: 0 0 15px rgba(108, 0, 255, 0.8); /* Stronger glow */

}

.leaderboard-table td:nth-child(n+11):nth-child(-n+14) {
    background-color: rgba(108, 0, 255, 0.1); /* Softer light purple */
    border-right: 2px solid #4B00FF; /* Deep purple */
    box-shadow: 0 0 15px rgba(108, 0, 255, 0.8); /* Stronger glow */
}

/* Column Width Adjustments */
.leaderboard-table th,
.leaderboard-table td {
    width: auto; /* Default width */
    max-width: 120px; /* Prevent stretching */
}

/* Example Specific Columns */
.leaderboard-table th:nth-child(2),
.leaderboard-table td:nth-child(2) {
    width: 150px; /* Wider column for Player */
    max-width: 150px;
    text-align: center;
}

/* Alternating Row Backgrounds */
.leaderboard-table tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.6); /* Darker row background */
}

.leaderboard-table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.4); /* Lighter row background */
}

/* Hover Effect */
.leaderboard-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;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .leaderboard-table {
        width: 90%; /* Use more width on smaller screens */
    }
    
    .leaderboard-table th, .leaderboard-table td {
        font-size: 10px;
        padding: 3px;
    }
}

.leaderboard-table .placeholder {
    font-style: italic;
    color: gray;
}

.leaderboard-table .highlight {
    font-weight: bold;
    color: gold;
}

.team-icons {
    display: flex;
    justify-content: center;
    position: relative; /* Ensure the container itself is positioned relatively */
    top: 60px; /* Adjust this value to move the icons closer to the team name */
}

.rank-container, .crown-container {
    position: relative;
    width: 60px; /* Adjust width as needed */
    height: 60px; /* Adjust height as needed */
    margin: 0 5px; /* Add some space between the icons */
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.team-name-container {
    display: flex;
    justify-content: center;
    width: auto;
    max-width: 100%;
}

.rank-icon {
    animation: float 3s ease-in-out infinite;
    background: url('../Icons/number1.png') no-repeat center center;
    background-size: contain;
    width: 65px;
    height: 65px;
}

.crown-icon {
    animation: float 3s ease-in-out infinite;
    background: url('../Icons/crownemoji1.png') no-repeat center center;
    background-size: contain;
    width: 50px;
    height: 50px;
}

.match-history-button {
    margin-bottom: 10px;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.75);
    color: white; /* White text */
    text-decoration: none; /* Remove underline */
    border: 1px solid #4B4B63; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    font-family: 'Play', Arial, sans-serif; /* Consistent font */
    font-size: 12px; /* Font size */
    font-weight: bold;
    text-transform: uppercase; /* Uppercase text */
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s ease; /* Smooth transitions */
    display: inline-block; /* Entire button is clickable */
    box-sizing: border-box; /* Include padding and border in dimensions */
    z-index: 10; /* Ensure the button stays on top */
    box-shadow: 0 0 10px rgba(108, 0, 255, 0.8); /* Purple glow effect */
    width: 100%;
    text-align: center;
}

/* Hover Effect */
.match-history-button:hover {
    background-color: #ffd700; /* Gold background on hover */
    color: #111C26; /* Dark text for contrast */
    box-shadow: 0 0 15px rgba(108, 0, 255, 1), 0 0 5px rgba(255, 215, 0, 0.8); /* Purple and gold combined glow */
    border-color: #ffd700; /* Border matches the gold background */
}

/* Adjustments to ensure the button looks good with the rest of the section */
.teamrecent-matches {
    position: relative;
    margin-top: 10px; /* Adjust margin as needed */
}

.reported-date {
    font-size: 12.5px;
}

.header-container {
    display: flex;
    justify-content: space-between; /* Space out the elements */
    align-items: center; /* Center vertically */
    margin-bottom: 10px;
}

.teamrecent-section-header {
    flex-grow: 1; /* Allow the header to grow and take available space */
    text-align: center; /* Center the header text */
    margin: 0; /* Remove default margin */
    font-size: 1.5em;
    font-weight: bold;
    color: #ffffff;
}

/* SIDEBAR STYLES FOR TEAM PAGE */
.sidebar-hamburger-menu {
    position: fixed;
    top: 15px;
    left: 15px;
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
    z-index: 1100;
}

.sidebar-hamburger-menu .line {
    width: 100%;
    height: 4px;
    background-color: #fff;
}

/* Dropdown Menu Styles */
.teampage-dropdown-menu {
    position: fixed;
    height: auto;
    width: auto;
    padding-top: 60px;
    z-index: 1050;
    transition: left 0.3s ease;
}

.teampage-dropdown-menu a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid #292940;
    transition: background 0.3s, color 0.3s;
    background-color: #1C1C2E;
    border-right: 1px solid #6C00FF;
}

.teampage-dropdown-menu a:hover {
    background-color: #2A2A3D;
    color: #b65eff;
}

/* Sidebar active toggle */
.teampage-dropdown-menu.open {
    display: grid;
}

.profile-link {
    color: inherit;          /* Use the parent element's text color */
    text-decoration: none;   /* Remove underline */
    cursor: pointer;         /* Optional: Keep the cursor as a pointer to indicate it's clickable */
}

.profile-link:hover {
    text-decoration: none;   /* Ensure underline doesn't appear on hover */
    color: red;          /* Maintain original text color on hover */
}

/* Style for "Match ID" column */
.upcoming-matches-table th:nth-child(1) {
    width: 11%;
}

/* Style for "Date" column */
.upcoming-matches-table th:nth-child(3) {
    width: 15%;
}

.crown-match {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.6) 75%,  /* Brighter middle */
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 5s infinite linear;  /* Faster shimmer */
    position: relative;  /* Ensure it's treated as a layer */
    z-index: 0;  /* Make sure the background is behind the text */
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.crown-match td {
    position: relative;
    z-index: 0;  /* Ensure the text content stays above the shimmer effect */
    background: rgba(255, 215, 0, 0.75);  /* Gold with 85% opacity */
    color: black;
    font-family: 'Play', Arial, sans-serif;
}

/* You can also ensure the entire cell containing the notes icon remains unaffected */
.crown-match td:nth-child(5) {  /* Assuming the notes column is the 5th child */
    background: none !important;
    z-index: 2;
}

.teamrecent-matches-table .crown-match td.loss {
    background-color: red !important;
    color: white;
}

.teamrecent-matches-table .crown-match td.win {
    background-color: green !important;
    color: white;
}

/* Match links styling */
.match-link {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color from parent */
    font-weight: bold; /* Make the link bold (optional) */
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Hover effect for match links */
.match-link:hover {
    color: #007BFF; /* Change to your desired hover color */
    text-decoration: underline; /* Add underline on hover */
}

.grid-container {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* Add some spacing between sections */
    width: 100%;
    margin-bottom: 20px; /* Add spacing below the container */
}

.featured-image {
    width: 50%;
}

.featured-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 0 0 10px white;
    border-radius: 8px;
}

.featured-image img:hover {
    transform: scale(1.02); /* Enlarge on hover */
}

.map-stats {
    width: 20%;
    background-color: rgba(0, 0, 0, 0.85); /* Add a semi-transparent background */
    padding: 5px;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(108, 0, 255, 0.3); /* Subtle glow */
    color: #fff; /* Ensure text is readable */
    text-align: center;
}

.top-players {
    width: 25%;
    background-color: rgba(0, 0, 0, 0.85); /* Add a semi-transparent background */
    padding: 10px;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(108, 0, 255, 0.2); /* Subtle glow */
    color: #fff; /* Ensure text is readable */
    text-align: center;
}

.maps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Slightly larger min size */
    gap: 5px; /* Increase the spacing */
    padding: 10px; /* Add padding around the grid */
    width: 100%;
}

.map-item {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.85); /* Add a background */
    padding: 10px;
    border-radius: 8px; /* Rounded corners */
    transition: transform 0.2s, box-shadow 0.2s; /* Smooth transition effects */
    box-shadow: 2px 2px 2px purple;
    color: #FFD700; /* Gold color to make it stand out */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Add a subtle shadow */
    font-size: 14.5px;
    display: grid;
    align-content: space-between;
    cursor: pointer;
}

.map-item:hover {
    transform: scale(1.05); /* Enlarge on hover */
    box-shadow: 2px 2px 2px purple;
}

.map-item img {
    width: 100%; /* Make the images responsive */
    height: auto;
    max-height: 100px; /* Limit height for uniformity */
    border-radius: 6px; /* Slight rounding for images */
    box-shadow: 0 0 4px white;
}

.player-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.7); /* Background for players */
    border-radius: 8px; /* Rounded corners */
    transition: background-color 0.2s ease;
    justify-content: space-between;
    box-shadow: 0 0 10px rgba(108, 0, 255, 0.2);
}

.player-item:hover {
    background-color: rgba(108, 0, 255, 0.3); /* Highlight row with purple glow */
}

.player-item img {
    border-radius: 50%;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    border: 2px solid #fff; /* Add a border */
}

.player-item span {
    color: #fff; /* Ensure player names are readable */
    font-size: 14px;
}

.letter {
    color: white; /* Example: Blue for letters */
    font-weight: bold;
}

.number {
    color: lawngreen; /* Example: Green for numbers */
    font-weight: bold;
}

/* General styles */
.leaderboard-table .stats-cell .stats-content {
    display: none;
}

/* Add a bit of margin to player names */
.player-name span {
    margin-right: 10px;
}

/* Hamburger only visible on mobile */
.team-manage-hamburger {
    display: none;
    position: absolute;
    top: 55px;
    left: 5px;
    font-size: 26px;
    color: white;
    z-index: 1000;
    cursor: pointer;
}

/* Hide dropdown indicator on larger viewports */
@media (min-width: 993px) {
    .dropdown-indicator {
        display: none;
    }
    .stats-header,
    .stats-cell {
        display: none;
    }
}


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

    .main-container {
        width: 95%; /* Set width to 80% of the page */
        margin: 0 auto; /* Center the container horizontally */
        padding-left: 0px;
    }


    .leaderboard-table th.stat-header,
    .leaderboard-table td.stat-value {
        display: none;
    }

    .leaderboard-table th:nth-child(2),
    .leaderboard-table td:nth-child(2) {
        display: table-cell;
        width: 30%; /* Wider column for Player */
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .rank-cell {
        width: 15%; /* Adjust width as needed */
        cursor: pointer;
        text-align: center;
    }

    /* Increase rank column size for mobile */
@media screen and (max-width: 768px) {
.rank-cell {
        width: 80px; /* Increase width on mobile */
    }
}

/* Increase width for mobile */
@media screen and (max-width: 768px) {
    .leaderboard-table th:first-child,
    .leaderboard-table td:first-child {
        width: 100px; /* Make it larger for mobile readability */
    }
}

    .player-name {
        width: 30%; /* Adjust width as needed */
        cursor: pointer;
        text-align: center;
        position: relative;
        padding-right: 20px; /* Adjust padding as needed */
    }

    .leaderboard-table .stats-cell .stats-content {
        display: none;
    }

    .active .stats-content {
        display: block;
    }

    .dropdown-indicator {
        position: absolute;
        transform: rotate(270deg);
        right: 5px; /* Adjust position as needed */
        font-size: 0.75em;
    }







    .team-stats-table thead {
        display: none;
    }

    .team-stats-table, .team-stats-table tbody, .team-stats-table tr, .team-stats-table td {
        display: block;
        width: 100%;
    }

    .team-stats-table tr {
        margin-bottom: 10px;
    }

    .team-stats-table td {
        text-align: left;
        padding-left: 10px;
        padding-top: 20px;
        position: relative;
    }

    .team-stats-table td::before {
        content: attr(data-label);
        margin-right: 10px;
        font-weight: bold;
        padding: 0px 10px;
        border-right: 1px solid #ddd;
    }


    /* Hamburger Menu Styles */
    .sidebar-hamburger-menu {
        position: fixed;
        top: 10px;
        left: 10px;
        width: 30px;
        height: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        cursor: pointer;
        z-index: 998;
    }

    .sidebar-hamburger-menu .line {
        width: 100%;
        height: 4px;
        background-color: #fff;
    }
    /* Dropdown Menu Styles */
    .teampage-dropdown-menu {
        display: none;
        position: absolute;
        border-radius: 5px;
        width: 130px;
        top: 3px;
        left: 30px;
    }

    .teampage-dropdown-menu a {
        display: block;
        padding: 3px;
        color: white;
        text-decoration: none;
        text-align: center;
    }

    .teampage-dropdown-menu a:hover {
        background-color: #444;
    }
    .overview-container {
        display: block;
        justify-content: space-between;
        align-items: flex-start; /* Align items at the start */
        margin-top: 20px;
    }

    .flex-item {
        flex: 1;
        margin-right: 0px; /* Add space between items */
    }




}


/* Small Display */
/* Responsive adjustments */
@media (max-width: 768px) {
    .main-container {
        padding-left: 0;
    }

    .sidebar-hamburger-menu {
        left: 15px;
    }

    .sidebar-hamburger-menu .line {
        width: 100%;
        height: 4px;
        background-color: #fff;
    }
    /* Dropdown Menu Styles */
    .teampage-dropdown-menu {
        display: none;
        position: absolute;
        border-radius: 5px;
        width: 130px;
        top: 3px;
        left: 30px;
    }

    .overview-container {
        display: block;
        justify-content: space-between;
        align-items: flex-start; /* Align items at the start */
        margin-top: 20px;
    }

    .flex-item {
        flex: 1;
        margin-right: 0px; /* Add space between items */
    }

    .team-stats-table {
        width: 90%; /* Adjust table width for smaller screens */
    }

      .banner img {
    max-width: 300px;
    margin: 0 auto 10px auto;
    justify-content: center;
  }

  .tabs {
    position: relative;
    border-bottom: 1px solid gray;
    padding-bottom: 10px;
  }

  .banner {
    width: 100%;
    height: 40vh;
    position: relative;
  }

  .tablinks {
    background: none;
    border: none;
    font-family: 'Play', Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: gray;
    cursor: pointer;
    margin-right: 20px;
    padding-bottom: 5px;
  }

  .upcoming-matches-table th:nth-child(1) {
    width: 20%;
}

.team-manage-hamburger {
    display: block;
}

/* Hide desktop sidebar version if you have one */
.desktop-teampage-sidebar {
    display: none !important;
}

}

@media (max-width: 576px) {
    .main-container {
        width: 95%; /* Set width to 80% of the page */
        margin: 0 auto; /* Center the container horizontally */
        padding-left: 0px;
    }



    /* Hamburger Menu Styles */
    .sidebar-hamburger-menu {
        position: fixed;
        top: 10px;
        left: 10px;
        width: 30px;
        height: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        cursor: pointer;
        z-index: 998;
    }

    .sidebar-hamburger-menu .line {
        width: 100%;
        height: 4px;
        background-color: #fff;
    }

    /* Dropdown Menu Styles */
    .teampage-dropdown-menu {
        display: none;
        position: absolute;
        border-radius: 5px;
        width: 130px;
        top: 3px;
        left: 30px;
    }

    .teampage-dropdown-menu a {
        display: block;
        padding: 3px;
        color: white;
        text-decoration: none;
        text-align: center;
    }

    .teampage-dropdown-menu a:hover {
        background-color: #444;
    }
    .overview-container {
        display: block;
        justify-content: space-between;
        align-items: flex-start; /* Align items at the start */
        margin-top: 20px;
    }

    .flex-item {
        flex: 1;
        margin-right: 0px; /* Add space between items */
    }

    .clan-tag {
        display:block;
        margin-left: 5px;
        font-size: 0.8em;
        font-weight: bold;
        color: rgb(180, 178, 178);
    }


}

@media screen and (min-width: 992px) {
    .mobile-stats-row {
        display: none !important; /* Hide dropdown stats row on desktop */
    }
}

@media screen and (max-width: 991px) {
    .stat-value {
        display: none !important; /* Hide inline stats on mobile */
    }
}