/* =========================================================
   PREMIER LEAGUE PREDICTIONS
   LIGHT PROFESSIONAL THEME
========================================================= */

:root {
    --page-bg: #f5f7fb;
    --surface: #ffffff;
    --surface-soft: #f8f9fc;

    --text: #172033;
    --text-soft: #5e687a;
    --text-muted: #7b8494;

    --border: #e2e7ef;
    --border-strong: #d4dae5;

    --primary: #5736c9;
    --primary-dark: #4325aa;
    --primary-soft: #eee9ff;

    --accent: #1769aa;
    --accent-soft: #eaf4ff;

    --success: #147a4b;
    --success-soft: #e9f8f1;

    --warning: #b76a00;
    --warning-soft: #fff4df;

    --danger: #b63c4a;
    --danger-soft: #fff0f2;

    --shadow-sm:
        0 4px 14px
        rgba(31, 42, 68, 0.06);

    --shadow-md:
        0 10px 32px
        rgba(31, 42, 68, 0.09);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;

    --content-width: 1180px;
}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background:
        linear-gradient(
            180deg,
            #fafbfe 0,
            var(--page-bg) 280px
        );

    color: var(--text);

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

    line-height: 1.6;
}

a {
    color: inherit;
}

button,
input {
    font: inherit;
}

img {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
    border: 0;
}


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

.breadcrumbs {
    width: min(
        calc(100% - 32px),
        var(--content-width)
    );

    margin:
        18px auto 0;

    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    align-items: center;

    color: var(--text-soft);

    font-size: 0.88rem;
}

.breadcrumbs a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 650;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs span[aria-current="page"] {
    color: var(--text);
}


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

#predictionHeader {
    width: min(
        calc(100% - 32px),
        var(--content-width)
    );

    margin:
        18px auto 0;

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

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

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f6f3ff 48%,
            #eef5ff 100%
        );

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

    overflow: hidden;
}


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

.header-actions {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding:
        18px 22px;

    border-bottom:
        1px solid rgba(87, 54, 201, 0.08);
}

.menu-btn {
    display: inline-flex;

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

    width: 42px;
    height: 42px;

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

    border-radius:
        11px;

    background:
        var(--surface);

    color:
        var(--text);

    cursor: pointer;

    font-size:
        1.2rem;

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

    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.menu-btn:hover {
    transform:
        translateY(-1px);

    border-color:
        #beb2ed;
}

.back-epl-btn {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        9px 14px;

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

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        var(--primary);

    font-size:
        0.88rem;

    font-weight:
        750;

    text-decoration:
        none;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.back-epl-btn:hover {
    background:
        var(--primary-soft);

    transform:
        translateY(-1px);
}


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

.prediction-hero {
    max-width:
        820px;

    padding:
        54px 38px 58px;
}

.prediction-badge {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    margin-bottom:
        16px;

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        var(--primary-soft);

    color:
        var(--primary-dark);

    font-size:
        0.78rem;

    font-weight:
        800;

    letter-spacing:
        0.05em;
}

.prediction-hero h1 {
    margin:
        0;

    max-width:
        760px;

    color:
        var(--text);

    font-size:
        clamp(
            2rem,
            5vw,
            3.5rem
        );

    line-height:
        1.08;

    letter-spacing:
        -0.035em;
}

.prediction-hero p {
    max-width:
        720px;

    margin:
        18px 0 0;

    color:
        var(--text-soft);

    font-size:
        clamp(
            1rem,
            2vw,
            1.12rem
        );
}


/* =========================================================
   SHARED SECTION WIDTH
========================================================= */

.prediction-intro,
#predictionStatusBar,
#predictionSearchSection,
#predictionFilters,
.prediction-accuracy-dashboard,
.prediction-section,
.prediction-seo-content,
.prediction-searches,
.prediction-faq {
    width:
        min(
            calc(100% - 32px),
            var(--content-width)
        );

    margin-left:
        auto;

    margin-right:
        auto;
}


/* =========================================================
   INTRO
========================================================= */

.prediction-intro {
    margin-top:
        34px;

    padding:
        28px 30px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-md);

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

.prediction-intro h2 {
    margin:
        0 0 12px;

    font-size:
        clamp(
            1.3rem,
            3vw,
            1.7rem
        );
}

.prediction-intro p {
    max-width:
        900px;

    margin:
        9px 0;

    color:
        var(--text-soft);
}


/* =========================================================
   STATUS BAR
========================================================= */

#predictionStatusBar {
    margin-top:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        15px 18px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-md);

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

#predictionStatusBar > div:first-child {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px 12px;
}

#predictionStatusBar strong {
    color:
        var(--text);
}

#predictionStatusBar span,
#predictionUpdated {
    color:
        var(--text-soft);

    font-size:
        0.88rem;
}

#predictionUpdated {
    padding:
        6px 10px;

    border-radius:
        999px;

    background:
        var(--surface-soft);

    font-weight:
        650;
}


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

#predictionSearchSection {
    margin-top:
        22px;
}

#predictionSearch {
    width:
        100%;

    height:
        52px;

    padding:
        0 17px;

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

    border-radius:
        14px;

    background:
        var(--surface);

    color:
        var(--text);

    outline:
        none;

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

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

#predictionSearch::placeholder {
    color:
        #949cab;
}

#predictionSearch:focus {
    border-color:
        #9d8be6;

    box-shadow:
        0 0 0 4px
        rgba(87, 54, 201, 0.10);
}


/* =========================================================
   FILTERS
========================================================= */

#predictionFilters {
    margin-top:
        15px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}

.prediction-filter {
    min-height:
        40px;

    padding:
        8px 14px;

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

    border-radius:
        999px;

    background:
        var(--surface);

    color:
        var(--text-soft);

    cursor:
        pointer;

    font-size:
        0.86rem;

    font-weight:
        700;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.prediction-filter:hover {
    border-color:
        #bdb2e8;

    color:
        var(--primary);
}

.prediction-filter.active {
    background:
        var(--primary);

    border-color:
        var(--primary);

    color:
        #ffffff;

    box-shadow:
        0 5px 16px
        rgba(87, 54, 201, 0.20);
}


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

.section-heading {
    margin-bottom:
        20px;
}

.section-kicker {
    display:
        inline-block;

    margin-bottom:
        5px;

    color:
        var(--primary);

    font-size:
        0.75rem;

    font-weight:
        850;

    letter-spacing:
        0.09em;
}

.section-heading h2 {
    margin:
        0;

    color:
        var(--text);

    font-size:
        clamp(
            1.35rem,
            3vw,
            1.9rem
        );

    line-height:
        1.2;
}

.section-heading p {
    max-width:
        820px;

    margin:
        8px 0 0;

    color:
        var(--text-soft);
}


/* =========================================================
   ACCURACY DASHBOARD
========================================================= */

.prediction-accuracy-dashboard {
    margin-top:
        32px;

    padding:
        28px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #faf8ff
        );

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

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

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

.prediction-stat-grid {
    display:
        grid;

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

    gap:
        14px;
}

.prediction-stat-card {
    min-width:
        0;

    padding:
        19px;

    background:
        #ffffff;

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

    border-radius:
        14px;

    box-shadow:
        0 3px 12px
        rgba(31, 42, 68, 0.04);
}

.prediction-stat-number {
    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--primary-dark);

    font-size:
        clamp(
            1.7rem,
            4vw,
            2.25rem
        );

    line-height:
        1;

    font-weight:
        850;
}

.prediction-stat-label {
    color:
        var(--text-soft);

    font-size:
        0.86rem;

    font-weight:
        650;
}

.prediction-tracker-note {
    margin:
        17px 0 0;

    padding:
        12px 14px;

    border-left:
        4px solid var(--primary);

    border-radius:
        8px;

    background:
        var(--primary-soft);

    color:
        var(--text-soft);

    font-size:
        0.87rem;
}


/* =========================================================
   PREDICTION SECTIONS
========================================================= */

.prediction-section {
    margin-top:
        38px;
}


/* =========================================================
   PREDICTION GRID
========================================================= */

/* =========================================================
   PREDICTION GRID
   4 → 3 → 2 → 1 RESPONSIVE LAYOUT
========================================================= */

.prediction-grid {
    display: grid;

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

    gap: 18px;

    width: 100%;

    align-items: stretch;
}


/* =========================================================
   PREDICTION CARD
========================================================= */

.prediction-card {
    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    max-width:
        none;

    min-width:
        0;

    padding:
        21px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-md);

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

    overflow:
        hidden;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.prediction-card:hover {
    transform:
        translateY(-3px);

    border-color:
        #c8bee9;

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


/* =========================================================
   CARD TOP
========================================================= */

.prediction-card-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-bottom:
        10px;
}

.prediction-matchweek {
    color:
        var(--text-muted);

    font-size:
        0.76rem;

    font-weight:
        750;

    letter-spacing:
        0.03em;
}


/* =========================================================
   CONFIDENCE BADGE
========================================================= */

.confidence-badge {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        28px;

    padding:
        4px 9px;

    border-radius:
        999px;

    font-size:
        0.72rem;

    font-weight:
        800;
}

.confidence-high {
    background:
        var(--success-soft);

    color:
        var(--success);
}

.confidence-medium {
    background:
        var(--warning-soft);

    color:
        var(--warning);
}

.confidence-low {
    background:
        var(--danger-soft);

    color:
        var(--danger);
}


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

.prediction-date {
    margin-bottom:
        10px;

    color:
        var(--text-muted);

    font-size:
        0.8rem;
}


/* =========================================================
   PREDICTION TITLE
========================================================= */

.prediction-title {
    margin:
        0 0 16px;

    font-size:
        1.16rem;

    line-height:
        1.35;
}

.prediction-title a {
    color:
        var(--text);

    text-decoration:
        none;
}

.prediction-title a:hover {
    color:
        var(--primary);
}


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

.prediction-teams {
    display:
        grid;

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

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        16px;

    padding:
        14px;

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

    border-radius:
        12px;

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

.prediction-team {
    min-width:
        0;

    text-align:
        center;
}

.prediction-team strong {
    display:
        block;

    overflow-wrap:
        anywhere;

    color:
        var(--text);

    font-size:
        0.9rem;
}

.prediction-vs {
    color:
        var(--text-muted);

    font-size:
        0.7rem;

    font-weight:
        850;
}


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

.prediction-main {
    padding:
        14px;

    border-radius:
        12px;

    background:
        var(--primary-soft);

    border:
        1px solid
        #ddd4ff;
}

.prediction-label {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--primary-dark);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}

.prediction-pick {
    color:
        var(--primary-dark);

    font-size:
        1.05rem;

    overflow-wrap:
        anywhere;
}


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

.predicted-score {
    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        8px 12px;

    margin-top:
        12px;

    padding:
        11px 12px;

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

    border-radius:
        10px;

    background:
        #ffffff;
}

.predicted-score span {
    color:
        var(--text-muted);

    font-size:
        0.76rem;

    font-weight:
        700;
}

.predicted-score strong {
    color:
        var(--text);

    font-size:
        0.88rem;

    text-align:
        right;
}


/* =========================================================
   ANALYSIS
========================================================= */

.prediction-analysis {
    margin-top:
        15px;

    padding-top:
        14px;

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

.prediction-analysis h4,
.prediction-factors h4 {
    margin:
        0 0 7px;

    font-size:
        0.86rem;
}

.prediction-analysis p {
    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        0.86rem;

    line-height:
        1.62;
}


/* =========================================================
   KEY FACTORS
========================================================= */

.prediction-factors {
    margin-top:
        15px;
}

.prediction-factors ul {
    margin:
        0;

    padding-left:
        19px;

    color:
        var(--text-soft);
}

.prediction-factors li {
    margin:
        5px 0;

    font-size:
        0.84rem;
}


/* =========================================================
   COMPLETED RESULT / GRADING
========================================================= */

.prediction-grade {
    margin-top:
        16px;

    padding:
        13px;

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

    border-radius:
        12px;

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

.prediction-final-score {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px 12px;

    margin-bottom:
        10px;
}

.prediction-final-score span {
    color:
        var(--text-muted);

    font-size:
        0.74rem;

    font-weight:
        800;

    text-transform:
        uppercase;
}

.prediction-final-score strong {
    color:
        var(--text);

    font-size:
        0.9rem;
}

.prediction-grade-badges {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}

.prediction-grade-badge {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        28px;

    padding:
        4px 9px;

    border-radius:
        999px;

    font-size:
        0.72rem;

    font-weight:
        800;
}

.prediction-grade-correct {
    background:
        var(--success-soft);

    color:
        var(--success);
}

.prediction-grade-exact {
    background:
        #e8f2ff;

    color:
        #1762a4;
}

.prediction-grade-wrong {
    background:
        var(--danger-soft);

    color:
        var(--danger);
}

.prediction-grade-missed {
    background:
        #f1f3f7;

    color:
        #6d7480;
}


/* =========================================================
   CARD ACTION
========================================================= */

.prediction-card-actions {
    margin-top:
        auto;

    padding-top:
        18px;
}

.prediction-match-link,
.prediction-action {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        42px;

    padding:
        9px 13px;

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

    border-radius:
        10px;

    background:
        var(--primary);

    color:
        #ffffff;

    font-size:
        0.84rem;

    font-weight:
        750;

    text-align:
        center;

    text-decoration:
        none;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.prediction-match-link:hover,
.prediction-action:hover {
    background:
        var(--primary-dark);

    transform:
        translateY(-1px);
}


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

.prediction-empty {
    grid-column:
        1 / -1;

    width:
        min(
            100%,
            650px
        );

    margin:
        0 auto;

    padding:
        32px 22px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-md);

    text-align:
        center;

    color:
        var(--text-soft);
}

.prediction-empty-icon {
    margin-bottom:
        8px;

    font-size:
        1.8rem;
}

.prediction-empty p {
    margin:
        0;
}


/* =========================================================
   TEAM LINKS
========================================================= */

.prediction-team-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(150px, 1fr)
        );

    gap:
        10px;
}

.prediction-team-link {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    padding:
        9px 12px;

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

    border-radius:
        10px;

    background:
        var(--surface);

    color:
        var(--text);

    text-decoration:
        none;

    font-size:
        0.85rem;

    font-weight:
        700;

    text-align:
        center;

    box-shadow:
        0 2px 8px
        rgba(31, 42, 68, 0.04);

    transition:
        border-color 0.18s ease,
        color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.prediction-team-link:hover {
    border-color:
        #c2b5f2;

    background:
        var(--primary-soft);

    color:
        var(--primary-dark);

    transform:
        translateY(-1px);
}


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

.prediction-seo-content {
    margin-top:
        42px;

    padding:
        30px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f7f9fd
        );

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

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

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

.prediction-seo-content h2 {
    margin:
        0 0 15px;

    color:
        var(--text);

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

.prediction-seo-content p {
    max-width:
        920px;

    margin:
        10px 0;

    color:
        var(--text-soft);

    font-size:
        0.94rem;

    line-height:
        1.75;
}


/* =========================================================
   POPULAR SEARCHES
========================================================= */

.prediction-searches {
    margin-top:
        24px;

    padding:
        26px 28px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-md);

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

.prediction-searches h2 {
    margin:
        0 0 16px;

    font-size:
        1.2rem;
}

.prediction-search-links {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}

.prediction-search-links span {
    display:
        inline-flex;

    align-items:
        center;

    padding:
        7px 11px;

    border:
        1px solid #e1dcf7;

    border-radius:
        999px;

    background:
        #f8f6ff;

    color:
        #514276;

    font-size:
        0.78rem;

    font-weight:
        650;
}


/* =========================================================
   FAQ
========================================================= */

.prediction-faq {
    margin-top:
        28px;

    margin-bottom:
        42px;

    padding:
        28px;

    background:
        var(--surface);

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

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

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

.prediction-faq > h2 {
    margin:
        0 0 16px;

    font-size:
        1.4rem;
}

.prediction-faq details {
    border-top:
        1px solid var(--border);
}

.prediction-faq details:first-of-type {
    border-top:
        0;
}

.prediction-faq summary {
    position:
        relative;

    padding:
        16px 34px 16px 0;

    color:
        var(--text);

    font-weight:
        750;

    cursor:
        pointer;

    list-style:
        none;
}

.prediction-faq summary::-webkit-details-marker {
    display:
        none;
}

.prediction-faq summary::after {
    content:
        "+";

    position:
        absolute;

    right:
        4px;

    color:
        var(--primary);

    font-size:
        1.25rem;

    font-weight:
        600;
}

.prediction-faq details[open] summary::after {
    content:
        "−";
}

.prediction-faq details p {
    margin:
        0;

    padding:
        0 0 18px;

    max-width:
        850px;

    color:
        var(--text-soft);
}


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

#predictionFooter {
    margin-top:
        42px;

    padding:
        30px 20px;

    background:
        #ffffff;

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

    color:
        var(--text-soft);

    text-align:
        center;

    font-size:
        0.85rem;
}

#predictionFooter p {
    margin:
        5px 0;
}

.footer-links {
    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        10px 18px;

    margin-top:
        14px;
}

.footer-links a {
    color:
        var(--primary);

    font-weight:
        700;

    text-decoration:
        none;
}

.footer-links a:hover {
    text-decoration:
        underline;
}

/* =========================================================
   LARGE DESKTOP
   4 PREDICTION CARDS PER ROW
========================================================= */

@media (min-width: 1200px) {

    .prediction-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

}


/* =========================================================
   DESKTOP / SMALL LAPTOP
   3 PREDICTION CARDS PER ROW
========================================================= */

@media (max-width: 1199px) {

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

        gap:
            18px;
    }

}


/* =========================================================
   TABLET
   2 PREDICTION CARDS PER ROW
========================================================= */

@media (max-width: 900px) {

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


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

        gap:
            16px;

        justify-content:
            stretch;
    }


    .prediction-card {
        width:
            100%;

        max-width:
            none;
    }

}


/* =========================================================
   MOBILE
   1 PREDICTION CARD PER ROW
========================================================= */

@media (max-width: 650px) {

    .breadcrumbs,
    #predictionHeader,
    .prediction-intro,
    #predictionStatusBar,
    #predictionSearchSection,
    #predictionFilters,
    .prediction-accuracy-dashboard,
    .prediction-section,
    .prediction-seo-content,
    .prediction-searches,
    .prediction-faq {

        width:
            min(
                calc(100% - 20px),
                var(--content-width)
            );

    }


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

    .header-actions {
        padding:
            14px;
    }


    .prediction-hero {
        padding:
            38px 22px 42px;
    }


    .prediction-hero h1 {

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

    }


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

    .prediction-intro,
    .prediction-accuracy-dashboard,
    .prediction-seo-content,
    .prediction-searches,
    .prediction-faq {

        padding:
            21px;

    }


    /* =====================================================
       STATUS
    ====================================================== */

    #predictionStatusBar {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    /* =====================================================
       FILTERS
    ====================================================== */

    #predictionFilters {

        display:
            grid;

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

        gap:
            8px;

    }


    .prediction-filter {

        width:
            100%;

    }


    /* =====================================================
       ACCURACY TRACKER
    ====================================================== */

    .prediction-stat-grid {

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

        gap:
            12px;

    }


    /* =====================================================
       PREDICTION CARDS
       SINGLE COLUMN
    ====================================================== */

    .prediction-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;

    }


    .prediction-card {

        width:
            100%;

        max-width:
            none;

        padding:
            18px;

    }


    /* =====================================================
       TEAM LINKS
    ====================================================== */

    .prediction-team-grid {

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

    }


    /* =====================================================
       SCORES
    ====================================================== */

    .prediction-final-score,
    .predicted-score {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .predicted-score strong {

        text-align:
            left;

    }

}


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

@media (max-width: 420px) {

    /* =====================================================
       FILTERS
    ====================================================== */

    #predictionFilters {

        grid-template-columns:
            1fr;

    }


    /* =====================================================
       ACCURACY TRACKER
    ====================================================== */

    .prediction-stat-grid {

        grid-template-columns:
            1fr;

    }


    /* =====================================================
       PREDICTION CARDS
    ====================================================== */

    .prediction-grid {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }


    .prediction-card {

        width:
            100%;

        max-width:
            none;

        padding:
            16px;

    }


    /* =====================================================
       TEAM LINKS
    ====================================================== */

    .prediction-team-grid {

        grid-template-columns:
            1fr;

    }


    /* =====================================================
       HEADER BUTTON
    ====================================================== */

    .back-epl-btn {

        padding:
            8px 11px;

        font-size:
            0.78rem;

    }


    /* =====================================================
       TEAMS INSIDE CARD
    ====================================================== */

    .prediction-teams {

        gap:
            6px;

        padding:
            11px 8px;

    }


    .prediction-team strong {

        font-size:
            0.82rem;

    }


    .prediction-vs {

        font-size:
            0.64rem;

    }


    /* =====================================================
       CARD TYPOGRAPHY
    ====================================================== */

    .prediction-title {

        font-size:
            1.05rem;

    }


    .prediction-analysis p {

        font-size:
            0.83rem;

    }


    .prediction-factors li {

        font-size:
            0.81rem;

    }

}