:root {
            --primary: #169bd5;
            --primary-dark: #102b68;
            --secondary: #31217d;
            /* TJ Prameň Dolná Strehová */
            --dark: #0c2454;
            --light: #f4f8fb;
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            background: var(--light);
            color: #161616;
            font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        .navbar { background: var(--dark); min-height: 72px; }

        .navbar-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #fff;
            font-size: 1.35rem;
            font-weight: 700;
            letter-spacing: .5px;
        }

        .navbar-brand:hover { color: #fff; }

        .club-logo {
            width: 44px;
            height: 44px;
            border-radius: 5px;
            display: flex;
            padding: 2px;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: .8rem;
            font-weight: 900;
        }

        .social .social-link {
            color: rgba(255,255,255,.7);
            font-weight: 600;
            text-decoration: none;
        }
        .navbar-nav .nav-link {
            color: rgba(255,255,255,.7);
            font-weight: 600;
            padding-left: 18px !important;
            padding-right: 18px !important;
        }

        .navbar-nav .nav-link:hover { color: #fff; }

        .hero {
            background: linear-gradient(120deg, var(--primary-dark), var(--primary));
            color: #fff;
            padding: 75px 0 85px;
            position: relative;
            overflow: hidden;
        }

        .hero:after {
            content: "";
            position: absolute;
            width: 500px;
            height: 500px;
            right: -200px;
            top: -250px;
            border-radius: 50%;
            border: 80px solid rgba(255,255,255,.04);
        }

        .hero-title {
            font-size: clamp(2.5rem, 6vw, 5rem);
            font-weight: 900;
            line-height: .95;
            letter-spacing: -3px;
        }

        .hero-subtitle {
            margin-top: 20px;
            font-size: 1.1rem;
            opacity: .8;
            max-width: 650px;
        }

        .season {
            display: inline-block;
            margin-bottom: 20px;
            padding: 7px 14px;
            border: 1px solid rgba(255,255,255,.3);
            border-radius: 50px;
            font-size: .75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .teams { padding: 60px 0 80px; }

        .section-title {
            font-size: 2rem;
            font-weight: 900;
            letter-spacing: -1px;
        }

        .section-subtitle { color: #777; }

        .team-card {
            background: #fff;
            border-radius: 18px;
            overflow: hidden;
            height: 100%;
            box-shadow: 0 5px 25px rgba(0,0,0,.06);
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .team-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 35px rgba(0,0,0,.12);
        }

        .team-header {
            background: var(--dark);
            color: #fff;
            padding: 20px 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .team-name {
            margin: 0;
            font-size: 1.45rem;
            font-weight: 900;
        }

        .team-category {
            display: block;
            color: #999;
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .team-icon {
            width: 44px;
            height: 44px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .team-icon img {
            width: 34px;
            height: 34px;
            object-fit: contain;
        }

        .team-content { padding: 22px; }

        .match-block {
            padding: 13px 0;
            border-bottom: 1px solid #eee;
        }

        .match-block:last-child { border-bottom: 0; }

        .match-label {
            font-size: .65rem;
            font-weight: 800;
            color: #999;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 7px;
        }

        .match-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .match-teams {
            font-weight: 700;
            font-size: .9rem;
        }

        .match-date {
            margin-top: 3px;
            font-size: .75rem;
            color: #888;
        }

        .score {
            font-size: 1.35rem;
            font-weight: 900;
            white-space: nowrap;
            color: var(--primary);
        }

        .table-position {
            margin-top: 18px;
            background: #eef6fb;
            border-radius: 12px;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .position-number {
            font-size: 2rem;
            font-weight: 900;
            line-height: 1;
            color: var(--primary);
        }

        .position-info { text-align: right; }
        .position-info strong { display: block; font-size: .9rem; }
        .position-info small { color: #888; }

        .team-button {
            width: 100%;
            margin-top: 16px;
            border-radius: 10px;
            padding: 11px;
            font-weight: 800;
        }

        .team-card.adults { border-top: 5px solid var(--secondary); }
        .team-card.u19 { border-top: 5px solid var(--secondary); }
        .team-card.u17 { border-top: 5px solid var(--secondary); }
        .team-card.u15 { border-top: 5px solid var(--secondary); }
        .team-card.u13 { border-top: 5px solid var(--secondary); }
        .team-card.u11 { border-top: 5px solid var(--secondary); }
        .team-card.u09 { border-top: 5px solid var(--secondary); }

        .team-card.adults .team-header {
            background: linear-gradient(120deg, var(--primary-dark), var(--dark));
        }

        .loading {
            padding: 35px 20px;
            text-align: center;
            color: #777;
        }

        .api-error {
            border-radius: 14px;
        }

        footer {
            background: var(--primary-dark);
            color: rgba(255,255,255,.6);
            padding: 35px 0;
        }

        footer strong { color: #fff; }

        @media (max-width: 767px) {
            .navbar { min-height: 62px; }
            .hero { padding: 55px 0 60px; }
            .hero-title { letter-spacing: -2px; }
            .teams { padding: 40px 0 60px; }
            .section-title { font-size: 1.7rem; }
            .team-card { border-radius: 14px; }
        }


.hero {
position: relative;
overflow: hidden;
}

.hero-bg {
position: absolute;
inset: 0;
background-image: url("/images/logo_1640x624.jpg");
background-size: cover;
background-position: center right;
opacity: .35;
min-height: 50vh;
}

.hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(12,36,84,.72) 0%, rgba(16,43,104,.42) 42%, rgba(22,155,213,.12) 100%);
pointer-events: none;
}

.hero > .container {
position: relative;
z-index: 2;
}
#matchesSection img.match-team-logo-small,
#fixtures img.match-team-logo-small {
    margin: 0 0.5em;
}
#leagueTable img.table-team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.today-matches-banner img.team-logo {
    width: 90px;
    height: 90px;
    object-fit: contain;
}
img.table-team-logo,
#matchesSection img.match-team-logo-small,
#matches img.match-team-logo-small,
#fixtures img.match-team-logo-small {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
#leagueTable .fw-semibold span {
    text-transform: uppercase;
}
img.match-team-logo {
    width: 90px;
    height: 90px;
    margin: 1em;
    object-fit: contain;
}
.match-detail {
    display: block;
    color: #000;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
}
.featured-score .match-detail {
    font-size: 14px;
    line-height: 2;
}

#matchPage #teamLogo,
#teamPage #teamLogo {
    width: 100px;
    margin: 1em 0.5em;
}
.match-teams-row {
    display: flex;
    justify-content: space-between;
}
.match-teams-large > div {
    text-align: center;
}
.match-teams-large div .text-end {
    text-align: center;
}

.match-large .match-team-name {
    display: block;
    font-weight: bold;
    font-size: 125%;
    line-height: 2;
    text-align: center;
}

.match-card.res-win .match-score  {
    border-color: green;
    color: green;
    line-height: 3;
    background-color: rgba(100,255,100,0.15);
}
.match-card.res-draw .match-score  {
    border-color: #999;
    color: #666;
    line-height: 3;
    background-color: rgba(200,200,200,0.15);
}
.match-card.res-loss .match-score  {
    border-color: red;
    line-height: 3;
    color: rgb(220, 53, 69);
    background-color: rgba(255,50,50,0.05);
}

.team-nav .nav-link.active {
    background-color: var(--primary-dark) !important;
    color: #fff !important;
    font-weight: 700;
}

.team-nav .nav-link {
    color: var(--primary-dark);
}

.team-nav .nav-link:hover {
    background-color: rgba(22, 155, 213, 0.10);
}
.player-number {
    width: 30px;
    height: 46px;

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

    background: var(--primary);
    color: #fff;

    font-size: 1.05rem;
    font-weight: 700;

    border-radius: 5px 5px 8px 8px;

    position: relative;
    flex-shrink: 0;
}

.player-number::before,
.player-number::after {
    content: "";
    position: absolute;
    top: 3px;

    width: 7px;
    height: 14px;

    background: var(--primary);
}

.player-number::before {
    left: -4px;
    transform: rotate(25deg);
    border-radius: 2px;
}

.player-number::after {
    right: -4px;
    transform: rotate(-25deg);
    border-radius: 2px;
}
.match-score-link {
    color: #000;
    text-decoration: none;
}
.today-match-score-link {
    text-decoration: none;
}
.today-match-score {
    display: block;
    font-size: 2em;
    font-weight: 900;
    color: #000;
    white-space: nowrap;
    min-width: 0;
}
.today-matches-banner {
    padding: 1.5rem;
}

.today-matches-header {
    margin-bottom: 1rem;
}

.today-matches-header .badge {
    font-size: 1rem;
    padding: .65rem 1rem;
}

.today-matches-banner {
    background: transparent;
    padding: 0;
}

.today-matches-header {
    margin-bottom: 1rem;
}

.today-matches-header .badge {
    font-size: 1rem;
    padding: .7rem 1rem;
}


.today-match {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 1rem;
    padding: 1.5rem;
    height: 100%;
}


.today-match-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}


.today-match-team-type {
    font-weight: 700;
    font-size: 1.1rem;
}


.today-match-date {
    color: #777;
    font-size: .9rem;
    margin-top: .25rem;
    font-weight: 700;
    text-align: center;
}


.today-match-status {
    background: var(--bs-danger);
    color: #fff;
    font-weight: 800;
    padding: .55rem .9rem;
    border-radius: .5rem;
    line-height: 1;
}


.today-match-clubs {
    display: grid;
    grid-template-columns: 1fr 70px 1fr;
    align-items: center;
    gap: 1rem;
}


.today-match-club {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
}


.today-match-club img {
    display: block;
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin: 0 auto 1rem;
}


.today-match-vs {
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    color: #aaa;
}


.today-match-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-top: 1rem;
    font-size: .9rem;
    color: #666;
}


@media (max-width: 575.98px) {

    .today-match {
        padding: 1rem;
    }

    #matchPage #teamLogo,
    #teamPage #teamLogo {
        width: 60px;
        margin: 0.5em;
    }

    .today-match-clubs {
        grid-template-columns: 1fr 40px 1fr;
        gap: .5rem;
    }

    .today-match-club {
        font-size: .9rem;
    }

    .today-match-club img {
        width: 65px;
        height: 65px;
    }

    .today-match-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .today-match-bottom .btn {
        width: 100%;
    }
}

.today-match-competition {
    margin-left: .75rem;
    color: #777;
    font-size: .85rem;
    font-weight: 400;
}

.team-card ,
.facebook-card {
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.facebook-card:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .375) !important;
}
.facebook-image {
    width: 100%;
    aspect-ratio: 9/7;
    object-fit: cover;
    object-position: top;
}

/* mobil */
@media (max-width: 767.98px) {
    .facebook-image {
        aspect-ratio: 16 / 10;
    }
    .table-team-logo {
        display: none;
    }
    #matchPage #teamLogo,
    #teamPage #teamLogo {
        width: 80px;
        margin: 0.5em;
    }

}

/* md, lg, xl, xxl */
@media (min-width: 768px) {
    .facebook-image {
        aspect-ratio: 8 / 9;
    }
}

.facebook-message {
    line-height: 1.55;

    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

@media (max-width: 767.98px) {

    .facebook-image {
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

}

    .featured-match-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        grid-template-areas:
            "status status"
            "home away";

        width: 100% !important;
        max-width: none !important;
        gap: 16px 0;
    }
    
    .xfeatured-match-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        justify-content: stretch !important;
        align-items: start;

        gap: 16px 0;
    }

    /* HRÄ‚ME DNES */
    .featured-match-grid > .text-center {
        grid-area: status;

        width: 100% !important;
        max-width: none !important;
    }

    .featured-score-status {
        display: block;
        width: 100% !important;
        max-width: none !important;

        box-sizing: border-box;
        text-align: center;
    }

    /* oba tÄ‚Âmy */
    .featured-match-grid > .featured-team {
        width: 100% !important;
        max-width: none !important;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        text-align: center;
    }

    .featured-match-grid > .featured-team:first-child {
        grid-area: home;
    }

    .featured-match-grid > .featured-team:last-child {
        grid-area: away;
    }



    .upcoming-team,
    .upcoming-team.away {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 6px;
    }
    .upcoming-versus {
        font-weight: 400 !important;
        font-size: 1em;
    }

    /* logo vĹľdy hore */
    .upcoming-team-logo {
        order: 1;
        margin: 0;
    }

    /* názov vždy pod logom */
    .upcoming-team-name {
        order: 2;
        width: 100%;
        text-align: center;
        line-height: 1.2;
    }


    .fixture-team,
    .fixture-team.away {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 6px;
    }

    /* logo vĹľdy hore */
    .fixture-team .fixture-logo {
        order: 1;
        margin: 0;
    }

    /* názov vždy pod logom */
    .fixture-team span {
        order: 2;
        width: 100%;
        text-align: center;
        line-height: 1.2;
    }




/* =========================================================
   TEAM PAGE - MATCHES REDESIGN
   ========================================================= */

.featured-match {
    position: relative;
    overflow: hidden;
    background: #fff;
    color: #111;
    border-radius: 16px;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.10);
}

.featured-match-inner {
    padding: 28px 32px 24px;
}

.featured-match-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: rgba(5,5,5,.7);
    margin-bottom: 20px;
    font-size: .9rem;
}

.featured-match-round {
    color: #111;
    font-weight: 700;
}


/* =========================================================
   DEFAULT / DNES HRÄ‚ME
   ========================================================= */

.featured-match-grid {
    display: grid;

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

    grid-template-areas:
        "status status"
        "home away";

    width: 100%;
    max-width: none;

    align-items: start;
    gap: 24px 20px;
}

.featured-match-grid > .featured-team:first-child {
    grid-area: home;
}

.featured-match-grid > .text-center {
    grid-area: status;
    width: 100%;
}

.featured-match-grid > .featured-team:last-child {
    grid-area: away;
}


/* =========================================================
   ODOHRANÄ‚Å¥ ZÄ‚PAS - DESKTOP
   TEAM | SCORE | TEAM
   ========================================================= */

.featured-match-grid.played {
    grid-template-columns:
        minmax(220px, 1fr)
        140px
        minmax(220px, 1fr) !important;

    grid-template-areas:
        "home score away";

    align-items: center;

    width: 100%;
    max-width: 900px;

    margin-left: auto;
    margin-right: auto;

    column-gap: 35px;
    row-gap: 0;
}

.featured-match-grid.played > .featured-team:first-child {
    grid-area: home;

    width: 100%;

    justify-self: stretch;
    align-items: center;

    padding: 0;

    text-align: center;
}

.featured-match-grid.played > .featured-result,
.featured-match-grid.played > .text-center {
    grid-area: score;

    width: 180px;

    justify-self: center;

    text-align: center;
}

.featured-match-grid.played > .featured-team:last-child {
    grid-area: away;

    width: 100%;

    justify-self: stretch;
    align-items: center;

    padding: 0;

    text-align: center;
}


/* =========================================================
   FEATURED TEAM
   ========================================================= */

.featured-team {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.featured-team-logo-wrap {
    width: 100%;
    height: 100px;

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

    margin-bottom: 12px;
}

.featured-team-logo {
    width: 95px;
    height: 95px;

    object-fit: contain;
}

.featured-team-placeholder {
    width: 88px;
    height: 88px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: rgba(0,0,0,.06);
    color: rgba(0,0,0,.45);

    font-size: 2.3rem;
}

.featured-team-name {
    width: 100%;

    font-size: 1.1rem;
    line-height: 1.2;
    font-weight: 700;

    text-align: center;
}


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

.featured-result {
    min-width: 0;
    text-align: center;
}

.featured-score {
    text-align: center;
    font-size: 3rem;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

.featured-score-label {
    margin-top: 8px;

    text-align: center;
    text-transform: uppercase;

    letter-spacing: .08em;

    font-size: .7rem;

    color: rgba(5,5,5,.5);
}


/* =========================================================
   HRÄ‚ME DNES
   ========================================================= */
.today-matches-header span.badge,
.featured-score-status {
    background: var(--primary-dark) !important;
}
.featured-score-status {
    display: block;

    width: 100%;

    box-sizing: border-box;


    padding: .65rem 1.85rem;

    border-radius: .5rem;

    font-size: 1rem;
    font-weight: 800;

    line-height: 1.5;
    letter-spacing: .04em;

    text-align: center;
}


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

.featured-match-venue {
    margin-top: 20px;

    text-align: center;

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

    font-size: .9rem;
}


/* =========================================================
   UPCOMING / FIXTURE LIST
   ========================================================= */

.fixture-list {
}
.upcoming-list {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;

    box-shadow: 0 .25rem 1rem rgba(0,0,0,.04);
}
.upcoming-list,
.fixture-list {
    overflow: hidden;


}


/* =========================================================
   UPCOMING MATCH
   ========================================================= */

.upcoming-match {
    display: grid;

    grid-template-columns:
        125px
        minmax(0,1fr)
        65px
        minmax(0,1fr);

    align-items: center;

    gap: 14px;

    padding: 18px 20px;
}

.upcoming-match + .upcoming-match,
.xfixture-row + .fixture-row {
    border-top: 1px solid var(--bs-border-color);
}

.upcoming-date-day {
    font-size: 1.05rem;
    font-weight: 800;

    text-transform: uppercase;

    color: var(--bs-secondary-color);
}

.upcoming-date-time {
    font-size: .76rem;
    font-weight: 700;
}

.upcoming-team,
.fixture-team {
    display: flex;

    align-items: center;

    min-width: 0;

    gap: 10px;

    font-weight: 600;
}

.upcoming-team.away,
.fixture-team.away {
    justify-content: flex-end;
    text-align: right;
}

.upcoming-team-logo {
    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    object-fit: contain;
}

.upcoming-team-name {
    min-width: 0;
}

.upcoming-versus {
    text-align: center;

    font-weight: 800;

    color: var(--bs-secondary-color);
}

.upcoming-extra {
    grid-column: 2 / 5;

    margin-top: -5px;

    font-size: .78rem;

    text-align: center;

    color: var(--bs-secondary-color);
}


/* =========================================================
   FIXTURES
   ========================================================= */

.fixture-row {
    display: grid;

    grid-template-columns:
        90px
        100px
        minmax(0,1fr)
        70px
        minmax(0,1fr);

    border: 1px solid var(--bs-border-color);
    box-shadow: 0 .25rem 1rem rgba(0,0,0,.04);

    align-items: center;

    gap: 12px;

    padding: 16px 18px;
}
.today-match:hover,
.fixture-row:hover {
    box-shadow: 0.25rem .5rem 1rem rgba(0,0,0,.14);
}
.fixture-round {
    font-size: 1rem;
    color: var(--bs-secondary-color);
}

.fixture-date {
    font-size: .85rem;

    text-transform: uppercase;

    font-weight: 600;
}

.fixture-logo {
    width: 32px;
    height: 32px;

    flex: 0 0 auto;

    object-fit: contain;
}

.fixture-score {
    text-align: center;

    font-size: 1.05rem;
    font-weight: 800;

    white-space: nowrap;
}

.fixture-score.upcoming {
    color: var(--bs-secondary-color);

    font-weight: 300;

    font-size: .75rem;
}

.fixture-row.result-win {
    box-shadow: inset 4px 0 0 #198754;
}

.fixture-row.result-draw {
    box-shadow: inset 4px 0 0 #ffc107;
}

.fixture-row.result-loss {
    box-shadow: inset 4px 0 0 #dc3545;
}


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

@media (max-width: 767.98px) {

    .featured-match-inner {
        padding: 24px 12px;
    }

    .featured-match-meta {
        margin-bottom: 22px;
        gap: 8px 12px;
    }


    /* -----------------------------------------------------
       DNES HRÄ‚ME
       STATUS HORE, TĂŤMY POD NĂŤM
       ----------------------------------------------------- */

    .featured-match-grid {
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        grid-template-areas:
            "status status"
            "home away";

        width: 100%;

        gap: 20px 8px;
    }

    .featured-match-grid > .featured-team:first-child {
        grid-area: home;
    }

    .featured-match-grid > .text-center {
        grid-area: status;
        width: 100%;
    }

    .featured-match-grid > .featured-team:last-child {
        grid-area: away;
    }


    /* -----------------------------------------------------
       ODOHRANÄ‚Å¥ ZÄ‚PAS
       TĂŤMY HORE, SKĂ“RE POD NIMI
       ----------------------------------------------------- */

    .featured-match-grid.played {
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr) !important;

        grid-template-areas:
            "home away"
            "score score";

        width: 100%;
        max-width: none;

        margin: 0;

        column-gap: 8px;
        row-gap: 20px;
    }

    .featured-match-grid.played > .featured-team:first-child,
    .featured-match-grid.played > .featured-team:last-child {
        width: 100%;

        justify-self: stretch;
        align-items: center;

        padding: 0;

        text-align: center;
    }

    .featured-match-grid.played > .featured-result,
    .featured-match-grid.played > .text-center {
        grid-area: score;

        width: 100%;

        justify-self: stretch;

        text-align: center;
    }


    /* -----------------------------------------------------
       FEATURED TEAM MOBILE
       ----------------------------------------------------- */

    .featured-team {
        width: 100%;

        padding: 0 4px;

        box-sizing: border-box;

        align-items: center;
    }

    .featured-team-logo-wrap {
        width: 100%;
        height: 72px;

        margin-bottom: 8px;
    }

    .featured-team-logo {
        width: 68px;
        height: 68px;
    }

    .featured-team-name {
        width: 100%;

        font-size: .9rem;
        line-height: 1.2;

        text-align: center;
    }


    /* -----------------------------------------------------
       SCORE MOBILE
       ----------------------------------------------------- */

    .featured-score {
        font-size: 2.4rem;
    }

    .featured-score-label {
        display: block;

        margin-top: 6px;

        font-size: .65rem;
    }

    .featured-score-status {
        display: block;

        width: 100%;

        padding: .6rem 1rem;

        box-sizing: border-box;
    }

    .featured-match-venue {
        margin-top: 22px;
    }


    /* -----------------------------------------------------
       UPCOMING MOBILE
       ----------------------------------------------------- */

    .upcoming-match {
        grid-template-columns:
            68px
            minmax(0,1fr)
            36px
            minmax(0,1fr);

        gap: 6px;

        padding: 14px 9px;
    }

    .upcoming-date-day {
        font-size: .65rem;
    }

    .upcoming-date-time {
        font-size: .88rem;
    }

    .upcoming-team,
    .upcoming-team.away {
        display: flex;

        flex-direction: column;

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

        gap: 5px;

        font-size: .76rem;

        text-align: center;
    }

    .upcoming-team-logo {
        order: 1;

        width: 30px;
        height: 30px;

        margin: 0;
    }

    .upcoming-team-name {
        order: 2;

        width: 100%;

        line-height: 1.15;

        text-align: center;
    }

    .upcoming-extra {
        grid-column: 1 / -1;

        text-align: center;

        margin-top: 2px;
    }


    /* -----------------------------------------------------
       FIXTURES MOBILE
       ----------------------------------------------------- */

    .fixture-row {
        grid-template-columns:
            64px
            minmax(0,1fr)
            52px
            minmax(0,1fr);

        gap: 6px;

        padding: 13px 8px;
    }

    .fixture-round {
        display: none;
    }

    .fixture-date {
        font-size: .7rem;
    }

    .fixture-team,
    .fixture-team.away {
        display: flex;

        flex-direction: column;

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

        gap: 5px;

        font-size: .75rem;

        text-align: center;
    }

    .fixture-team .fixture-logo {
        order: 1;

        width: 28px;
        height: 28px;

        margin: 0;
    }

    .fixture-team span {
        order: 2;

        width: 100%;

        line-height: 1.15;

        text-align: center;
    }

    .fixture-score {
        font-size: .85rem;
    }
}