/*
==========================================================
FantasyFanzone Suggested Lineup
Version: 4.1
==========================================================
*/

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

.ffz-lineup{
    position:relative;

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

/*========================================================
BODY
========================================================*/

.ffz-lineup__body{
    position:relative;
}

/*========================================================
SUMMARY
========================================================*/

.ffz-lineup__summary{
    display:grid;

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

    gap:14px;

    margin-bottom:24px;
}

.ffz-lineup__summary-item{
    display:flex;

    flex-direction:column;

    gap:6px;

    min-width:0;

    padding:16px 18px;

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

    border-radius:16px;

    background:
        rgba(255,255,255,.035);
}

.ffz-lineup__summary-label{
    color:var(--ffz-text-muted);

    font-size:11px;
    font-weight:700;

    letter-spacing:.06em;

    text-transform:uppercase;
}

.ffz-lineup__summary-value{
    color:#fff;

    font-size:18px;
    font-weight:800;

    font-variant-numeric:
        tabular-nums;
}

/*========================================================
WRAPPER
========================================================*/

.ffz-lineup__wrapper{
    position:relative;

    padding:28px;

    border:
        1px solid
        var(--ffz-border);

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(59,130,246,.09),
            rgba(21,28,50,.97)
        );

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

    overflow:hidden;
}

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

.ffz-lineup__pitch{
    position:relative;

    overflow:hidden;

    min-height:660px;

    padding:42px 24px;

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

    border-radius:24px;

    background:
        linear-gradient(
            180deg,
            rgba(21,128,61,.90),
            rgba(20,83,45,.96)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.03);

    isolation:isolate;
}

/* Pitch stripes */

.ffz-lineup__pitch::before{
    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.025)
                0,
            rgba(255,255,255,.025)
                80px,
            rgba(0,0,0,.025)
                80px,
            rgba(0,0,0,.025)
                160px
        );
}

/* Pitch markings */

.ffz-lineup__pitch::after{
    content:"";

    position:absolute;

    inset:24px;

    z-index:-1;

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

    border-radius:10px;

    pointer-events:none;
}

/*========================================================
FORMATION
========================================================*/

.ffz-lineup__formation{
    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    gap:36px;

    min-height:570px;
}

.ffz-lineup__row{
    display:flex;

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

    gap:28px;

    width:100%;
}

.ffz-lineup__row--goalkeeper{
    min-height:120px;
}

.ffz-lineup__row--defenders,
.ffz-lineup__row--midfielders{
    justify-content:space-evenly;
}

.ffz-lineup__row--forwards{
    justify-content:center;

    gap:110px;
}

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

.ffz-lineup-player{
    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    width:126px;

    min-width:0;

    text-align:center;

    transition:
        transform var(--ffz-transition-normal),
        filter var(--ffz-transition-normal);
}

.ffz-lineup-player:hover{
    transform:translateY(-6px);
}

/*========================================================
PLAYER IMAGE
========================================================*/

.ffz-lineup-player__image{
    position:relative;

    width:86px;
    height:86px;

    margin-bottom:10px;

    overflow:visible;

    border:
        3px solid
        rgba(255,255,255,.14);

    border-radius:50%;

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

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.30);
}

.ffz-lineup-player__image img{
    display:block;

    width:100%;
    height:100%;

    overflow:hidden;

    border-radius:50%;

    object-fit:cover;

    background:var(--ffz-surface);
}

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

.ffz-lineup-player--captain
.ffz-lineup-player__image{
    border-color:#facc15;

    box-shadow:
        0 0 0 4px
        rgba(250,204,21,.18),
        0 14px 30px
        rgba(250,204,21,.24);
}

.ffz-lineup-player--vice-captain
.ffz-lineup-player__image{
    border-color:
        rgba(59,130,246,.85);

    box-shadow:
        0 0 0 4px
        rgba(59,130,246,.12),
        0 14px 30px
        rgba(59,130,246,.20);
}

.ffz-lineup-player__captain{
    position:absolute;

    top:-7px;
    right:-7px;

    display:flex;

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

    width:30px;
    height:30px;

    border:
        2px solid
        rgba(11,16,32,.95);

    border-radius:50%;

    background:#facc15;

    color:#111827;

    font-size:12px;
    font-weight:900;
    line-height:1;

    box-shadow:
        0 5px 14px
        rgba(0,0,0,.28);
}

.ffz-lineup-player__captain--vice{
    background:
        var(--ffz-info);

    color:#fff;
}

/*========================================================
PLAYER INFO
========================================================*/

.ffz-lineup-player__info{
    display:flex;

    flex-direction:column;

    align-items:center;

    width:100%;

    min-width:0;
}

.ffz-lineup-player__name{
    display:block;

    width:100%;

    margin:0 0 3px;

    overflow:hidden;

    color:#fff;

    font-size:13px;
    font-weight:800;
    line-height:1.3;

    text-overflow:ellipsis;
    white-space:nowrap;

    text-shadow:
        0 2px 4px
        rgba(0,0,0,.35);
}

/*========================================================
IDENTITY
========================================================*/

.ffz-lineup-player__identity{
    display:flex;

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

    gap:5px;

    flex-wrap:wrap;

    min-width:0;

    margin-bottom:6px;
}

.ffz-lineup-player__team{
    display:inline-block;

    max-width:86px;

    overflow:hidden;

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

    font-size:10px;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.ffz-lineup-player__position{
    display:inline-flex;

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

    padding:2px 6px;

    border-radius:999px;

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

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

    font-size:8px;
    font-weight:800;

    letter-spacing:.05em;

    text-transform:uppercase;
}

/*========================================================
PLAYER STATS
========================================================*/

.ffz-lineup-player__stats{
    display:flex;

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

    gap:5px;

    flex-wrap:wrap;
}

.ffz-lineup-player__price,
.ffz-lineup-player__form{
    display:inline-flex;

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

    min-height:23px;

    padding:4px 7px;

    border-radius:999px;

    font-size:8px;
    font-weight:800;

    font-variant-numeric:
        tabular-nums;
}

.ffz-lineup-player__price{
    background:
        rgba(11,16,32,.42);

    color:#fff;
}

.ffz-lineup-player__form{
    background:
        rgba(59,130,246,.16);

    color:#bfdbfe;
}

/*========================================================
FIXTURE DATA
========================================================*/

.ffz-lineup-player__fixture{
    display:flex;

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

    gap:5px;

    flex-wrap:wrap;

    margin-top:6px;
}

.ffz-lineup-player__fdr,
.ffz-lineup-player__double,
.ffz-lineup-player__blank{
    display:inline-flex;

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

    min-height:22px;

    padding:3px 7px;

    border-radius:999px;

    font-size:8px;
    font-weight:800;

    font-variant-numeric:
        tabular-nums;
}

/* FDR */

.ffz-lineup-player__fdr{
    background:
        rgba(255,255,255,.10);

    color:#fff;
}

.ffz-lineup-player__fdr--1,
.ffz-lineup-player__fdr--2{
    background:
        rgba(34,197,94,.20);

    color:#bbf7d0;
}

.ffz-lineup-player__fdr--3{
    background:
        rgba(245,158,11,.20);

    color:#fde68a;
}

.ffz-lineup-player__fdr--4,
.ffz-lineup-player__fdr--5{
    background:
        rgba(239,68,68,.20);

    color:#fecaca;
}

/* DGW */

.ffz-lineup-player__double{
    background:
        rgba(124,58,237,.20);

    color:#ddd6fe;

    letter-spacing:.04em;
}

/* BGW */

.ffz-lineup-player__blank{
    margin-top:6px;

    background:
        rgba(239,68,68,.18);

    color:#fecaca;

    letter-spacing:.04em;
}

/*========================================================
RATING
========================================================*/

.ffz-lineup-player__rating{
    display:block;

    margin-top:6px;

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

    font-size:8px;
    font-weight:700;

    font-variant-numeric:
        tabular-nums;
}

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

.ffz-lineup__bench{
    margin-top:26px;

    padding:22px;

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

    border-radius:20px;

    background:
        rgba(255,255,255,.025);
}

.ffz-lineup__bench-header{
    display:flex;

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

    gap:16px;

    margin-bottom:20px;
}

.ffz-lineup__bench-title{
    margin:0;

    color:#fff;

    font-size:17px;
    font-weight:800;
}

.ffz-lineup__bench-count{
    display:inline-flex;

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

    min-width:30px;
    height:30px;

    padding:0 9px;

    border-radius:999px;

    background:
        rgba(59,130,246,.14);

    color:#bfdbfe;

    font-size:11px;
    font-weight:800;
}

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

.ffz-lineup__bench-players{
    display:grid;

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

    gap:16px;
}

.ffz-lineup-player--bench{
    width:100%;

    padding:14px 10px;

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

    border-radius:16px;

    background:
        rgba(255,255,255,.025);
}

.ffz-lineup-player--bench:hover{
    border-color:
        rgba(59,130,246,.38);
}

.ffz-lineup-player--bench
.ffz-lineup-player__image{
    width:68px;
    height:68px;
}

.ffz-lineup-player--bench
.ffz-lineup-player__name{
    font-size:12px;
}

.ffz-lineup-player--bench
.ffz-lineup-player__rating{
    display:none;
}

/*========================================================
LOADING
========================================================*/

.ffz-lineup.is-loading{
    pointer-events:none;
}

.ffz-lineup.is-loading
.ffz-lineup__body{
    opacity:.72;
}

.ffz-lineup.is-loading
.ffz-lineup-player{
    animation:
        ffzLineupPulse
        1.4s ease-in-out infinite;
}

@keyframes ffzLineupPulse{

    0%,
    100%{
        opacity:.65;
    }

    50%{
        opacity:1;
    }
}

/*========================================================
EMPTY / ERROR
========================================================*/

.ffz-lineup .ffz-empty,
.ffz-lineup .ffz-error,
.ffz-lineup .ffz-loading{
    padding:30px 20px;

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

    border-radius:18px;

    text-align:center;
}

.ffz-lineup .ffz-empty,
.ffz-lineup .ffz-loading{
    background:
        rgba(255,255,255,.025);

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

.ffz-lineup .ffz-error{
    background:
        rgba(239,68,68,.08);

    color:#fca5a5;
}

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

@media(max-width:1100px){

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

    .ffz-lineup__pitch{
        min-height:620px;

        padding:
            36px 18px;
    }

    .ffz-lineup__formation{
        min-height:530px;
    }

    .ffz-lineup__row{
        gap:18px;
    }

    .ffz-lineup__row--forwards{
        gap:70px;
    }

    .ffz-lineup-player{
        width:108px;
    }

    .ffz-lineup-player__image{
        width:76px;
        height:76px;
    }
}

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

@media(max-width:768px){

    .ffz-lineup{
        padding:64px 0;
    }

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

        gap:10px;
    }

    .ffz-lineup__summary-item{
        padding:12px 14px;
    }

    .ffz-lineup__summary-label{
        font-size:9px;
    }

    .ffz-lineup__summary-value{
        font-size:15px;
    }

    .ffz-lineup__wrapper{
        padding:16px;

        border-radius:20px;
    }

    .ffz-lineup__pitch{
        min-height:560px;

        padding:
            28px 8px;

        border-radius:18px;
    }

    .ffz-lineup__pitch::after{
        inset:14px;
    }

    .ffz-lineup__formation{
        min-height:500px;

        gap:18px;
    }

    .ffz-lineup__row{
        gap:6px;

        flex-wrap:nowrap;
    }

    .ffz-lineup__row--defenders,
    .ffz-lineup__row--midfielders{
        justify-content:space-around;
    }

    .ffz-lineup__row--forwards{
        gap:34px;
    }

    .ffz-lineup-player{
        width:74px;
    }

    .ffz-lineup-player__image{
        width:54px;
        height:54px;

        margin-bottom:7px;

        border-width:2px;
    }

    .ffz-lineup-player__captain{
        top:-5px;
        right:-5px;

        width:23px;
        height:23px;

        font-size:9px;
    }

    .ffz-lineup-player__name{
        font-size:10px;
    }

    .ffz-lineup-player__team{
        max-width:62px;

        font-size:8px;
    }

    .ffz-lineup-player__position{
        padding:2px 4px;

        font-size:6px;
    }

    .ffz-lineup-player__stats{
        gap:3px;
    }

    .ffz-lineup-player__price,
    .ffz-lineup-player__form{
        min-height:19px;

        padding:3px 4px;

        font-size:6px;
    }

    .ffz-lineup-player__fdr,
    .ffz-lineup-player__double,
    .ffz-lineup-player__blank{
        min-height:19px;

        padding:3px 5px;

        font-size:6px;
    }

    .ffz-lineup-player__rating{
        margin-top:4px;

        font-size:7px;
    }

    .ffz-lineup__bench{
        margin-top:18px;

        padding:16px 12px;
    }

    .ffz-lineup__bench-header{
        margin-bottom:14px;
    }

    .ffz-lineup__bench-title{
        font-size:15px;
    }

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

        gap:10px;
    }

    .ffz-lineup-player--bench{
        padding:10px 6px;
    }

    .ffz-lineup-player--bench
    .ffz-lineup-player__image{
        width:50px;
        height:50px;
    }
}

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

@media(max-width:480px){

    .ffz-lineup__wrapper{
        padding:10px;
    }

    .ffz-lineup__pitch{
        min-height:510px;

        padding:
            24px 4px;
    }

    .ffz-lineup__formation{
        min-height:455px;
    }

    .ffz-lineup__row{
        gap:2px;
    }

    .ffz-lineup__row--forwards{
        gap:24px;
    }

    .ffz-lineup-player{
        width:64px;
    }

    .ffz-lineup-player__image{
        width:46px;
        height:46px;
    }

    .ffz-lineup-player__name{
        font-size:9px;
    }

    .ffz-lineup-player__team{
        font-size:7px;
    }

    .ffz-lineup-player__position,
    .ffz-lineup-player__rating{
        display:none;
    }

    .ffz-lineup-player__price,
    .ffz-lineup-player__form{
        padding:2px 4px;

        font-size:6px;
    }

    .ffz-lineup-player__fdr,
    .ffz-lineup-player__double,
    .ffz-lineup-player__blank{
        padding:2px 4px;

        font-size:6px;
    }

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

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

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

    .ffz-lineup-player{
        transition:none;
    }

    .ffz-lineup-player:hover{
        transform:none;
    }

    .ffz-lineup.is-loading
    .ffz-lineup-player{
        animation:none;
    }
}

/* Flexible formation rows: compact with five players, balanced on desktop. */
.ffz-lineup__row{
    max-width:780px;
    margin-inline:auto;
    gap:clamp(8px,2.2vw,28px);
}

.ffz-lineup__row[data-player-count="1"]{max-width:180px;}
.ffz-lineup__row[data-player-count="2"]{max-width:420px;}
.ffz-lineup__row[data-player-count="3"]{max-width:560px;}
.ffz-lineup__row[data-player-count="4"]{max-width:700px;}
.ffz-lineup__row[data-player-count="5"]{max-width:780px;}

.ffz-lineup__row--forwards{
    gap:clamp(22px,7vw,82px);
}

@media(max-width:768px){
    .ffz-lineup__row[data-player-count="5"] .ffz-lineup-player{
        width:min(17.5vw,68px);
    }

    .ffz-lineup__row[data-player-count="5"]{
        gap:clamp(1px,1vw,6px);
    }

    .ffz-lineup__row[data-player-count="5"] .ffz-lineup-player__image{
        width:clamp(38px,11.5vw,50px);
        height:clamp(38px,11.5vw,50px);
    }

    .ffz-lineup__row[data-player-count="5"] .ffz-lineup-player__name{
        width:100%;
        overflow:hidden;
        font-size:clamp(8px,2.35vw,10px);
        text-overflow:ellipsis;
        white-space:nowrap;
    }
}
/*========================================================
4.10.2 MOBILE BENCH — FOUR PLAYERS IN ONE ROW
========================================================*/

@media(max-width:768px){
    .ffz-lineup__bench-players{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:6px;
    }

    .ffz-lineup-player--bench{
        min-width:0;
        padding:9px 3px;
        border-radius:12px;
    }

    .ffz-lineup-player--bench .ffz-lineup-player__image{
        width:44px;
        height:44px;
        margin-bottom:6px;
    }

    .ffz-lineup-player--bench .ffz-lineup-player__name{
        width:100%;
        overflow:hidden;
        font-size:9px;
        line-height:1.2;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .ffz-lineup-player--bench .ffz-lineup-player__team,
    .ffz-lineup-player--bench .ffz-lineup-player__position,
    .ffz-lineup-player--bench .ffz-lineup-player__rating{
        display:none;
    }

    .ffz-lineup-player--bench .ffz-lineup-player__stats{
        gap:2px;
        justify-content:center;
    }

    .ffz-lineup-player--bench .ffz-lineup-player__price,
    .ffz-lineup-player--bench .ffz-lineup-player__form,
    .ffz-lineup-player--bench .ffz-lineup-player__fdr,
    .ffz-lineup-player--bench .ffz-lineup-player__double,
    .ffz-lineup-player--bench .ffz-lineup-player__blank{
        padding:2px 3px;
        font-size:6px;
    }
}

@media(max-width:420px){
    .ffz-lineup__bench{
        padding:14px 7px;
    }

    .ffz-lineup__bench-players{
        gap:4px;
    }

    .ffz-lineup-player--bench{
        padding:8px 2px;
    }

    .ffz-lineup-player--bench .ffz-lineup-player__image{
        width:40px;
        height:40px;
    }
}