/* =========================================================
   KSG LEAGUES — DISTINCT PAGE BANNER PATTERNS
   Top navigation intentionally untouched.
   ========================================================= */

/* Shared banner modifier behavior only. */
[class*="pattern-"]::before,
[class*="pattern-"]::after{
    pointer-events:none;
}

/* ABOUT — contour / topographic arcs */
.pattern-about::before{
    opacity:.62 !important;
    background-image:
        repeating-radial-gradient(
            ellipse at 84% 46%,
            transparent 0 20px,
            rgba(255,255,255,.075) 21px 22px,
            transparent 23px 42px
        ) !important;
    background-size:100% 100% !important;
}
.pattern-about::after{
    width:38% !important;
    aspect-ratio:1.6 !important;
    border-radius:48% 52% 44% 56% / 58% 42% 58% 42% !important;
    border:1px solid rgba(255,255,255,.11) !important;
    box-shadow:
        0 0 0 34px rgba(255,255,255,.022),
        0 0 0 70px rgba(255,255,255,.014) !important;
}

/* LEAGUES INDEX — competition bracket / grid */
.pattern-leagues::before{
    opacity:.66 !important;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
        linear-gradient(135deg,transparent 48%,rgba(255,255,255,.055) 49% 51%,transparent 52%) !important;
    background-size:46px 46px,46px 46px,92px 92px !important;
}
.pattern-leagues::after{
    width:42% !important;
    aspect-ratio:1 !important;
    border-radius:18px !important;
    transform:translateY(-50%) rotate(45deg) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:
        0 0 0 42px rgba(255,255,255,.018),
        0 0 0 84px rgba(255,255,255,.012) !important;
}

/* SCHEDULE / MY SCHEDULE — timeline ticks */
.pattern-schedule::before,
.pattern-my-schedule::before{
    opacity:.72 !important;
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.09) 0 2px,
            transparent 2px 58px
        ),
        linear-gradient(
            0deg,
            transparent 49%,
            rgba(255,255,255,.08) 49% 51%,
            transparent 51%
        ) !important;
    background-size:100% 100%,100% 100% !important;
}
.pattern-schedule::after,
.pattern-my-schedule::after{
    width:44% !important;
    aspect-ratio:2.6 !important;
    border-radius:999px !important;
    border:1px dashed rgba(255,255,255,.12) !important;
    box-shadow:
        inset 0 0 0 26px rgba(255,255,255,.012),
        0 0 0 38px rgba(255,255,255,.010) !important;
}

/* TEAMS INDEX — directional chevrons */
.pattern-teams::before{
    opacity:.64 !important;
    background-image:
        linear-gradient(135deg,transparent 42%,rgba(255,255,255,.07) 42% 47%,transparent 47%),
        linear-gradient(45deg,transparent 42%,rgba(255,255,255,.045) 42% 47%,transparent 47%) !important;
    background-size:84px 84px !important;
    background-position:0 0,42px 42px !important;
}
.pattern-teams::after{
    width:40% !important;
    aspect-ratio:1.9 !important;
    border-radius:0 !important;
    transform:translateY(-50%) skewX(-18deg) rotate(-6deg) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:
        40px 0 0 rgba(255,255,255,.012),
        80px 0 0 rgba(255,255,255,.008) !important;
}

/* NEWS — editorial halftone */
.pattern-news::before{
    opacity:.63 !important;
    background-image:
        radial-gradient(circle,rgba(255,255,255,.10) 0 1.4px,transparent 1.6px),
        radial-gradient(circle,rgba(255,255,255,.045) 0 1px,transparent 1.2px) !important;
    background-size:20px 20px,36px 36px !important;
    background-position:0 0,10px 10px !important;
}
.pattern-news::after{
    width:36% !important;
    aspect-ratio:1 !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.12) !important;
    background:
        repeating-radial-gradient(circle at center,transparent 0 18px,rgba(255,255,255,.025) 19px 20px) !important;
}

/* WORK WITH KSG — lanes / match-day stripes */
.pattern-work::before{
    opacity:.66 !important;
    background-image:
        repeating-linear-gradient(
            112deg,
            transparent 0 34px,
            rgba(255,255,255,.075) 35px 37px,
            transparent 38px 72px
        ) !important;
    background-size:180px 180px !important;
}
.pattern-work::after{
    width:38% !important;
    aspect-ratio:2.4 !important;
    border-radius:999px !important;
    transform:translateY(-50%) rotate(-12deg) !important;
    border:2px solid rgba(255,255,255,.09) !important;
    box-shadow:
        inset 0 0 0 18px rgba(255,255,255,.012),
        0 0 0 30px rgba(255,255,255,.009) !important;
}

/* OPENINGS — radar / availability rings */
.pattern-openings::before{
    opacity:.68 !important;
    background-image:
        repeating-radial-gradient(
            circle at 76% 50%,
            transparent 0 28px,
            rgba(255,255,255,.07) 29px 30px,
            transparent 31px 58px
        ),
        linear-gradient(90deg,transparent 75.8%,rgba(255,255,255,.06) 76%,transparent 76.2%) !important;
    background-size:100% 100% !important;
}
.pattern-openings::after{
    width:28% !important;
    aspect-ratio:1 !important;
    border-radius:50% !important;
    border:1px dashed rgba(255,255,255,.14) !important;
    box-shadow:
        0 0 0 28px rgba(255,255,255,.015),
        0 0 0 56px rgba(255,255,255,.009) !important;
}

/* PARTNERSHIPS — connected nodes */
.pattern-partnerships::before,
.pattern-partner-form::before{
    opacity:.68 !important;
    background-image:
        radial-gradient(circle at 20% 28%,rgba(255,255,255,.13) 0 3px,transparent 3.5px),
        radial-gradient(circle at 55% 68%,rgba(255,255,255,.11) 0 3px,transparent 3.5px),
        radial-gradient(circle at 82% 28%,rgba(255,255,255,.12) 0 3px,transparent 3.5px),
        linear-gradient(28deg,transparent 0 49.5%,rgba(255,255,255,.055) 50%,transparent 50.5%),
        linear-gradient(-26deg,transparent 0 49.5%,rgba(255,255,255,.045) 50%,transparent 50.5%) !important;
    background-size:180px 150px,220px 170px,200px 160px,180px 150px,220px 170px !important;
}
.pattern-partnerships::after,
.pattern-partner-form::after{
    width:32% !important;
    aspect-ratio:1 !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:
        -38px 26px 0 -37px rgba(255,255,255,.25),
        38px -20px 0 -37px rgba(255,255,255,.22),
        0 0 0 52px rgba(255,255,255,.010) !important;
}

/* STANDALONE TEAM REGISTRATION — badge weave */
.pattern-team-register::before{
    opacity:.66 !important;
    background-image:
        linear-gradient(30deg,rgba(255,255,255,.055) 12%,transparent 12.5% 87%,rgba(255,255,255,.055) 87.5%),
        linear-gradient(150deg,rgba(255,255,255,.045) 12%,transparent 12.5% 87%,rgba(255,255,255,.045) 87.5%) !important;
    background-size:70px 120px !important;
}
.pattern-team-register::after{
    width:30% !important;
    aspect-ratio:.86 !important;
    border-radius:26% 26% 42% 42% / 18% 18% 62% 62% !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:inset 0 0 0 22px rgba(255,255,255,.012) !important;
}

/* LEAGUE ENTRY — convergence / qualification */
.pattern-league-entry::before{
    opacity:.68 !important;
    background-image:
        repeating-linear-gradient(25deg,transparent 0 44px,rgba(255,255,255,.065) 45px 46px,transparent 47px 90px),
        repeating-linear-gradient(-25deg,transparent 0 52px,rgba(255,255,255,.035) 53px 54px,transparent 55px 104px) !important;
}
.pattern-league-entry::after{
    width:34% !important;
    aspect-ratio:1 !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.11) !important;
    box-shadow:
        inset 0 0 0 32px rgba(255,255,255,.012),
        inset 0 0 0 64px rgba(255,255,255,.008) !important;
}

/* LEAGUE DETAIL — championship rays */
.pattern-league-detail::before{
    opacity:.66 !important;
    background-image:
        repeating-conic-gradient(
            from 8deg at 78% 50%,
            rgba(255,255,255,.052) 0deg 2deg,
            transparent 2deg 15deg
        ) !important;
    background-size:100% 100% !important;
}
.pattern-league-detail::after{
    width:32% !important;
    aspect-ratio:1 !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.11) !important;
    box-shadow:
        0 0 0 40px rgba(255,255,255,.012),
        0 0 0 80px rgba(255,255,255,.008) !important;
}

/* TEAM DETAIL — field geometry */
.pattern-team-detail::before{
    opacity:.68 !important;
    background-image:
        linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) !important;
    background-size:92px 58px !important;
}
.pattern-team-detail::after{
    width:34% !important;
    aspect-ratio:1.55 !important;
    border-radius:0 !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:inset 0 0 0 28px rgba(255,255,255,.010) !important;
}

/* PLAYER DETAIL — stat ticks */
.pattern-player-detail::before{
    opacity:.66 !important;
    background-image:
        repeating-linear-gradient(90deg,transparent 0 27px,rgba(255,255,255,.075) 28px 29px,transparent 30px 56px),
        repeating-linear-gradient(0deg,transparent 0 53px,rgba(255,255,255,.035) 54px 55px,transparent 56px 110px) !important;
}
.pattern-player-detail::after{
    width:30% !important;
    aspect-ratio:1 !important;
    border-radius:50% !important;
    border:1px dashed rgba(255,255,255,.12) !important;
    box-shadow:inset 0 0 0 42px rgba(255,255,255,.010) !important;
}

/* Keep all page patterns subtle on mobile. */
@media(max-width:620px){
    [class*="pattern-"]::before{
        opacity:.46 !important;
    }
    [class*="pattern-"]::after{
        opacity:.55 !important;
    }
}