/* MC-Complex visual layer, matched to the Vanilla homepage. */

:root{
    --ink:#17181b;
    --panel:#1d1e21;
    --purple:#ffce48;
    --violet:#ffd861;
    --pink:#ffce48;
    --cream:#fff;
    --muted:#b9bbc2;
    --line:rgba(255,255,255,.1)
}

body{
    font-family:"Stack Sans Text",sans-serif;
    background:#17181b;
    color:#fff
}

h1,h2,.date-lockup b,.date-lockup strong,.countdown b,.format-card h3,.team-card .team-icon,.team-card h3,.game-row h3,.schedule-item time,.standing-row b,.brand,.ticker div{
    font-family:"Bowlby One SC",sans-serif;
    font-weight:400
}

.brand small,.schedule-tabs button{
    font-family:"Stack Sans Text",sans-serif
}

.site-header{
    height:149px;
    padding:0;
    display:block;
    background:#17181b;
    border:0;
    position:absolute
}

.network-nav{
    height:98px;
    padding:0 max(14px,calc((100vw - 1240px)/2));
    display:grid;
    grid-template-columns:1fr 280px 1fr;
    align-items:center;
    border-bottom:1px solid #303136
}

.network-links{
    display:flex;
    gap:14px
}

.network-right{
    justify-content:flex-end
}

.network-links a{
    font-family:"Bowlby One SC";
    font-size:12px;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    padding:14px 15px;
    background:linear-gradient(#343438,#29292d);
    border:1px solid #414147;
    border-radius:5px;
    box-shadow:inset 0 -3px rgba(0,0,0,.2)
}

.network-links a:hover{
    filter:brightness(1.15)
}

.network-links .network-active{
    background:linear-gradient(#ffd45b,#f8c43c);
    color:#79641c;
    border-color:#ffe27d
}

.network-links .discord-link{
    background:linear-gradient(#8889ff,#6e70e9);
    border-color:#9b9cff
}

.complex-logo{
    display:grid;
    place-items:center;
    height:90px
}

.complex-logo img{
    display:block;
    max-width:235px;
    max-height:82px;
    object-fit:contain
}

.event-nav{
    height:51px;
    padding:0 max(14px,calc((100vw - 1240px)/2));
    display:flex;
    align-items:center;
    gap:28px;
    border-bottom:1px solid #303136;
    background:#1c1d20
}

.brand{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.4px
}

.cube-mark{
    color:#ffce48;
    font-size:17px
}

.event-nav nav{
    display:flex;
    gap:24px
}

.event-nav nav a{
    color:#bdbfc4;
    text-decoration:none;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase
}

.event-nav nav a:hover{
    color:#fff
}

.server-pill{
    margin-left:auto;
    padding:7px 12px;
    border:1px solid #2c2d31;
    border-radius:4px;
    background:#151619;
    font-size:8px;
    font-weight:800;
    letter-spacing:1.1px
}

.server-pill b{
    color:#55e75d;
    margin-left:5px
}

.live-button{
    background:linear-gradient(#8889ff,#6e70e9);
    color:#fff;
    box-shadow:inset 0 -3px rgba(0,0,0,.18);
    border:1px solid #9798ff;
    border-radius:4px
}

.live-button span{
    background:#fff;
    box-shadow:none
}

.menu-toggle{
    display:none
}

.hero{
    padding-top:205px;
    background:radial-gradient(circle at 78% 42%,rgba(111,114,236,.18),transparent 31%),linear-gradient(120deg,#17181b 20%,#1d1e21 72%,#17181b);
    min-height:870px
}

.hero:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:8px;
    background:linear-gradient(135deg,transparent 33%,#1f2024 33%,#1f2024 66%,transparent 66%) 0 0/48px 16px
}

.hero:after{
    border-color:rgba(255,206,72,.07)
}

.hero-orbit{
    border-color:rgba(255,206,72,.12)
}

h1 span,.section-label,.date-lockup strong,.game-row>span,.game-row b,.schedule-item time{
    color:#ffce48
}

.eyebrow span{
    background:#ffce48
}

.hero-copy,.intro-copy,.section-heading p{
    color:#c9cad0
}

.event-card{
    background:#1d1e21;
    border:1px solid #3a3b40;
    border-radius:4px;
    box-shadow:0 18px 45px rgba(0,0,0,.35),inset 0 -5px rgba(0,0,0,.12)
}

.date-lockup{
    border-bottom:0
}

.countdown div{
    background:#16171a;
    border:1px solid #292a2f;
    border-radius:3px
}

.button{
    border-radius:4px;
    box-shadow:inset 0 -4px rgba(0,0,0,.16)
}

.button.primary{
    background:linear-gradient(#ffd45b,#f8c43c);
    color:#78631b;
    border:2px solid #ffe078;
    box-shadow:inset 0 -4px rgba(150,103,0,.16)
}

.button.ghost{
    background:linear-gradient(#343438,#29292d);
    border-color:#44454b
}

.ticker{
    background:#ffce48;
    color:#78631b;
    transform:none
}

.ticker i{
    color:#fff4bd
}

.ticker .ticker-track{
    display:flex;
    width:max-content;
    gap:45px;
    padding:0;
    animation:ticker-scroll 18s linear infinite;
    will-change:transform
}

.ticker .ticker-group{
    display:flex;
    align-items:center;
    gap:45px;
    padding:18px 0;
    white-space:nowrap;
    flex:none
}

.ticker .ticker-group b{
    font:inherit
}

@keyframes ticker-scroll{
    to{
        transform:translateX(var(--ticker-shift,-700px))
    }

}

.ticker:hover .ticker-track{
    animation-play-state:paused
}

.section{
    position:relative
}

.intro:after,.teams-section:after,.games-section:after,.schedule-section:after,.standings-section:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-8px;
    height:8px;
    background:linear-gradient(135deg,transparent 33%,#202125 33%,#202125 66%,transparent 66%) 0 0/48px 16px;
    z-index:2
}

.format-grid{
    border-color:#35363b
}

.format-card{
    background:#1b1c1f
}

.accent-card{
    background:linear-gradient(#ffd45b,#f8c43c);
    color:#6e5916
}

.accent-card>span,.accent-card p{
    color:#806a22
}

.teams-section,.standings-section{
    background:#1d1e21
}

.team-card{
    background:linear-gradient(160deg,color-mix(in srgb,var(--team) 20%,#292a2e),#151619 75%);
    border-radius:4px;
    box-shadow:inset 0 -4px rgba(0,0,0,.15)
}

.game-row:hover{
    background:rgba(255,206,72,.06)
}

.schedule-tabs button.active{
    border-color:#ffce48
}

.standings-state i{
    background:#ffce48;
    box-shadow:0 0 12px #ffce48
}

.watch-section{
    background:linear-gradient(120deg,#6669de,#7779ed 62%,#4ba6e3)
}

.button.light{
    color:#222;
    background:#fff
}

.play-ring span{
    color:#6f72ec
}

footer{
    background:#202125;
    max-width:none;
    padding-left:max(28px,calc((100vw - 1240px)/2));
    padding-right:max(28px,calc((100vw - 1240px)/2))
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    text-decoration:none;
    width:max-content
}

.footer-logo-art{
    display:block;
    position:relative;
    width:105px;
    height:54px;
    overflow:hidden;
    flex:0 0 105px
}

.footer-logo-art img{
    position:absolute;
    display:block;
    width:105px;
    height:auto;
    max-width:none;
    left:50%;
    top:50%;
    transform:translate(-50%,-25%)
}

.footer-wordmark{
    font-family:"Bowlby One SC",sans-serif;
    font-size:15px;
    line-height:.9;
    white-space:nowrap
}

.footer-wordmark small{
    display:block;
    font:700 8px "Stack Sans Text",sans-serif;
    letter-spacing:4px;
    margin-bottom:5px
}

.watch-section:after{
    content:none
}

@media(max-width:950px){
    .site-header{
        height:126px
    }

    .network-nav{
        height:76px;
        grid-template-columns:1fr
    }

    .complex-logo{
        height:72px
    }

    .complex-logo img{
        max-width:190px;
        max-height:65px
    }

    .network-links{
        display:none
    }

    .event-nav nav{
        display:none;
        position:absolute;
        top:126px;
        left:0;
        right:0;
        background:#1d1e21;
        padding:25px;
        flex-direction:column
    }

    .event-nav nav.open{
        display:flex
    }

    .menu-toggle{
        display:block;
        margin-left:auto
    }

    .server-pill,.live-button{
        display:none
    }

    .hero{
        padding-top:175px
    }

}

@media(max-width:600px){
    .network-nav{
        padding:0
    }

    .event-nav{
        padding:0 18px
    }

    .hero{
        padding-top:165px
    }

    .brand{
        font-size:11px
    }

}

/* Single-bar event header */

.site-header{
    height:82px
}

.event-nav{
    height:82px
}

.event-nav>.complex-logo{
    display:block;
    position:relative;
    width:205px;
    height:76px;
    overflow:hidden;
    flex:0 0 205px
}

.event-nav>.complex-logo img{
    display:block;
    position:absolute;
    width:205px;
    height:auto;
    max-width:none;
    max-height:none;
    left:50%;
    top:50%;
    transform:translate(-50%,-25%)
}

.hero{
    padding-top:145px;
    min-height:820px
}

@media(max-width:950px){
    .site-header{
        height:82px
    }

    .event-nav>.complex-logo{
        width:180px;
        height:76px;
        flex-basis:180px
    }

    .event-nav>.complex-logo img{
        width:180px
    }

    .event-nav nav{
        top:82px
    }

    .hero{
        padding-top:135px
    }

}

@media(max-width:600px){
    .event-nav{
        padding:0 18px
    }

    .hero{
        padding-top:125px
    }

}

@media(max-width:600px){
    .footer-logo{
        margin:auto
    }

    .footer-logo-art{
        width:95px;
        flex-basis:95px
    }

    .footer-logo-art img{
        width:95px
    }

}

.standings-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:18px
}

.standings-actions .button{
    padding:12px 16px
}

.standings-table{
    overflow-x:auto
}

.standings-table .table-head,.standings-table .standing-row{
    grid-template-columns:75px minmax(190px,1fr) repeat(4,105px) 110px;
    min-width:825px
}

.standings-table .table-head span:not(:nth-child(2)),.standings-table .standing-row>span,.standings-table .standing-row>b{
    text-align:center;
    justify-content:center
}

.standings-table .standing-row>b:last-child{
    color:#ffce48
}

@media(max-width:600px){
    .standings-actions{
        align-items:flex-start;
        margin-top:22px
    }

}

.team-card h3 a,.team-card p a,.standing-row strong a,.player-name a,.player-team a, .team-card h3 a:visited,.team-card p a:visited,.standing-row strong a:visited,.player-name a:visited,.player-team a:visited, main a:not(.button),main a:not(.button):link,main a:not(.button):visited{
    color:inherit!important;
    text-decoration:none!important
}

.team-card h3 a:hover,.team-card p a:hover,.standing-row strong a:hover,.player-name a:hover,.player-team a:hover{
    color:#ffce48
}

button,a,select,input{
    touch-action:manipulation
}

button,a{
    -webkit-tap-highlight-color:transparent;
    user-select:none
}

button:focus:not(:focus-visible),a:focus:not(:focus-visible),select:focus:not(:focus-visible){
    outline:none
}

body{
    caret-color:transparent
}

input,textarea,[contenteditable="true"]{
    caret-color:auto;
    user-select:text
}

.page-loader{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:#17181b;
    opacity:1;
    visibility:visible;
    transition:opacity .4s ease,visibility .4s ease
}

.page-loader.loaded{
    opacity:0;
    visibility:hidden;
    pointer-events:none
}

.page-loader-logo{
    position:relative;
    width:min(280px,65vw);
    height:120px;
    overflow:hidden;
    animation:loader-logo 1.05s ease-in-out infinite
}

.page-loader-logo img{
    position:absolute;
    left:50%;
    top:50%;
    display:block;
    width:100%;
    height:auto;
    max-width:none;
    transform:translate(-50%,-25%)
}

.page-loader-name{
    margin-top:8px;
    color:#fff;
    font:400 17px/1 "Bowlby One SC",sans-serif;
    letter-spacing:.5px
}

.page-loader-name small{
    display:block;
    margin-bottom:5px;
    color:#ffce48;
    font:800 8px "Stack Sans Text",sans-serif;
    letter-spacing:5px;
    text-align:center
}

.page-loader-track{
    position:relative;
    width:min(290px,68vw);
    height:5px;
    margin-top:24px;
    overflow:hidden;
    border-radius:20px;
    background:#2b2c30
}

.page-loader-track i{
    position:absolute;
    inset:0 auto 0 0;
    width:45%;
    border-radius:inherit;
    background:linear-gradient(90deg,#f8c43c,#ffe078);
    animation:loader-bar 1s cubic-bezier(.65,0,.35,1) infinite
}

@keyframes loader-logo{
    0%,100%{
        transform:translateY(0) scale(.98);
        opacity:.82
    }

    50%{
        transform:translateY(-5px) scale(1.02);
        opacity:1
    }

}

@keyframes loader-bar{
    0%{
        transform:translateX(-110%)
    }

    100%{
        transform:translateX(330%)
    }

}

@media(prefers-reduced-motion:reduce){
    .page-loader-logo,.page-loader-track i{
        animation:none
    }

    .page-loader-track i{
        width:100%
    }

}

.page-loader-mark{
    display:flex;
    align-items:center;
    gap:12px;
    height:82px;
    animation:loader-lock .38s .82s cubic-bezier(.2,1.5,.5,1) both,loader-float 1.3s 1.2s ease-in-out infinite
}

.loader-pair{
    position:relative;
    width:58px;
    height:58px;
    display:block
}

.loader-pair i{
    position:absolute;
    width:32px;
    height:32px;
    background:var(--piece);
    box-shadow:inset 0 -3px rgba(0,0,0,.1);
    opacity:0;
    animation:loader-piece .58s cubic-bezier(.18,.9,.28,1.25) forwards
}

.loader-pair i:first-child{
    left:0;
    bottom:0;
    transform:translate(var(--from-x,-70px),var(--from-y,45px)) rotate(-25deg) scale(.35)
}

.loader-pair i:last-child{
    right:0;
    top:0;
    transform:translate(var(--from-x2,65px),var(--from-y2,-50px)) rotate(25deg) scale(.35)
}

.loader-red{
    --piece:#ff1018;
    --from-x:-120px;
    --from-y:20px;
    --from-x2:-45px;
    --from-y2:-90px
}

.loader-blue{
    --piece:#159ee9;
    --from-x:-40px;
    --from-y:100px;
    --from-x2:20px;
    --from-y2:-110px
}

.loader-yellow{
    --piece:#ffcf12;
    --from-x:-10px;
    --from-y:110px;
    --from-x2:45px;
    --from-y2:-100px
}

.loader-green{
    --piece:#08bf70;
    --from-x:45px;
    --from-y:80px;
    --from-x2:125px;
    --from-y2:-20px
}

.loader-pair:nth-child(1) i{
    animation-delay:.05s
}

.loader-pair:nth-child(2) i{
    animation-delay:.16s
}

.loader-pair:nth-child(3) i{
    animation-delay:.27s
}

.loader-pair:nth-child(4) i{
    animation-delay:.38s
}

.loader-pair i:last-child{
    animation-delay:calc(.1s + var(--pair-delay,0s))
}

.loader-pair:nth-child(1){
    --pair-delay:.05s
}

.loader-pair:nth-child(2){
    --pair-delay:.16s
}

.loader-pair:nth-child(3){
    --pair-delay:.27s
}

.loader-pair:nth-child(4){
    --pair-delay:.38s
}

@keyframes loader-piece{
    0%{
        opacity:0
    }

    70%{
        opacity:1
    }

    100%{
        opacity:1;
        transform:translate(0,0) rotate(0) scale(1)
    }

}

@keyframes loader-lock{
    0%{
        transform:scale(.94)
    }

    65%{
        transform:scale(1.06)
    }

    100%{
        transform:scale(1)
    }

}

@keyframes loader-float{
    0%,100%{
        transform:translateY(0)
    }

    50%{
        transform:translateY(-4px)
    }

}

@media(max-width:500px){
    .page-loader-mark{
        gap:7px;
        transform-origin:center
    }

    .loader-pair{
        width:48px;
        height:48px
    }

    .loader-pair i{
        width:27px;
        height:27px
    }

}

@media(prefers-reduced-motion:reduce){
    .page-loader-mark,.loader-pair i{
        animation:none;
        opacity:1
    }

    .loader-pair i:first-child,.loader-pair i:last-child{
        transform:none
    }

}

.game-row{
    grid-template-columns:70px 1fr 1fr
}

@media(max-width:600px){
    .game-row{
        grid-template-columns:40px 1fr
    }

}

@media(max-width:950px){
    .site-header,.event-nav{
        overflow:visible;
        z-index:50
    }

    .event-nav{
        position:relative;
        width:100%
    }

    .menu-toggle{
        position:relative;
        z-index:52;
        min-width:48px;
        min-height:48px;
        padding:10px 14px;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent
    }

    .event-nav nav{
        top:82px!important;
        z-index:51;
        padding:12px 18px 20px!important;
        border-bottom:1px solid #38393e;
        box-shadow:0 18px 35px rgba(0,0,0,.4)
    }

    .event-nav nav a{
        display:flex;
        align-items:center;
        min-height:48px;
        padding:10px 8px;
        font-size:13px
    }

    .button,.schedule-tabs button,.team-card h3 a,.team-card p a,.player-name a,.player-team a{
        min-height:44px
    }

    .team-card h3 a,.team-card p a,.player-name a,.player-team a{
        display:inline-flex;
        align-items:center
    }

}

.prediction-trigger{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:40;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:0 20px;
    border:2px solid #ffe078;
    border-radius:4px;
    background:linear-gradient(#ffd45b,#f8c43c);
    box-shadow:0 12px 30px rgba(0,0,0,.4),inset 0 -4px rgba(150,103,0,.16);
    color:#6e5916;
    text-decoration:none;
    font:400 12px "Bowlby One SC";
    text-transform:uppercase;
    cursor:pointer
}

.prediction-trigger:hover{
    transform:translateY(-2px);
    filter:brightness(1.05)
}

.prediction-dialog{
    width:min(520px,calc(100% - 32px));
    padding:0;
    border:1px solid #414247;
    border-radius:5px;
    background:#1d1e21;
    color:#fff;
    box-shadow:0 30px 80px rgba(0,0,0,.65)
}

.prediction-dialog::backdrop{
    background:rgba(7,8,10,.78);
    backdrop-filter:blur(4px)
}

.prediction-dialog form{
    position:relative;
    padding:34px
}

.prediction-dialog h2{
    font-size:42px;
    line-height:.95;
    letter-spacing:-2px
}

.prediction-dialog form>p:not(.section-label):not(.prediction-status){
    color:#b9bbc2;
    line-height:1.6
}

.prediction-dialog label{
    display:block;
    margin:25px 0 8px;
    color:#9b9da4;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.3px;
    text-transform:uppercase
}

.prediction-dialog select{
    width:100%;
    height:50px;
    margin-bottom:18px;
    padding:0 14px;
    border:1px solid #3a3b40;
    border-radius:4px;
    background:#16171a;
    color:#fff;
    font:500 13px "Stack Sans Text"
}

.prediction-close{
    position:absolute;
    right:18px;
    top:16px;
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    color:#fff;
    font-size:28px;
    cursor:pointer
}

.prediction-status{
    min-height:20px;
    margin-bottom:0;
    color:#ffce48;
    font-size:12px
}

@media(max-width:600px){
    .prediction-trigger{
        right:14px;
        bottom:14px;
        max-width:calc(100% - 28px);
        min-height:48px;
        padding:0 15px;
        font-size:10px
    }

    .prediction-dialog form{
        padding:28px 20px
    }

    .prediction-dialog h2{
        font-size:34px
    }

}

/* Exact corner-to-corner loader logo geometry */

.page-loader-mark{
    gap:0
}

.loader-pair{
    width:64px;
    height:64px
}

@media(max-width:500px){
    .page-loader-mark{
        gap:0
    }

    .loader-pair{
        width:54px;
        height:54px
    }

}

.event-card.is-live{
    border-color:#ffce48;
    box-shadow:0 18px 45px rgba(0,0,0,.35),0 0 35px rgba(255,206,72,.14),inset 0 -5px rgba(0,0,0,.12)
}

.event-card.is-live .status{
    color:#ffce48
}

.event-card.is-live .status i{
    background:#ffce48;
    box-shadow:0 0 12px #ffce48;
    animation:live-pulse 1.15s ease-in-out infinite
}

.countdown:has(.live-now-panel){
    display:block
}

.live-now-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:72px;
    padding:16px 18px;
    border:1px solid #3b3c40;
    border-radius:4px;
    background:#16171a;
    color:#fff;
    text-decoration:none
}

.live-now-panel span{
    display:flex;
    align-items:center;
    color:#ffce48;
    font:400 15px "Bowlby One SC",sans-serif;
    text-transform:uppercase
}

.live-now-panel span i{
    width:9px;
    height:9px;
    margin-right:10px;
    border-radius:50%;
    background:#ffce48;
    box-shadow:0 0 12px #ffce48;
    animation:live-pulse 1.15s ease-in-out infinite
}

.live-now-panel b{
    font-size:11px;
    letter-spacing:.7px;
    text-transform:uppercase
}

.live-now-panel:hover{
    border-color:#ffce48
}

.live-now-panel.event-complete span{
    color:#b9bbc2
}

@keyframes live-pulse{
    0%,100%{
        opacity:1;
        transform:scale(1)
    }

    50%{
        opacity:.45;
        transform:scale(.78)
    }

}

@media(max-width:450px){
    .live-now-panel{
        align-items:flex-start;
        flex-direction:column;
        gap:10px
    }

}