/* GENERAL STYLES */
/* Apply to the body or a main wrapper div */
body {
    margin: 0;
    /* Ensure no default margin */
}

.neon-background {
    background: radial-gradient(circle at center, #0a0a0a, #000000); /* Deeper gradient */
    color: #e0e0e0; /* Slightly softer text */
    font-family: 'Exo 2', sans-serif; /* A more modern, slightly techy font */
    /* Montserrat is included as a fallback via HTML link */
    overflow-x: hidden;
    position: relative;
    padding-bottom: 80px; /* More space at the bottom */
    min-height: 100vh; /* Ensure background covers at least the full viewport height */
}

/* --- Enhanced Neon Lights --- */
.neon-background::before,
.neon-background::after,
.neon-background .neon-light-secondary { /* Added a third light element */
    content: '';
    position: absolute;
    width: 400px; /* Larger lights */
    height: 400px;
    border-radius: 50%;
    filter: blur(200px); /* More intense blur */
    opacity: 0.6; /* Slightly less opaque */
    animation: moveLight 10s infinite alternate ease-in-out; /* Slower animation */
    z-index: 0; /* Behind page content but above plain background */
}

.neon-background::before {
    background: rgba(0, 255, 255, 0.8); /* Brighter Cyan */
    top: 5%; /* Move closer to the top-left */
    left: 5%;
    animation-duration: 10s;
    animation-delay: 0s;
}

.neon-background::after {
    background: rgba(255, 0, 255, 0.8); /* Brighter Magenta */
    bottom: 5%; /* Move closer to the bottom-right */
    right: 5%;
    animation-duration: 10s;
    animation-delay: 5s; /* Half cycle delay */
}

/* Optional: Add a third light */
.neon-background .neon-light-secondary {
    /* HTML element <div class="neon-light-secondary"></div> must be added to body */
    background: rgba(255, 255, 0, 0.7); /* Yellow or Green */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center it initially */
    animation: moveLightSecondary 12s infinite alternate ease-in-out; /* Different animation */
    animation-delay: 2s;
}


@keyframes moveLight {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(100px, -50px) scale(1.05); /* Slightly bigger in middle */
    }
    100% {
        transform: translate(200px, -100px) scale(1);
    }
}

/* Different animation for the third light */
@keyframes moveLightSecondary {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    50% {
        transform: translate(-45%, -55%) rotate(15deg);
    }
    100% {
        transform: translate(-55%, -45%) rotate(-15deg);
    }
}

/* NAVIGATION BAR INTEGRATION STYLING */
#main-league-content {
    /* This will be the main container for league page content,
       allowing it to be offset by the fixed navigation. */
    transition: margin-left 0.3s ease-in-out; /* Smooth transition for sidebar */
}

/* PAGE STRUCTURE & CONTAINER */
#league-page {
    max-width: 1300px; /* Slightly wider */
    margin: 50px auto; /* More margin top/bottom, auto for L/R centering */
    color: #ecf0f1;
    border-radius: 15px;
    box-shadow:
            0 0 15px rgba(0, 255, 255, 0.4), /* Inner cyan glow */
            0 0 30px rgba(0, 255, 255, 0.3),
            0 0 45px rgba(255, 0, 255, 0.3), /* Outer magenta glow */
            0 0 60px rgba(255, 0, 255, 0.2),
            inset 0 0 10px rgba(0, 255, 255, 0.2); /* Subtle inner highlight */

    opacity: 0;
    animation: fadeInScale 1.5s ease-in-out forwards; /* Slower fade-in with scale */
    transform: scale(0.95) translateY(30px); /* Start slightly smaller and lower */
    position: relative;
    z-index: 2; /* Ensure it's above the background lights */
    overflow: hidden;
    border: 1px solid rgba(0, 255, 255, 0.3); /* Subtle border */
    background-color: rgba(15, 25, 35, 0.8); /* Slightly darker, more defined base */
    backdrop-filter: blur(5px); /* Subtle blur effect behind content */
}

@keyframes fadeInScale {
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* HEADER STYLES */
.league-header {
    padding: 40px 30px; /* More padding */
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px; /* More space between elements */
    background-color: rgba(20, 35, 50, 0.9); /* Darker header background */
    border-bottom: 3px solid rgba(0, 255, 255, 0.5); /* Thicker, brighter highlight */
    border-image: linear-gradient(to right, transparent, rgba(0, 255, 255, 0.5), transparent) 1;
    border-bottom-width: 3px;
    border-bottom-style: solid;
}

.league-cover {
    width: calc(100% - 40px); /* Slightly inset from header padding */
    max-height: 400px; /* Taller image */
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 255, 255, 0.6); /* Stronger initial shadow */
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out; /* Slower, smoother transition */
    border: 2px solid transparent; /* Prepare for hover border */
}

.league-cover:hover {
    transform: scale(1.03); /* Slightly less aggressive scale */
    box-shadow:
            0 0 20px rgba(255, 0, 255, 0.8),
            0 0 40px rgba(255, 0, 255, 0.6);
    border-color: rgba(255, 0, 255, 0.5); /* Add a border highlight on hover */
}

.league-header h1 {
    font-size: 3.5em; /* Larger heading */
    margin: 0; /* Reset margin */
    text-shadow:
            0 0 15px rgba(0, 255, 255, 0.9),
            0 0 30px rgba(0, 255, 255, 0.6),
            0 0 45px rgba(255, 0, 255, 0.6),
            0 0 60px rgba(255, 0, 255, 0.4);
    letter-spacing: 2px; /* Add some letter spacing */
    text-transform: uppercase; /* Make it punchier */
}

.header-info {
    font-size: 1.2em; /* Slightly larger info text */
    color: #bdc3c7;
    opacity: 0.8; /* Subtle opacity */
    font-style: italic; /* Add a subtle style */
}

/* NEW: Container for horizontal video sections */
.video-sections-container {
    display: flex;
    justify-content: center; /* Center the buttons row */
    gap: 20px; /* Space between video sections */
    flex-wrap: wrap; /* Allow sections to wrap to the next line on smaller screens */
    margin-top: 20px; /* Space below header text/image */
    width: 100%; /* Take full width to center children */
}

.video-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Style for video toggle buttons */
.toggle-video-button {
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    background: linear-gradient(45deg, #3498db, #2980b9);
    color: white;
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    box-shadow:
            0 0 5px rgba(52, 152, 219, 0.6),
            0 0 10px rgba(52, 152, 219, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.toggle-video-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
    transform: skewX(-30deg);
}

.toggle-video-button:hover {
    background: linear-gradient(45deg, #2980b9, #3498db);
    box-shadow:
            0 0 8px rgba(52, 152, 219, 0.8),
            0 0 15px rgba(52, 152, 219, 0.6),
            0 0 20px rgba(255, 0, 255, 0.4);
    transform: translateY(-2px);
}

.toggle-video-button:hover::before {
    left: 100%;
}

.toggle-video-button:active {
    transform: translateY(0);
    box-shadow: 0 0 3px rgba(52, 152, 219, 0.4);
    background: #2980b9;
}

.video-container {
    width: 100%;
    max-width: 560px; /* Max width for a standard video */
    /* display: none; is handled by JS */
}

.video-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9; /* Maintain 16:9 aspect ratio */
    height: auto; /* Adjust height automatically */
    display: block;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.3);
}


/* CONTENT SECTIONS */
.league-content {
    padding: 30px; /* More padding */
    display: flex;
    flex-direction: column;
    gap: 40px; /* More space between sections */
}

.league-section {
    padding: 30px; /* More padding inside sections */
    background: rgba(25, 40, 55, 0.9); /* Darker section background */
    border-radius: 10px;
    box-shadow:
            0 0 10px rgba(0, 255, 255, 0.4),
            0 0 20px rgba(0, 255, 255, 0.3);
    border: 1px solid rgba(0, 255, 255, 0.2); /* Subtle border */
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-color 0.4s ease-in-out; /* Smoother transition */
    width: 100%; /* Use full width within content padding */
    max-width: 1100px;
    margin-left: auto; /* Center within the flex container if needed, but gap handles spacing */
    margin-right: auto;
    position: relative; /* Needed for pseudo-elements or specific highlights */
    overflow: hidden; /* Keep content within bounds */
}

.league-section h2 {
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 20px;
    color: #1abc9c; /* Highlight color for headers */
    text-shadow: 0 0 8px rgba(26, 188, 156, 0.6);
    border-bottom: 2px solid rgba(26, 188, 156, 0.3); /* Underline effect */
    padding-bottom: 10px;
}


.league-section:hover {
    transform: translateY(-5px); /* Less aggressive lift */
    box-shadow:
            0 0 15px rgba(0, 255, 255, 0.6),
            0 0 30px rgba(255, 0, 255, 0.5);
    border-color: rgba(255, 0, 255, 0.4); /* Change border color on hover */
}

/* Registration Section Specifics */
.registration h3 { /* Targeting the "League Registration" heading */
    text-align: center;
    padding-bottom: 16px; /* Similar to w3-padding-16 bottom */
    font-size: 1.5em; /* Example size, adjust as needed */
    color: #ecf0f1; /* Match general text or make it stand out */
}

/* League Dates Section Specifics */
.league-dates .additional-info {
    text-align: center;
    padding: 16px 0;
}
.league-dates .additional-info h2 { /* "Additional Information" title */
    display: inline-block; /* To make border fit text */
    margin-bottom: 15px;
}
.league-dates .additional-info p {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #bdc3c7;
}


/* LIST STYLES */
.league-details ul {
    list-style: none;
    padding: 0;
    margin: 0; /* Ensure no default margin */
}

.league-details li {
    margin-bottom: 12px; /* More space between items */
    padding: 15px; /* More padding */
    border-radius: 8px; /* Slightly more rounded corners */
    background: rgba(35, 55, 70, 0.9); /* Darker list items */
    color: #e0e0e0;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Add shadow to transition */
    position: relative;
    overflow: hidden; /* Ensure pseudo-elements are clipped */
    border-left: 3px solid transparent; /* Prepare for highlight */
}

.league-details li:hover {
    background-color: rgba(45, 70, 90, 0.9);
    transform: translateX(5px); /* Slide slightly */
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.4); /* Add subtle glow on hover */
    border-left-color: rgba(0, 255, 255, 0.7); /* Highlight border */
}

/* --- Important Dates section --- */
.important-dates {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.important-dates li {
    margin-bottom: 15px; /* More space */
    position: relative;
    padding: 10px 15px 10px 40px; /* Add left padding for icon */
    background: rgba(30, 50, 65, 0.9);
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(26, 188, 156, 0.2);
    overflow: hidden;
}

.important-dates li:hover {
    background-color: rgba(40, 60, 75, 0.9);
    transform: translateY(-3px); /* Lift slightly */
    box-shadow: 0 0 12px rgba(26, 188, 156, 0.5);
}

.important-dates > li::before {
    content: '>'; /* or '\203A' or '\27A4' or '\25B6' */
    font-size: 1.2em;
    color: #1abc9c; /* Highlight color */
    position: absolute;
    left: 15px; /* Position icon */
    top: 50%;
    transform: translateY(-50%);
    text-shadow: 0 0 5px rgba(26, 188, 156, 0.7); /* Glow effect */
    font-weight: bold;
}

.highlight {
    font-weight: bold;
    color: #1abc9c; /* Keep highlight color */
    text-shadow: 0 0 5px rgba(26, 188, 156, 0.5);
}

/* TABLE STYLES */
.table-responsive-wrapper {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    margin-top: 20px; /* Space above table */
    border-radius: 8px; /* Match table's border radius */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); /* Table glow on wrapper */
    border: 1px solid rgba(0, 255, 255, 0.2); /* Subtle table border on wrapper */
}

.results-table {
    width: 100%;
    min-width: 600px; /* Prevent extreme squishing before scroll kicks in */
    border-collapse: collapse;
    /* box-shadow and border moved to wrapper to contain scrolling effect */
    /* overflow: hidden; -- not needed if wrapper handles border-radius */
    /* border-radius: 8px; -- not needed if wrapper handles border-radius */
}

.results-table th,
.results-table td {
    border: 1px solid rgba(127, 140, 141, 0.3); /* Softer border */
    padding: 12px; /* More padding */
    text-align: left;
    color: #e0e0e0;
}

.results-table th {
    background-color: rgba(35, 55, 70, 0.9); /* Darker header */
    text-align: center;
    color: #1abc9c; /* Highlight header text */
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(0, 255, 255, 0.4);
}

.results-table tbody tr {
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.results-table tbody tr:hover {
    background-color: rgba(45, 70, 90, 0.9);
    transform: scale(1.005); /* Very subtle scale */
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.4); /* Magenta glow on hover */
    cursor: pointer; /* Indicate interactivity */
}


/* COLLAPSIBLE BUTTON STYLES */
.button-container {
    display: flex;
    justify-content: center;
    margin: 20px 0 30px 0; /* More space */
}

.neon-button {
    padding: 12px 25px; /* More padding */
    font-size: 18px; /* Larger text */
    font-weight: bold;
    cursor: pointer;
    background: linear-gradient(45deg, #3498db, #2980b9); /* Gradient background */
    color: white;
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    box-shadow:
            0 0 8px rgba(52, 152, 219, 0.7),
            0 0 15px rgba(52, 152, 219, 0.5); /* Blue glow */
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.neon-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* Swipe effect */
    transition: all 0.4s ease;
    transform: skewX(-30deg);
}


.neon-button:hover {
    background: linear-gradient(45deg, #2980b9, #3498db); /* Reverse gradient */
    box-shadow:
            0 0 10px rgba(52, 152, 219, 0.9),
            0 0 20px rgba(52, 152, 219, 0.7),
            0 0 30px rgba(255, 0, 255, 0.5); /* Add magenta to hover glow */
    transform: translateY(-3px);
}

.neon-button:hover::before {
    left: 100%; /* Complete the swipe */
}


.neon-button:active {
    transform: translateY(0);
    box-shadow:
            0 0 5px rgba(52, 152, 219, 0.5); /* Less glow when pressed */
    background: #2980b9;
}


/* IFRAME CONTAINER STYLES (for registration form) */
.iframe-container {
    display: none; /* Controlled by JS */
    margin: 30px auto; /* More space */
    width: 95%; /* Wider container */
    max-width: 900px; /* Increased max width */
    border-radius: 10px;
    box-shadow:
            0 0 10px rgba(0, 255, 255, 0.5),
            0 0 20px rgba(0, 255, 255, 0.3);
    background-color: rgba(0, 0, 0, 0.5); /* Dark background behind iframe */
    padding: 10px; /* Padding around the iframe */
    border: 1px solid rgba(0, 255, 255, 0.3);
}

.iframe-container iframe {
    width: 100%;
    height: 600px; /* Taller iframe */
    border: none;
    border-radius: 8px; /* Slightly less rounded than container */
    display: block; /* Remove extra space below iframe */
}


/* CHALLONGE BRACKET STYLING */
.bracket-section {
    padding: 30px;
    background: rgba(25, 40, 55, 0.9);
    border-radius: 10px;
    box-shadow:
            0 0 10px rgba(0, 255, 255, 0.4),
            0 0 20px rgba(0, 255, 255, 0.3);
    border: 1px solid rgba(0, 255, 255, 0.2);
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
    text-align: center;
}

.bracket-section h2 { /* Overrides default .league-section h2 for this specific section if needed */
    font-size: 2.2em; /* Slightly larger for emphasis, or keep at 2em */
    margin-top: 0;
    margin-bottom: 20px; /* Original 20px */
    color: #1abc9c;
    text-shadow: 0 0 8px rgba(26, 188, 156, 0.6);
    border-bottom: 2px solid rgba(26, 188, 156, 0.3);
    padding-bottom: 10px;
    display: inline-block; /* Fit border to text */
}
.bracket-section .bracket-content-wrapper { /* New wrapper for padding if needed */
    padding-top: 20px; /* Adjust if more space is needed below h2 */
    /* padding-bottom: 20px; */ /* Replaces w3-padding-64 if needed */
}


/* Style for the iframe container specifically within the bracket section */
.bracket-iframe-container {
    margin-top: 20px;
    width: 100%; /* Use full width */
    max-width: 1000px; /* Allow wider brackets if needed */
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    box-shadow:
            0 0 10px rgba(0, 255, 255, 0.5),
            0 0 20px rgba(0, 255, 255, 0.3);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border: 1px solid rgba(0, 255, 255, 0.3);
}

.bracket-iframe-container iframe {
    width: 100%;
    height: 800px; /* Make bracket iframe taller */
    border: none;
    border-radius: 8px;
    display: block; /* Ensure no extra space */
}

/* Media Queries for basic responsiveness */

/* Adjustments for Navigation Bar States */
@media screen and (min-width: 1200px) {
    #main-league-content {
        margin-left: 200px; /* Width of the sidebar from Navigation_Bar.css */
    }
    /* #league-page default margin: 50px auto; is fine here */
}

@media screen and (max-width: 1199px) {
    #main-league-content {
        margin-left: 0;
    }
    /* Body gets padding-top: 50px from nav bar CSS.
       Adjust #league-page top margin to avoid excessive spacing. */
    #league-page {
        /* Default margin: 50px auto. New top: 30px */
        /* Total top space = 50px (body padding) + 30px = 80px */
        margin-top: 30px;
    }
}


@media (max-width: 768px) {
    #league-page {
        margin: 20px auto; /* This rule will override the margin-top: 30px from above */
        /* Total top space < 768px: 50px (body) + 20px = 70px */
        border-radius: 10px;
        box-shadow:
                0 0 10px rgba(0, 255, 255, 0.4),
                0 0 20px rgba(255, 0, 255, 0.3);
    }

    .league-header {
        padding: 20px 15px; /* Reduced horizontal padding */
        gap: 15px;
    }

    .league-header h1 {
        font-size: 2.2em;
    }

    .header-info {
        font-size: 1em;
    }

    .league-cover {
        max-height: 250px;
        width: 100%; /* Ensure it takes full width of its container */
        /* calc(100% - 40px) might be too much inset on small screens */
    }

    .video-sections-container {
        flex-direction: column;
        gap: 25px; /* Increased gap for vertical stacking */
    }

    .video-section {
        width: 100%; /* Ensure video sections take full width when stacked */
        padding: 0; /* Remove padding if children handle it */
    }
    .toggle-video-button {
        padding: 10px 15px;
        font-size: 0.9em;
    }
    .video-container {
        max-width: 100%; /* Ensure it doesn't exceed parent */
    }


    .league-content {
        padding: 15px;
        gap: 25px;
    }

    .league-section {
        padding: 20px;
    }

    .league-section h2 {
        font-size: 1.6em;
        margin-bottom: 15px;
    }
    .bracket-section h2 { /* Adjust bracket header specifically if needed */
        font-size: 1.8em;
    }


    .league-details li {
        padding: 12px;
        margin-bottom: 10px;
    }

    .important-dates li {
        padding: 8px 10px 8px 35px;
        margin-bottom: 10px;
    }

    .important-dates > li::before {
        left: 10px;
        font-size: 1em;
    }

    .table-responsive-wrapper {
        margin-top: 15px;
    }
    .results-table {
        min-width: 0; /* Allow table to shrink more, rely on scroll */
    }
    .results-table th,
    .results-table td {
        padding: 8px;
        font-size: 0.9em;
    }

    .neon-button {
        padding: 10px 20px;
        font-size: 16px;
    }

    .iframe-container,
    .bracket-iframe-container {
        padding: 5px;
    }

    .iframe-container iframe {
        height: 450px; /* Adjusted height for registration iframe */
    }

    .bracket-iframe-container iframe {
        height: 600px;
    }

    .neon-background::before,
    .neon-background::after,
    .neon-background .neon-light-secondary {
        width: 250px; /* Slightly larger on mobile for effect */
        height: 250px;
        filter: blur(120px);
    }
}

@media (max-width: 480px) {
    .league-header {
        padding: 15px 10px;
    }
    .league-header h1 {
        font-size: 1.8em;
    }
    .header-info {
        font-size: 0.9em;
    }

    .league-cover {
        max-height: 200px;
    }

    .league-content {
        padding: 10px;
        gap: 20px;
    }

    .league-section {
        padding: 15px;
    }

    .league-section h2 {
        font-size: 1.4em;
    }
    .bracket-section h2 {
        font-size: 1.6em;
    }

    .league-details li {
        padding: 10px;
        font-size: 0.9em;
    }
    .important-dates li {
        padding: 8px 10px 8px 30px;
        font-size: 0.9em;
    }
    .important-dates > li::before {
        left: 8px;
    }


    .results-table th,
    .results-table td {
        padding: 6px;
        font-size: 0.8em;
    }

    .neon-button {
        padding: 8px 15px;
        font-size: 14px;
    }
    .toggle-video-button {
        padding: 8px 12px;
        font-size: 0.8em;
    }

    .iframe-container iframe {
        height: 400px;
    }

    .bracket-iframe-container iframe {
        height: 500px;
    }

    .neon-background::before,
    .neon-background::after,
    .neon-background .neon-light-secondary {
        width: 200px;
        height: 200px;
        filter: blur(100px);
    }
}