/*
==========================================================
FantasyFanzone Mini League
Version: 4.2
==========================================================
*/

/*========================================================
SECTION
========================================================*/

.ffz-mini-league{
    position:relative;

    padding:
        var(--ffz-section-padding)
        0;
}

.ffz-mini-league__wrapper{
    display:grid;

    gap:32px;

    margin-top:40px;
}

/*========================================================
TOOLBAR
========================================================*/

.ffz-mini-league__toolbar{
    display:flex;

    align-items:center;
    justify-content:flex-end;

    gap:12px;

    margin-top:24px;
}

.ffz-mini-league__gameweek{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:38px;

    padding:
        8px
        14px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        var(--ffz-radius-pill);

    background:
        rgba(255,255,255,.04);

    color:
        var(--ffz-text-muted);

    font-size:
        var(--ffz-font-size-sm);

    font-weight:
        var(--ffz-font-weight-semibold);

    line-height:1;
}

.ffz-mini-league__refresh{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        var(--ffz-radius-pill);

    background:
        rgba(255,255,255,.04);

    color:
        var(--ffz-text);

    font-size:20px;

    transition:
        background-color var(--ffz-transition-normal),
        border-color var(--ffz-transition-normal),
        color var(--ffz-transition-normal),
        transform var(--ffz-transition-normal),
        opacity var(--ffz-transition-normal);
}

.ffz-mini-league__refresh:hover{
    background:
        rgba(124,58,237,.14);

    border-color:
        rgba(124,58,237,.45);

    color:
        var(--ffz-primary-light);

    transform:
        translateY(-1px);
}

.ffz-mini-league__refresh:disabled{
    opacity:.55;

    cursor:wait;
}

.ffz-mini-league__refresh.is-loading > span[aria-hidden="true"]{
    animation:
        ffz-league-spin
        .8s linear infinite;
}

@keyframes ffz-league-spin{
    to{
        transform:
            rotate(360deg);
    }
}

/*========================================================
AJAX STATE
========================================================*/

.ffz-mini-league[aria-busy="true"]{
    cursor:progress;
}

.ffz-mini-league.has-error
.ffz-mini-league__refresh{
    border-color:
        rgba(239,68,68,.45);

    color:
        var(--ffz-danger);
}

/*========================================================
SHOWCASE SLOT
========================================================*/

.ffz-league-showcase-slot:empty{
    display:none;
}

/*========================================================
TOP MANAGER SHOWCASE
========================================================*/

.ffz-league-showcase{
    position:relative;

    overflow:hidden;

    padding:28px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        var(--ffz-radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(124,58,237,.13),
            rgba(21,28,50,.94) 42%,
            rgba(16,185,129,.07)
        );

    box-shadow:
        var(--ffz-shadow-lg);
}

.ffz-league-showcase::before{
    content:"";

    position:absolute;

    width:260px;
    height:260px;

    top:-130px;
    right:-100px;

    border-radius:50%;

    background:
        rgba(124,58,237,.14);

    filter:
        blur(15px);

    pointer-events:none;
}

/*========================================================
SHOWCASE HEADER
========================================================*/

.ffz-league-showcase__header{
    position:relative;

    z-index:1;

    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:24px;

    margin-bottom:24px;
}

.ffz-league-showcase__eyebrow{
    margin-bottom:6px;

    color:
        var(--ffz-primary-light);

    font-size:
        var(--ffz-font-size-sm);

    font-weight:
        var(--ffz-font-weight-bold);

    letter-spacing:.08em;

    text-transform:uppercase;
}

.ffz-league-showcase__title{
    font-size:
        clamp(
            1.4rem,
            2vw,
            2rem
        );
}

.ffz-league-showcase__manager{
    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:
        6px
        10px;

    margin-top:10px;

    color:
        var(--ffz-text-muted);

    font-size:
        var(--ffz-font-size-sm);
}

.ffz-league-showcase__manager strong{
    color:
        var(--ffz-text);

    font-size:
        var(--ffz-font-size-base);
}

.ffz-league-showcase__manager span::before{
    content:"•";

    margin-right:10px;

    color:
        var(--ffz-border-hover);
}

/*========================================================
SHOWCASE SCORE
========================================================*/

.ffz-league-showcase__score{
    position:relative;

    z-index:1;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    min-width:105px;

    padding:
        16px
        18px;

    border:
        1px solid
        rgba(16,185,129,.22);

    border-radius:
        var(--ffz-radius-lg);

    background:
        rgba(16,185,129,.08);
}

.ffz-league-showcase__score-value{
    color:
        var(--ffz-secondary);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.5rem
        );

    font-weight:
        var(--ffz-font-weight-extra-bold);

    line-height:1;
}

.ffz-league-showcase__score-label{
    margin-top:7px;

    color:
        var(--ffz-text-muted);

    font-size:
        var(--ffz-font-size-xs);

    font-weight:
        var(--ffz-font-weight-semibold);

    text-transform:uppercase;
}

/*========================================================
ACTIVE CHIP
========================================================*/

.ffz-league-showcase__chip{
    position:relative;

    z-index:1;

    display:inline-flex;

    margin-bottom:20px;

    padding:
        7px
        12px;

    border:
        1px solid
        rgba(245,158,11,.24);

    border-radius:
        var(--ffz-radius-pill);

    background:
        rgba(245,158,11,.08);

    color:
        var(--ffz-accent);

    font-size:
        var(--ffz-font-size-xs);

    font-weight:
        var(--ffz-font-weight-bold);
}

/*========================================================
PITCH
========================================================*/

.ffz-league-showcase__pitch{
    position:relative;

    z-index:1;

    overflow:hidden;

    min-height:610px;

    padding:
        44px
        28px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        var(--ffz-radius-xl);

    background:
        linear-gradient(
            180deg,
            #087f45,
            #066d3c
        );

    box-shadow:
        inset
        0 0 70px
        rgba(0,0,0,.18);
}

/*
 * Pitch markings.
 */

.ffz-league-showcase__pitch::before{
    content:"";

    position:absolute;

    inset:24px;

    border:
        2px solid
        rgba(255,255,255,.22);

    pointer-events:none;
}

.ffz-league-showcase__pitch::after{
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:110px;
    height:110px;

    border:
        2px solid
        rgba(255,255,255,.18);

    border-radius:50%;

    transform:
        translate(-50%,-50%);

    pointer-events:none;
}

/*========================================================
STARTING XI
========================================================*/

.ffz-league-showcase__starting-xi{
    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    gap:28px;

    min-height:520px;
}

/*
 * Starting XI players are grouped by PHP into their
 * actual positional lines: GK, DEF, MID and FWD.
 */

.ffz-league-showcase__line{
    display:flex;

    align-items:flex-start;
    justify-content:space-evenly;

    gap:14px;

    width:100%;
}

.ffz-league-showcase__line
.ffz-league-showcase__player{
    flex:
        0 1
        125px;
}

.ffz-league-showcase__line--gk{
    justify-content:center;
}

/*========================================================
SHOWCASE PLAYER
========================================================*/

.ffz-league-showcase__player{
    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    min-width:0;

    text-align:center;
}

.ffz-league-showcase__player-media{
    position:relative;

    display:flex;

    align-items:flex-end;
    justify-content:center;

    width:76px;
    height:76px;

    overflow:visible;

    border:
        2px solid
        rgba(255,255,255,.28);

    border-radius:50%;

    background:
        rgba(11,16,32,.6);

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.24);
}

.ffz-league-showcase__player-media img{
    display:block;

    width:100%;
    height:100%;

    border-radius:50%;

    object-fit:cover;
}

.ffz-league-showcase__player-info{
    width:100%;
    max-width:125px;

    margin-top:8px;

    padding:
        7px
        8px;

    border-radius:
        var(--ffz-radius-sm);

    background:
        rgba(11,16,32,.82);

    box-shadow:
        var(--ffz-shadow-sm);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

.ffz-league-showcase__player-name{
    overflow:hidden;

    color:#fff;

    font-size:
        var(--ffz-font-size-sm);

    font-weight:
        var(--ffz-font-weight-bold);

    line-height:1.2;

    text-overflow:ellipsis;

    white-space:nowrap;
}

.ffz-league-showcase__player-meta{
    overflow:hidden;

    margin-top:3px;

    color:
        rgba(255,255,255,.65);

    font-size:.65rem;

    line-height:1.2;

    text-overflow:ellipsis;

    white-space:nowrap;
}

.ffz-league-showcase__player-points{
    margin-top:5px;

    color:
        var(--ffz-secondary);

    font-size:
        var(--ffz-font-size-xs);

    font-weight:
        var(--ffz-font-weight-extra-bold);
}

.ffz-league-showcase__multiplier{
    display:block;

    margin-top:2px;

    color:
        var(--ffz-accent);

    font-size:.65rem;
}

/*========================================================
CAPTAIN / VICE
========================================================*/

.ffz-league-showcase__captain,
.ffz-league-showcase__vice{
    position:absolute;

    top:-5px;
    right:-5px;

    display:flex;

    align-items:center;
    justify-content:center;

    width:25px;
    height:25px;

    border:
        2px solid
        var(--ffz-background);

    border-radius:50%;

    color:#fff;

    font-size:
        .7rem;

    font-weight:
        var(--ffz-font-weight-extra-bold);

    line-height:1;

    z-index:4;

    box-shadow:0 2px 7px rgba(0,0,0,.35);
}

.ffz-league-showcase__captain{
    background:
        var(--ffz-primary);
}

.ffz-league-showcase__vice{
    background:
        var(--ffz-secondary);
}

.ffz-league-showcase__player--captain
.ffz-league-showcase__player-media{
    border-color:
        var(--ffz-primary-light);

    box-shadow:
        0 0 0 4px
        rgba(124,58,237,.18),
        0 10px 25px
        rgba(0,0,0,.25);
}

/*========================================================
BENCH
========================================================*/

.ffz-league-showcase__bench{
    position:relative;

    z-index:1;

    margin-top:20px;

    padding:20px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        var(--ffz-radius-lg);

    background:
        rgba(11,16,32,.44);
}

.ffz-league-showcase__bench-header{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:16px;

    margin-bottom:18px;
}

.ffz-league-showcase__bench-header h4{
    font-size:
        var(--ffz-font-size-base);
}

.ffz-league-showcase__bench-header span{
    color:
        var(--ffz-text-muted);

    font-size:
        var(--ffz-font-size-xs);
}

.ffz-league-showcase__bench-grid{
    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:16px;
}

/*========================================================
STANDINGS TABLE
========================================================*/

.ffz-mini-league__table-wrapper{
    overflow-x:auto;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        var(--ffz-radius-xl);

    background:
        rgba(255,255,255,.03);

    box-shadow:
        var(--ffz-shadow-lg);
}

.ffz-mini-league__table{
    width:100%;

    min-width:760px;

    border-collapse:collapse;

    border-spacing:0;
}

.ffz-mini-league__table thead{
    background:
        rgba(255,255,255,.045);
}

.ffz-mini-league__table th{
    padding:
        15px
        18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    color:
        var(--ffz-text-muted);

    font-size:
        var(--ffz-font-size-xs);

    font-weight:
        var(--ffz-font-weight-bold);

    letter-spacing:.06em;

    text-align:left;

    text-transform:uppercase;

    white-space:nowrap;
}

.ffz-mini-league__table th:nth-child(1){
    width:120px;
}

.ffz-mini-league__table th:nth-child(4),
.ffz-mini-league__table th:nth-child(5){
    text-align:right;
}

.ffz-mini-league__table td{
    padding:
        16px
        18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);

    vertical-align:middle;
}

.ffz-mini-league__table tbody tr:last-child td{
    border-bottom:0;
}

/*========================================================
LEAGUE ROW
========================================================*/

.ffz-league-row{
    transition:
        background-color
        var(--ffz-transition-normal);
}

.ffz-league-row:hover{
    background:
        rgba(255,255,255,.035);
}

.ffz-league-row--leader{
    background:
        linear-gradient(
            90deg,
            rgba(250,204,21,.07),
            rgba(250,204,21,.015)
        );
}

.ffz-league-row--leader:hover{
    background:
        linear-gradient(
            90deg,
            rgba(250,204,21,.11),
            rgba(250,204,21,.025)
        );
}

/*========================================================
RANK
========================================================*/

.ffz-league-row__rank{
    white-space:nowrap;
}

.ffz-league-rank{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:34px;
    height:34px;

    padding:
        0
        8px;

    border-radius:
        var(--ffz-radius-sm);

    background:
        rgba(255,255,255,.05);

    color:
        var(--ffz-text);

    font-size:
        var(--ffz-font-size-base);

    font-weight:
        var(--ffz-font-weight-extra-bold);

    font-variant-numeric:
        tabular-nums;
}

.ffz-league-row--leader
.ffz-league-rank{
    background:
        rgba(250,204,21,.12);

    color:
        var(--ffz-warning);
}

/*========================================================
RANK MOVEMENT
========================================================*/

.ffz-league-movement{
    display:inline-flex;

    align-items:center;

    gap:3px;

    margin-left:7px;

    font-size:
        .68rem;

    font-weight:
        var(--ffz-font-weight-bold);

    white-space:nowrap;
}

.ffz-league-movement--up{
    color:
        var(--ffz-success);
}

.ffz-league-movement--down{
    color:
        var(--ffz-danger);
}

/*========================================================
MANAGER
========================================================*/

.ffz-league-manager{
    display:flex;

    align-items:center;

    gap:12px;

    min-width:0;
}

.ffz-league-manager__avatar{
    display:flex;

    align-items:center;
    justify-content:center;

    flex:
        0 0
        42px;

    width:42px;
    height:42px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:50%;

    background:
        var(--ffz-gradient-primary);

    color:#fff;

    font-size:
        var(--ffz-font-size-xs);

    font-weight:
        var(--ffz-font-weight-extra-bold);

    letter-spacing:.03em;

    text-transform:uppercase;
}

.ffz-league-manager__name{
    overflow:hidden;

    color:
        var(--ffz-text);

    font-weight:
        var(--ffz-font-weight-semibold);

    text-overflow:ellipsis;

    white-space:nowrap;
}

.ffz-league-row__team{
    color:
        var(--ffz-text-muted);
}

.ffz-league-row__gameweek-points,
.ffz-league-row__total-points{
    text-align:right;

    font-variant-numeric:
        tabular-nums;
}

.ffz-league-row__gameweek-points{
    color:
        var(--ffz-secondary);

    font-weight:
        var(--ffz-font-weight-bold);
}

.ffz-league-row__total-points{
    color:
        var(--ffz-text);
}

/*========================================================
EMPTY STATE
========================================================*/

.ffz-mini-league .ffz-empty{
    padding:
        40px
        24px;

    color:
        var(--ffz-text-muted);

    text-align:center;
}

/*========================================================
JOIN
========================================================*/

.ffz-mini-league__join{
    display:flex;

    flex-wrap:wrap;

    align-items:center;
    justify-content:center;

    gap:
        12px
        18px;

    padding-top:4px;
}

.ffz-mini-league__code{
    color:
        var(--ffz-text-muted);

    font-size:
        var(--ffz-font-size-sm);
}

/*========================================================
TABLET
========================================================*/

@media(max-width:1024px){

    .ffz-league-showcase{
        padding:24px;
    }

    .ffz-league-showcase__pitch{
        min-height:560px;

        padding:
            38px
            20px;
    }

    .ffz-league-showcase__starting-xi{
        min-height:475px;

        gap:24px;
    }

    .ffz-league-showcase__line{
        gap:10px;
    }

    .ffz-league-showcase__player-media{
        width:68px;
        height:68px;
    }

    .ffz-league-showcase__player-info{
        max-width:112px;
    }
}

/*========================================================
MOBILE
========================================================*/

@media(max-width:768px){

    .ffz-mini-league__wrapper{
        gap:24px;

        margin-top:30px;
    }

    .ffz-mini-league__toolbar{
        margin-top:20px;
    }

    .ffz-league-showcase{
        padding:18px;

        border-radius:
            var(--ffz-radius-lg);
    }

    .ffz-league-showcase__header{
        flex-direction:column;

        gap:16px;
    }

    .ffz-league-showcase__score{
        flex-direction:row;

        align-items:baseline;

        gap:8px;

        width:100%;

        min-width:0;

        padding:
            12px
            16px;
    }

    .ffz-league-showcase__score-value{
        font-size:1.8rem;
    }

    .ffz-league-showcase__score-label{
        margin-top:0;
    }

    .ffz-league-showcase__manager span::before{
        display:none;
    }

    .ffz-league-showcase__pitch{
        overflow-x:auto;

        min-height:0;

        padding:
            28px
            16px;
    }

    .ffz-league-showcase__pitch::before{
        inset:14px;
    }

    .ffz-league-showcase__starting-xi{
        min-width:520px;
        min-height:450px;

        gap:24px;
    }

    .ffz-league-showcase__line{
        justify-content:center;

        gap:8px;
    }

    .ffz-league-showcase__line
    .ffz-league-showcase__player{
        flex:
            0 0
            96px;
    }

    .ffz-league-showcase__player-media{
        width:62px;
        height:62px;
    }

    .ffz-league-showcase__player-info{
        max-width:94px;

        padding:
            6px
            5px;
    }

    .ffz-league-showcase__player-name{
        font-size:.76rem;
    }

    .ffz-league-showcase__player-meta{
        font-size:.6rem;
    }

    .ffz-league-showcase__bench{
        padding:16px;
    }

    .ffz-league-showcase__bench-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            18px
            10px;
    }

    .ffz-mini-league__table-wrapper{
        border-radius:
            var(--ffz-radius-lg);
    }
}

/*========================================================
SMALL MOBILE
========================================================*/

@media(max-width:480px){

    .ffz-mini-league__toolbar{
        justify-content:space-between;
    }

    .ffz-mini-league__gameweek{
        font-size:.76rem;
    }

    .ffz-league-showcase{
        padding:14px;
    }

    .ffz-league-showcase__title{
        font-size:1.35rem;
    }

    .ffz-league-showcase__pitch{
        padding:
            24px
            12px;
    }

    .ffz-league-showcase__starting-xi{
        min-width:475px;
    }

    .ffz-league-showcase__line
    .ffz-league-showcase__player{
        flex-basis:88px;
    }

    .ffz-league-showcase__bench-header{
        align-items:flex-start;

        flex-direction:column;

        gap:5px;
    }

    .ffz-league-showcase__bench-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .ffz-mini-league__join{
        flex-direction:column;
    }
}

/*========================================================
REDUCED MOTION
========================================================*/

@media(prefers-reduced-motion:reduce){

    .ffz-mini-league__refresh,
    .ffz-league-row{
        transition:none;
    }

    .ffz-mini-league__refresh.is-loading
    > span[aria-hidden="true"]{
        animation:none;
    }
}

/*========================================================
MOBILE FIT — SAME COMPACT BEHAVIOUR AS SUGGESTED LINEUP
========================================================*/

@media(max-width:768px){
    .ffz-league-showcase__pitch{
        overflow:hidden;
        min-height:510px;
        padding:24px 4px;
    }

    .ffz-league-showcase__starting-xi{
        width:100%;
        min-width:0;
        min-height:455px;
        gap:18px;
    }

    .ffz-league-showcase__line{
        flex-wrap:nowrap;
        gap:2px;
        justify-content:space-around;
    }

    .ffz-league-showcase__line .ffz-league-showcase__player{
        flex:0 1 74px;
        width:18vw;
        max-width:74px;
        min-width:0;
    }

    .ffz-league-showcase__player-media{
        width:clamp(38px,12vw,54px);
        height:clamp(38px,12vw,54px);
    }

    .ffz-league-showcase__player-info{
        width:100%;
        max-width:74px;
        padding:5px 3px;
    }

    .ffz-league-showcase__player-name{
        font-size:10px;
    }

    .ffz-league-showcase__player-meta{
        display:none;
    }

    .ffz-league-showcase__player-points{
        font-size:9px;
    }

    .ffz-league-showcase__captain,
    .ffz-league-showcase__vice{
        top:-4px;
        right:-4px;
        width:21px;
        height:21px;
        border-width:2px;
        font-size:9px;
    }

    .ffz-league-showcase__bench-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:6px;
    }

    .ffz-league-showcase__bench-grid .ffz-league-showcase__player{
        min-width:0;
    }

    .ffz-league-showcase__bench-grid .ffz-league-showcase__player-media{
        width:44px;
        height:44px;
    }

    .ffz-league-showcase__bench-grid .ffz-league-showcase__player-info{
        max-width:100%;
    }

    .ffz-mini-league__table{
        min-width:0;
        table-layout:fixed;
    }

    .ffz-mini-league__table th,
    .ffz-mini-league__table td{
        padding:12px 7px;
    }

    .ffz-mini-league__table th:nth-child(1){width:58px;}
    .ffz-mini-league__table th:nth-child(4){width:52px;}
    .ffz-mini-league__table th:nth-child(5){width:58px;}
    .ffz-mini-league__table th:nth-child(3),
    .ffz-mini-league__table td:nth-child(3){display:none;}

    .ffz-league-manager{gap:7px;}
    .ffz-league-manager__avatar{display:none;}
    .ffz-league-manager__name{font-size:12px;}
	.ffz-mini-league__table th{font-size:clamp(9px,2.6vw,11px);}
    .ffz-league-rank{min-width:30px;height:30px;font-size:12px;}
    .ffz-league-movement{display:none;}
}

@media(max-width:420px){
    .ffz-league-showcase{padding:10px;}
    .ffz-league-showcase__pitch{padding:22px 2px;}
    .ffz-league-showcase__line .ffz-league-showcase__player{width:18.5vw;}
    .ffz-league-showcase__player-media{width:46px;height:46px;}
    .ffz-league-showcase__player-name{font-size:9px;}
    .ffz-league-showcase__bench{padding:14px 7px;}
    .ffz-league-showcase__bench-grid{gap:4px;}
    .ffz-league-showcase__bench-grid .ffz-league-showcase__player-media{width:40px;height:40px;}
}