/* =========================================================
   PREMIER LEAGUE REPLAYS
   COMPLETE STYLESHEET
========================================================= */

:root {

    --hero:
        radial-gradient(
            circle at 82% 16%,
            rgba(90, 208, 255, .25),
            transparent 28%
        ),

        radial-gradient(
            circle at 8% 100%,
            rgba(170, 90, 255, .28),
            transparent 34%
        ),

        linear-gradient(
            120deg,
            #08152a 0%,
            #172859 45%,
            #5535a8 100%
        );

    --text:
        #172033;

    --muted:
        #6b788c;

    --border:
        #e2e8f0;

    --surface:
        #ffffff;

    --page-width:
        1180px;

    --shadow:
        0 16px 38px
        rgba(20, 34, 72, .14);
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:
        var(--text);

    background:
        linear-gradient(
            180deg,
            #edf3fa 0%,
            #f8fafc 46%,
            #ffffff 100%
        );

    overflow-x: hidden;
}


a {
    color: inherit;
}


button,
input {
    font: inherit;
}


/* =========================================================
   TOP BAR
========================================================= */

.replay-topbar {

    position: sticky;

    top: 0;

    z-index: 100;

    min-height: 62px;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

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

    backdrop-filter:
        blur(16px);

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

    box-shadow:
        0 4px 18px
        rgba(15, 23, 42, .05);
}


.replay-brand {

    flex: 0 0 auto;

    color:
        #172033;

    text-decoration: none;

    font-weight: 900;

    letter-spacing:
        -.02em;
}


.replay-nav {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 7px;
}


.replay-nav a {

    padding:
        8px 11px;

    border-radius:
        999px;

    background:
        #eef2f8;

    color:
        #4b586e;

    text-decoration:
        none;

    white-space: nowrap;

    font-size:
        .72rem;

    font-weight:
        750;

    transition:
        background .2s ease,
        transform .2s ease;
}


.replay-nav a:hover {

    background:
        #e4eaf3;

    transform:
        translateY(-1px);
}


/* =========================================================
   BREADCRUMBS
========================================================= */

.breadcrumbs {

    width:
        min(
            var(--page-width),
            calc(100% - 30px)
        );

    margin:
        0 auto;

    padding:
        12px 0;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    overflow-x:
        auto;

    white-space:
        nowrap;

    color:
        #7b8799;

    font-size:
        .72rem;

    scrollbar-width:
        none;
}


.breadcrumbs::-webkit-scrollbar {
    display: none;
}


.breadcrumbs a {

    color:
        #566379;

    text-decoration:
        none;
}


.breadcrumbs a:hover {

    color:
        #5c48c8;
}


/* =========================================================
   HERO
========================================================= */

.replay-hero {

    width:
        min(
            var(--page-width),
            calc(100% - 30px)
        );

    margin:
        0 auto;

    padding:
        48px;

    border-radius:
        26px;

    color:
        #ffffff;

    background:
        var(--hero);

    box-shadow:
        0 24px 60px
        rgba(24, 38, 78, .20);

    overflow: hidden;
}


.hero-label {

    display: inline-block;

    color:
        #a9dcff;

    font-size:
        .68rem;

    font-weight:
        900;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.replay-hero h1 {

    max-width:
        820px;

    margin:
        9px 0 0;

    font-size:
        clamp(
            2.35rem,
            5vw,
            4.8rem
        );

    line-height:
        1;

    letter-spacing:
        -.05em;
}


.replay-hero p {

    max-width:
        720px;

    margin:
        17px 0 0;

    color:
        #d5e1f2;

    font-size:
        .98rem;

    line-height:
        1.7;
}


.hero-actions {

    margin-top:
        22px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.hero-button {

    min-height:
        42px;

    padding:
        0 15px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    text-decoration:
        none;

    font-size:
        .74rem;

    font-weight:
        800;

    transition:
        transform .2s ease;
}


.hero-button:hover {

    transform:
        translateY(-2px);
}


.hero-button.primary {

    background:
        #ffffff;

    color:
        #172859;
}


.hero-button.secondary {

    color:
        #ffffff;

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

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

    backdrop-filter:
        blur(8px);
}


/* =========================================================
   MAIN
========================================================= */

.replay-main {

    width:
        min(
            var(--page-width),
            calc(100% - 30px)
        );

    margin:
        25px auto 50px;
}


/* =========================================================
   SEARCH
========================================================= */

.replay-search {

    max-width:
        850px;

    margin:
        0 auto 24px;
}


#replaySearch {

    width:
        100%;

    min-height:
        52px;

    padding:
        0 17px;

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

    border-radius:
        15px;

    background:
        #ffffff;

    color:
        #172033;

    outline:
        none;

    box-shadow:
        0 7px 20px
        rgba(15, 23, 42, .05);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


#replaySearch::placeholder {

    color:
        #9ba7b8;
}


#replaySearch:focus {

    border-color:
        rgba(85, 53, 168, .35);

    box-shadow:
        0 0 0 4px
        rgba(85, 53, 168, .08),
        0 7px 20px
        rgba(15, 23, 42, .05);
}


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

.replay-stats {

    display:
        grid;

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

    gap:
        12px;

    margin-bottom:
        30px;
}


.stat-card {

    min-height:
        100px;

    padding:
        20px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        4px;

    border-radius:
        18px;

    color:
        #ffffff;

    text-align:
        center;

    background:
        var(--hero);

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


.stat-card strong {

    font-size:
        2rem;

    line-height:
        1;

    font-weight:
        900;
}


.stat-card span {

    color:
        #c3cee0;

    font-size:
        .7rem;

    font-weight:
        700;
}


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

.section-heading {

    margin-bottom:
        14px;
}


.section-heading > span {

    display:
        inline-block;

    color:
        #6550cb;

    font-size:
        .65rem;

    font-weight:
        900;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.section-heading h2 {

    margin:
        4px 0 0;

    font-size:
        1.55rem;

    line-height:
        1.2;

    letter-spacing:
        -.025em;
}


.section-heading p {

    margin:
        5px 0 0;

    color:
        var(--muted);

    font-size:
        .82rem;

    line-height:
        1.6;
}


/* =========================================================
   MATCHWEEK FILTER
========================================================= */

.matchweek-filter-section {

    margin-bottom:
        32px;
}


.matchweek-nav {

    display:
        flex;

    gap:
        7px;

    overflow-x:
        auto;

    padding-bottom:
        7px;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;
}


.matchweek-nav::-webkit-scrollbar {
    display: none;
}


.matchweek-pill {

    flex:
        0 0 auto;

    min-height:
        38px;

    padding:
        0 14px;

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

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #59677c;

    font-size:
        .7rem;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform .18s ease,
        background .18s ease;
}


.matchweek-pill:hover {

    transform:
        translateY(-1px);
}


.matchweek-pill.active {

    color:
        #ffffff;

    border-color:
        transparent;

    background:
        linear-gradient(
            135deg,
            #172859,
            #5535a8
        );

    box-shadow:
        0 7px 18px
        rgba(70, 54, 164, .18);
}


/* =========================================================
   REPLAY LIST
========================================================= */

.replay-list-section {

    margin-bottom:
        40px;
}


.replays-container {

    display:
        flex;

    flex-direction:
        column;

    gap:
        27px;
}


/* =========================================================
   MATCHWEEK GROUP
========================================================= */

.replay-matchweek {

    padding:
        22px;

    border-radius:
        22px;

    color:
        #ffffff;

    background:
        var(--hero);

    box-shadow:
        0 17px 38px
        rgba(20, 34, 72, .17);
}


.matchweek-heading {

    margin-bottom:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;
}


.matchweek-heading > div > span {

    color:
        #b4dfff;

    font-size:
        .59rem;

    font-weight:
        850;

    letter-spacing:
        .09em;
}


.matchweek-heading h3 {

    margin:
        3px 0 0;

    font-size:
        1.12rem;
}


.matchweek-heading > strong {

    color:
        #d5e0f2;

    font-size:
        .65rem;

    font-weight:
        800;

    white-space:
        nowrap;
}


/* =========================================================
   REPLAY RAIL
========================================================= */

.replay-rail {

    display:
        grid;

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

    gap:
        11px;
}


/* =========================================================
   REPLAY CARD
========================================================= */

.replay-card {

    min-width:
        0;

    min-height:
        230px;

    padding:
        15px;

    display:
        flex;

    flex-direction:
        column;

    border-radius:
        16px;

    color:
        #ffffff;

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

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

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

    transition:
        transform .2s ease,
        background .2s ease;
}


.replay-card:hover {

    transform:
        translateY(-3px);

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


/* =========================================================
   CARD HEADER
========================================================= */

.replay-card-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;
}


.replay-badge,
.week-badge {

    padding:
        4px 7px;

    border-radius:
        999px;

    font-size:
        .56rem;

    font-weight:
        900;
}


.replay-badge {

    color:
        #ffd4f4;

    background:
        rgba(219, 77, 181, .22);
}


.week-badge {

    color:
        #d9e5f7;

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


/* =========================================================
   DATE
========================================================= */

.replay-date {

    margin-top:
        10px;

    color:
        #cbd7e9;

    font-size:
        .67rem;
}


/* =========================================================
   TEAMS
========================================================= */

.replay-teams {

    flex:
        1;

    margin-top:
        15px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        8px;
}


.replay-team {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        6px;

    text-align:
        center;
}


.replay-team strong {

    max-width:
        100%;

    color:
        #ffffff;

    font-size:
        .76rem;

    line-height:
        1.15;

    overflow-wrap:
        anywhere;
}


.team-badge {

    width:
        40px;

    height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    color:
        #ffffff;

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

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

    font-size:
        .63rem;

    font-weight:
        900;
}


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

.score-area {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.score-box {

    min-width:
        68px;

    min-height:
        46px;

    padding:
        6px 9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border-radius:
        12px;

    color:
        #ffffff;

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

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

    font-weight:
        900;
}


.score-box strong {

    font-size:
        1.18rem;
}


.score-box span {

    color:
        #a7b4c8;
}


.score-pending {

    color:
        #d8cfff;

    font-size:
        .7rem;

    font-weight:
        800;
}


/* =========================================================
   VENUE
========================================================= */

.replay-venue {

    margin-top:
        12px;

    color:
        #aebbd0;

    font-size:
        .63rem;

    text-align:
        center;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


/* =========================================================
   ACTIONS
========================================================= */

.replay-actions {

    margin-top:
        13px;

    display:
        flex;

    gap:
        7px;
}


.watch-button,
.details-button {

    flex:
        1;

    min-height:
        36px;

    padding:
        6px 9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    color:
        #ffffff;

    text-decoration:
        none;

    text-align:
        center;

    font-size:
        .65rem;

    font-weight:
        800;

    transition:
        transform .18s ease;
}


.watch-button:hover,
.details-button:hover {

    transform:
        translateY(-1px);
}


.watch-button {

    background:
        linear-gradient(
            135deg,
            #9a50dc,
            #c74fae
        );
}


.details-button {

    background:
        linear-gradient(
            135deg,
            #2b83e3,
            #7052df
        );
}


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

.replay-empty,
.loading {

    padding:
        26px;

    border:
        1px dashed
        var(--border);

    border-radius:
        16px;

    background:
        #ffffff;

    color:
        #7b899c;

    text-align:
        center;
}


/* =========================================================
   LIBRARY CTA
========================================================= */

.library-card {

    margin:
        40px 0;

    padding:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    border-radius:
        22px;

    color:
        #ffffff;

    background:
        var(--hero);

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


.library-label {

    color:
        #a9dcff;

    font-size:
        .65rem;

    font-weight:
        900;

    letter-spacing:
        .11em;
}


.library-card h2 {

    margin:
        5px 0 0;

    font-size:
        1.4rem;
}


.library-card p {

    max-width:
        720px;

    color:
        #c8d4e6;

    font-size:
        .82rem;

    line-height:
        1.7;
}


.library-button {

    flex:
        0 0 auto;

    min-height:
        43px;

    padding:
        0 15px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #172859;

    text-decoration:
        none;

    font-size:
        .72rem;

    font-weight:
        850;
}


/* =========================================================
   SEO CONTENT
========================================================= */

.replay-seo {

    margin:
        40px 0;

    padding:
        30px;

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

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        0 8px 24px
        rgba(15, 23, 42, .05);
}


.seo-label {

    color:
        #6550cb;

    font-size:
        .65rem;

    font-weight:
        900;

    letter-spacing:
        .12em;
}


.replay-seo h2 {

    margin:
        6px 0 18px;

    font-size:
        1.55rem;
}


.replay-seo h3 {

    margin:
        24px 0 7px;

    font-size:
        1rem;
}


.replay-seo p {

    color:
        #667489;

    font-size:
        .86rem;

    line-height:
        1.8;
}


.replay-seo a {

    color:
        #5d49cc;

    font-weight:
        800;
}


/* =========================================================
   FOOTER
========================================================= */

footer {

    margin-top:
        50px;

    padding:
        35px 20px;

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        13px;

    text-align:
        center;

    background:
        #101827;
}


footer a {

    color:
        #c0cbda;

    text-decoration:
        none;

    font-size:
        .72rem;

    font-weight:
        650;
}


footer a:hover {

    color:
        #ffffff;
}


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

@media (max-width: 900px) {

    .replay-rail {

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


    .library-card {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


/* =========================================================
   MOBILE
   NO VERTICAL REPLAY CARD TRAIL
========================================================= */

@media (max-width: 600px) {

    .replay-topbar {

        min-height:
            58px;

        padding:
            0 10px;
    }


    .replay-brand {

        font-size:
            .86rem;
    }


    .replay-nav {

        min-width:
            0;

        overflow-x:
            auto;

        scrollbar-width:
            none;

        -webkit-overflow-scrolling:
            touch;
    }


    .replay-nav::-webkit-scrollbar {

        display:
            none;
    }


    .replay-nav a {

        flex:
            0 0 auto;

        padding:
            7px 9px;

        font-size:
            .65rem;
    }


    .breadcrumbs {

        width:
            calc(100% - 20px);

        padding:
            10px 0;

        font-size:
            .66rem;
    }


    .replay-hero {

        width:
            calc(100% - 20px);

        padding:
            30px 21px;

        border-radius:
            20px;
    }


    .replay-hero h1 {

        font-size:
            2.15rem;
    }


    .replay-hero p {

        font-size:
            .8rem;
    }


    .hero-actions {

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        scrollbar-width:
            none;
    }


    .hero-actions::-webkit-scrollbar {

        display:
            none;
    }


    .hero-button {

        flex:
            0 0 auto;
    }


    .replay-main {

        width:
            calc(100% - 20px);

        margin-top:
            18px;
    }


    .replay-stats {

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

        gap:
            8px;
    }


    .stat-card {

        min-height:
            88px;

        padding:
            14px;
    }


    .stat-card strong {

        font-size:
            1.6rem;
    }


    .section-heading h2 {

        font-size:
            1.2rem;
    }


    .replay-matchweek {

        padding:
            15px 12px;

        border-radius:
            17px;
    }


    .matchweek-heading h3 {

        font-size:
            .95rem;
    }


    /*
     * Horizontal rail instead of
     * vertically stacking replay cards.
     */

    .replay-rail {

        display:
            flex;

        grid-template-columns:
            none;

        gap:
            9px;

        overflow-x:
            auto;

        padding-bottom:
            7px;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:
            none;

        overscroll-behavior-x:
            contain;

        -webkit-overflow-scrolling:
            touch;
    }


    .replay-rail::-webkit-scrollbar {

        display:
            none;
    }


    .replay-card {

        flex:
            0 0
            min(
                78vw,
                275px
            );

        width:
            min(
                78vw,
                275px
            );

        min-height:
            215px;

        scroll-snap-align:
            start;
    }


    .replay-team strong {

        font-size:
            .71rem;
    }


    .team-badge {

        width:
            36px;

        height:
            36px;

        font-size:
            .58rem;
    }


    .score-box {

        min-width:
            60px;

        min-height:
            42px;
    }


    .score-box strong {

        font-size:
            1.05rem;
    }


    .replay-actions {

        flex-wrap:
            nowrap;
    }


    .watch-button,
    .details-button {

        min-width:
            0;

        font-size:
            .61rem;
    }


    .library-card {

        padding:
            22px 17px;

        gap:
            13px;
    }


    .library-card h2 {

        font-size:
            1.2rem;
    }


    .library-card p {

        font-size:
            .76rem;
    }


    .replay-seo {

        padding:
            23px 17px;
    }


    .replay-seo h2 {

        font-size:
            1.3rem;
    }


    .replay-seo p {

        font-size:
            .8rem;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .replay-hero h1 {

        font-size:
            1.95rem;
    }


    .replay-card {

        flex-basis:
            82vw;

        width:
            82vw;
    }


    .replay-stats {

        gap:
            6px;
    }


    .stat-card span {

        font-size:
            .62rem;
    }

}


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

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

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;
    }

}