/* =========================================================
   FREE SURE BETS
   TARGET DESKTOP DESIGN
========================================================= */

:root {
    --green: #087a45;
    --green-dark: #004d2b;
    --green-deep: #003b22;
    --green-light: #e9f5ee;

    --yellow: #f7b817;
    --yellow-dark: #d99d00;
    --yellow-light: #fff4cf;

    --red: #e92d2d;
    --red-dark: #c91f1f;

    --gray-bg: #f4f4f4;
    --gray-card: #ffffff;
    --gray-border: #e3e6e4;

    --text-dark: #111815;
    --text-medium: #637069;
    --text-light: #8b9590;

    --shadow:
        0 2px 8px rgba(0, 45, 28, 0.09);

    --radius: 9px;
}


:root[data-theme="dark"] {
    --green-light: #173d2b;
    --yellow-light: #4e4014;
    --gray-bg: #111814;
    --gray-card: #1b2620;
    --gray-border: #34443a;
    --text-dark: #edf5ef;
    --text-medium: #b5c2b9;
    --text-light: #8e9c93;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
}


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

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: var(--gray-bg);

    color: var(--text-dark);

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


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

.site-header {
    background: var(--green-deep);

    color: white;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.18);

    height: 116px;

    position: relative;

    z-index: 10;
}


.header-inner {
    max-width: 1670px;

    height: 116px;

    margin: 0 auto;

    padding:
        0
        30px;

    display: flex;

    align-items: center;

    gap: 34px;
}


.logo-container {
    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    height: 120px;

    flex-shrink: 0;
}


.site-logo {
    height: 110px;

    width: auto;

    display: block;
}


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

.main-nav {
    display: flex;

    align-items: center;

    gap: 7px;

    flex: 1;

    height: 100%;
}


.nav-link {
    color: white;

    text-decoration: none;

    font-size: 15px;

    font-weight: 800;

    padding:
        13px
        17px;

    border-radius: 5px;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.nav-link:hover {
    background:
        rgba(255, 255, 255, 0.08);
}


.nav-link.active {
    color: var(--yellow);

    background: transparent;
}


.telegram-mobile-label {
    display: none;
}


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

.header-actions {
    display: flex;

    align-items: center;

    gap: 18px;

    flex-shrink: 0;
}


.theme-button,
.favorites-button {
    border: 0;

    cursor: pointer;

    font-weight: 800;
}


.theme-button {
    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: transparent;

    color: white;

    font-size: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

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


.theme-button:hover {
    background: rgba(255, 255, 255, 0.12);
}


.theme-button:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 3px;
}


.favorites-button {
    height: 40px;

    padding:
        0
        22px;

    border-radius: 6px;

    border: 1.5px solid var(--yellow);

    background: transparent;

    color: var(--yellow);

    font-size: 13px;

    letter-spacing: 0.2px;
}

.favorites-button.active {
    background: var(--yellow);
    color: #171200;
}


/* =========================================================
   PAGE
========================================================= */

.page-container {
    max-width: 1670px;

    margin: 0 auto;

    padding:
        18px
        28px
        30px;
}


/* =========================================================
   DAY TABS
========================================================= */

.day-tabs {
    width: 100%;

    display: grid;

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

    gap: 0;

    margin-bottom: 25px;

    background: white;

    border:
        1px solid
        #e1e4e2;

    border-radius: 10px;

    overflow: hidden;

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


.day-tab {
    position: relative;

    border: 0;

    border-right:
        1px solid
        #e4e6e5;

    background: white;

    min-height: 61px;

    padding:
        8px
        18px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    cursor: pointer;

    text-align: left;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.day-tab:last-child {
    border-right: 0;
}

.live-tab .day-icon {
    color: var(--red);
    font-size: 15px;
}

.live-tab.active .day-icon {
    color: var(--yellow);
}

/* Keep the selected Live tab visually identical to selected date tabs. */
.day-tab.live-tab.active {
    background: linear-gradient(135deg, #087a45, #006a3b);
    color: white;
    border-color: transparent;
}


.day-tab:hover {
    background: #f7faf8;
}


.day-tab.active {
    background:
        linear-gradient(
            135deg,
            #087a45,
            #006a3b
        );

    color: white;

    border-color: transparent;
}


.day-tab.active::after {
    content: "";

    position: absolute;

    bottom: 0;

    left: 50%;

    transform:
        translateX(-50%);

    width: 100%;

    height: 4px;

    background: var(--yellow);
}


.day-icon {
    font-size: 21px;

    line-height: 1;
}


.day-tab strong {
    display: block;

    font-size: 14px;

    font-weight: 800;

    line-height: 1.15;
}


.day-tab small {
    display: block;

    margin-top: 4px;

    font-size: 12px;

    opacity: 0.78;
}


.day-tab.active small {
    opacity: 0.95;
}


/* =========================================================
   CONTENT GRID
========================================================= */

.content-grid {
    display: grid;

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

    gap: 20px;

    align-items: start;
}


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

.section-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 15px;
}


.section-heading h1 {
    margin: 0;

    font-size: 27px;

    line-height: 1.1;

    font-weight: 800;
}


.section-heading p {
    margin:
        7px
        0
        0;

    color: var(--text-medium);

    font-size: 15px;
}


.filter-button {
    border: 0;

    background: var(--green-deep);

    color: white;

    padding:
        11px
        18px;

    border-radius: 6px;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;
}

.filter-control { position: relative; }

.filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    width: 245px;
    max-height: min(65vh, 430px);
    overflow-y: auto;
    border: 1px solid var(--gray-border);
    border-radius: 8px;
    background: var(--gray-card);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
}

.filter-control.open .filter-panel { display: block; }

.filter-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 13px;
    border: 0;
    border-bottom: 1px solid var(--gray-border);
    background: transparent;
    color: var(--text-dark);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.filter-option:last-child { border-bottom: 0; }
.filter-option:hover, .filter-option.active { background: var(--green-light); color: var(--green-dark); }


/* =========================================================
   MATCH CARD
========================================================= */

.match-card {
    position: relative;

    width: 100%;

    background: var(--gray-card);

    border:
        1px solid
        #e2e5e3;

    border-radius: 9px;

    margin-bottom: 10px;

    padding: 0;

    overflow: hidden;

    box-shadow: var(--shadow);

    /*
       IMPORTANT:

       The original HTML has:

       match-league-row
       match-main
       match-bottom

       We flatten match-main and match-bottom so that their
       children can participate in this grid.

       This lets the existing markup produce the compact
       target-style horizontal match card.
    */

    display: grid;

    grid-template-columns:
        minmax(155px, 1fr)
        130px
        minmax(155px, 1fr)
        142px;

    grid-template-rows:
        36px
        109.2px;

    align-items: center;
}


/* =========================================================
   FLATTEN EXISTING MATCH WRAPPERS
========================================================= */

.match-main,
.match-bottom {
    display: contents;
}


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

.match-league-row {
    grid-column: 1 / -1;

    grid-row: 1;

    align-self: center;

    padding:
        0
        18px;
}


.country-name {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #123e2c;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.1px;
}


.country-flag {
    width: 19px;

    height: 13px;

    object-fit: cover;

    border-radius: 2px;

    flex-shrink: 0;
}


.country-ball {
    font-size: 14px;
}


.league-separator {
    color: #87918c;

    margin:
        0
        1px;
}


.league-name {
    color: #293a32;

    font-weight: 600;
}


/* =========================================================
   TEAM COLUMNS
========================================================= */

.team-column {
    grid-row: 2;

    min-width: 0;

    height: 96px;

    display: grid;

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

    grid-template-rows: auto auto;

    align-content: center;

    text-align: center;

    gap: 5px;
}


.team-info {
    grid-row: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 0;
}


.team-form {
    grid-row: 2;

    width: 100%;

    display: flex;

    justify-content: center;
}


.home-column {
    grid-column: 1;

    padding:
        0
        6px
        0
        15px;
}


.away-column {
    grid-column: 3;

    padding:
        0
        15px
        0
        6px;
}


/* =========================================================
   TEAM LOGOS
========================================================= */

.team-logo {
    width: 48px;

    height: 48px;

    max-width: 48px;

    max-height: 48px;

    object-fit: contain;

    display: block;

    margin: 0;

    flex-shrink: 0;
}


.team-logo-placeholder {
    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0;

    font-size: 25px;

    flex-shrink: 0;
}


/* =========================================================
   TEAM NAME
========================================================= */

.team-name {
    text-decoration: none;
    max-width: 145px;

    color: #101713;

    font-size: 14px;

    font-weight: 800;

    text-align: left;

    text-transform: uppercase;

    line-height: 1.15;

    word-wrap: break-word;
}


/* =========================================================
   FORM
========================================================= */

.form-row {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 3px;

    margin-top: 0;
}


.form-badge {
    width: 18px;

    height: 18px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 9px;

    font-weight: 800;

    color: white;
}


.form-win {
    background: var(--green);
}


.form-loss {
    background: #ef3434;
}


.form-draw {
    background: #aeb4b0;
}


/* =========================================================
   MATCH CENTER
========================================================= */

.match-center {
    grid-column: 2;

    grid-row: 2;

    min-height: 96px;

    height: 96px;

    padding:
        0
        10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-left:
        1px solid
        #e2e6e3;

    border-right:
        1px solid
        #e2e6e3;
}


/* =========================================================
   MATCH TIME
========================================================= */

.match-time {
    font-size: 18px;

    font-weight: 800;

    color: #101713;

    line-height: 1;
}


.match-timezone {
    margin-top: 5px;

    font-size: 10px;

    color: #77817c;

    font-weight: 700;
}


.match-score {
    margin-top: 5px;
    color: var(--green-dark);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.match-score-live {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
}

.live-minute {
    color: var(--red-dark);
    font-size: 12px;
}


/* =========================================================
   VS
========================================================= */

.vs-text {
    margin:
        5px
        0;

    font-size: 15px;

    font-weight: 900;

    color: #0b3d28;
}


/* =========================================================
   STADIUM
========================================================= */

.stadium {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

    max-width: 135px;

    font-size: 9px;

    font-weight: 700;

    color: #26332d;

    line-height: 1.2;

    text-align: center;
}


.stadium-icon {
    font-size: 11px;

    flex-shrink: 0;
}


.match-location {
    margin-top: 2px;

    font-size: 9px;

    color: #7b847f;
}


.match-status-badge {
    position: center;

    top: 43px;

    right: 58px;

    margin: 0;

    font-size: 9px;

    font-weight: 800;

    color: #5d6661;

    background: #e9ecea;

    border-radius: 5px;

    padding:
        5px
        9px;
}


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

.comparison-section {
    grid-column: 4;

    grid-row: 2;

    width: 100%;

    min-width: 0;

    padding:
        0
        8px;
}


/* =========================================================
   COMPARISON ROW
========================================================= */

.comparison-row {
    width: 100%;

    display: grid;

    grid-template-columns:
        66px
        39px
        minmax(80px, 1fr)
        39px;

    align-items: center;

    gap: 5px;

    margin:
        5px
        0;
}


/* =========================================================
   COMPARISON LABEL
========================================================= */

.comparison-label {
    font-size: 10px;

    font-weight: 800;

    color: #25342c;

    letter-spacing: 0.2px;

    white-space: nowrap;
}


/* =========================================================
   COMPARISON VALUES
========================================================= */

.comparison-home-value,
.comparison-away-value {
    font-size: 10px;

    font-weight: 800;
}


.comparison-home-value {
    text-align: right;
}


.comparison-away-value {
    text-align: left;
}


@media (min-width: 851px) {
    .comparison-label,
    .comparison-home-value,
    .comparison-away-value {
        font-size: 15px;
    }
}


/* =========================================================
   DARK THEME
========================================================= */

:root[data-theme="dark"] .day-tabs,
:root[data-theme="dark"] .day-tab,
:root[data-theme="dark"] .sidebar-card,
:root[data-theme="dark"] .market-item,
:root[data-theme="dark"] .loading,
:root[data-theme="dark"] .error,
:root[data-theme="dark"] .no-matches {
    background: var(--gray-card);
    color: var(--text-dark);
}


:root[data-theme="dark"] .day-tabs,
:root[data-theme="dark"] .day-tab,
:root[data-theme="dark"] .match-card,
:root[data-theme="dark"] .sidebar-card,
:root[data-theme="dark"] .market-item,
:root[data-theme="dark"] .loading,
:root[data-theme="dark"] .error,
:root[data-theme="dark"] .no-matches,
:root[data-theme="dark"] .match-center {
    border-color: var(--gray-border);
}


:root[data-theme="dark"] .day-tab:hover {
    background: #26352c;
}


:root[data-theme="dark"] .day-tab.active {
    background: linear-gradient(135deg, #0a8650, #006a3b);
    color: white;
    border-color: transparent;
}


:root[data-theme="dark"] .day-tab.live-tab.active {
    background: linear-gradient(135deg, #0a8650, #006a3b);
    color: white;
    border-color: transparent;
}


:root[data-theme="dark"] .country-name,
:root[data-theme="dark"] .league-name,
:root[data-theme="dark"] .team-name,
:root[data-theme="dark"] .match-time,
:root[data-theme="dark"] .stadium,
:root[data-theme="dark"] .comparison-label,
:root[data-theme="dark"] .market-item {
    color: var(--text-dark);
}

:root[data-theme="dark"] .match-score,
:root[data-theme="dark"] .vs-text {
    color: #ffffff;
}


:root[data-theme="dark"] .league-separator,
:root[data-theme="dark"] .match-timezone,
:root[data-theme="dark"] .match-location,
:root[data-theme="dark"] .match-status-badge {
    color: var(--text-medium);
}


:root[data-theme="dark"] .match-status-badge {
    background: #2d3b33;
}


:root[data-theme="dark"] .comparison-bar {
    background: #3b4a41;
}


/* =========================================================
   COMPARISON BAR
========================================================= */

.comparison-bar {
    width: 100%;

    height: 8px;

    display: flex;

    overflow: hidden;

    border-radius: 20px;

    background: #e6e9e7;
}


.comparison-home-bar,
.comparison-away-bar {
    height: 100%;

    flex-shrink: 0;

    transition:
        width 0.25s ease,
        background 0.25s ease;
}


/* =========================================================
   DYNAMIC COMPARISON COLOURS
========================================================= */

.comparison-green {
    color: #087a45 !important;
}


.comparison-red {
    color: #c9111b !important;
}


.comparison-neutral {
    color: #777777 !important;
}


.comparison-home-bar.comparison-green,
.comparison-away-bar.comparison-green {
    background: #087a45;
}


.comparison-home-bar.comparison-red,
.comparison-away-bar.comparison-red {
    background: #c9111b;
}


.comparison-home-bar.comparison-neutral,
.comparison-away-bar.comparison-neutral {
    background: #777777;
}


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

.prediction-section {
    grid-column: 4;

    grid-row: 2;

    /* Keep the link above adjacent flattened grid content. */
    position: relative;

    z-index: 1;

    height: 96px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        0
        10px;
}


/* =========================================================
   PREDICTION BUTTON
========================================================= */

.prediction-button {
    width: 130px;

    min-height: 37px;

    border: none;

    background: var(--yellow);

    color: #111111;

    text-decoration: none;

    font-size: 10px;

    font-weight: 900;

    padding:
        0
        12px;

    border-radius: 6px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    white-space: nowrap;

    box-shadow:
        0 2px 5px
        rgba(170, 120, 0, 0.16);

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


.prediction-button span {
    font-size: 16px;

    line-height: 10px;
}


.prediction-button:hover {
    background: #ffca22;

    transform: translateY(-1px);
}


/* =========================================================
   FAVORITES
========================================================= */

.favorite-toggle {
    border: 1px solid #d6a300;
    background: white;
    color: #b18a00;
    cursor: pointer;
    font: inherit;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.favorite-toggle:hover,
.favorite-toggle:focus-visible,
.favorite-toggle.is-favorite {
    background: var(--yellow);
    color: #191300;
}

.favorite-toggle:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.favorite-toggle-desktop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    margin-bottom: 6px;
    border-radius: 5px;
}

.favorite-toggle-mobile { display: none; }

.prediction-section { flex-direction: column; }


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    display: flex;

    flex-direction: column;

    gap: 14px;
}


.sidebar-card {
    background: white;

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

    border-radius: 9px;

    overflow: hidden;

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


.sidebar-title {
    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        12px
        16px;

    background: var(--green-deep);

    color: white;

    font-size: 13px;

    font-weight: 800;
}


/* =========================================================
   MARKETS
========================================================= */

.market-list {
    padding: 0;
}


.market-item {
    width: 100%;

    min-height: 40px;

    border: 0;

    background: white;

    padding:
        10px
        16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    cursor: pointer;

    border-bottom:
        1px solid
        #eeeeee;

    font-size: 12px;

    text-align: left;

    color: #214235;

    font-weight: 600;

    text-decoration: none;
}


.market-item:hover,
.market-item.active {
    background: var(--green-light);
}


.market-arrow {
    color: var(--green);

    font-weight: 800;
}


.view-markets {
    width: 100%;

    border: 0;

    background: var(--yellow);

    padding:
        11px;

    font-weight: 900;

    font-size: 11px;

    cursor: pointer;
}


/* =========================================================
   ACCUMULATOR OF THE DAY
========================================================= */

.accumulator-selection {
    padding:
        11px
        16px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    border-bottom:
        1px solid
        #eeeeee;
}


.selection-info strong {
    display: block;

    font-size: 12px;

    line-height: 1.2;
}


.selection-info small {
    display: block;

    margin-top: 3px;

    color: var(--text-medium);

    font-size: 11px;
}


.confidence {
    font-size: 8px;

    font-weight: 800;

    padding:
        4px
        6px;

    border-radius: 4px;
}


.confidence.high {
    background: var(--green-light);

    color: var(--green-dark);
}


.confidence.medium {
    background: var(--yellow-light);

    color: #8a6a00;
}

.accumulator-see-prediction {
    flex-shrink: 0;
    padding: 6px 8px;
    border-radius: 4px;
    background: var(--green);
    color: white;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.accumulator-see-prediction:hover { background: var(--green-dark); }

.accumulator-empty {
    padding: 14px 16px;
    color: var(--text-medium);
    font-size: 12px;
}


.accumulator-summary {
    padding:
        11px
        16px;

    display: flex;

    justify-content: space-between;

    font-size: 11px;
}


.accumulator-summary strong {
    color: var(--green);
}


.accumulator-button {
    width: 100%;

    border: 0;

    background: var(--green);

    color: white;

    padding:
        11px;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;
}


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

.loading {
    padding: 50px;

    text-align: center;

    background: white;

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

    border-radius: var(--radius);

    color: var(--text-medium);

    font-weight: 600;
}


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

.error {
    padding: 30px;

    background: white;

    border-radius: 9px;

    border:
        1px solid
        #e4e7e5;

    color: var(--danger);
}


.error strong {
    display: block;

    margin-bottom: 8px;
}


.error p {
    margin:
        0
        0
        6px;
}


/* =========================================================
   NO MATCHES
========================================================= */

.no-matches {
    padding: 50px;

    text-align: center;

    background: white;

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

    border-radius: 9px;

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


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

.site-footer {
    max-width: 1670px;

    margin:
        20px auto
        0;

    padding:
        20px
        28px;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: var(--text-medium);

    font-size: 12px;
}


.footer-links {
    display: none;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1200px) {

    .content-grid {
        grid-template-columns:
            200px
            minmax(0, 1fr)
            300px;
    }


    .match-card {
        grid-template-columns:
            minmax(120px, 1fr)
            115px
            minmax(120px, 1fr)
            125px;
    }


    .team-name {
        font-size: 12px;

        max-width: 110px;
    }


    .team-logo {
        width: 42px;

        height: 42px;

        max-width: 42px;

        max-height: 42px;
    }


    .comparison-row {
        grid-template-columns:
            55px
            34px
            minmax(60px, 1fr)
            34px;
    }
}


/* =========================================================
   RESPONSIVE — SMALL DESKTOP / TABLET
========================================================= */

@media (max-width: 1000px) {

    .content-grid {
        grid-template-columns: 190px minmax(0, 1fr);
    }


    .sidebar {
        grid-column: 1 / -1;
        display: grid;

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


    .match-card {
        grid-template-columns:
            minmax(130px, 1fr)
            120px
            minmax(130px, 1fr)
            120px;
    }
}


/* =========================================================
   RESPONSIVE — MATCH CARD
========================================================= */

@media (max-width: 850px) {

    .match-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
        grid-template-rows: 36px 112px auto;
        padding: 0;
    }

    .match-main,
    .match-bottom { display: contents; }

    .match-league-row {
        grid-column: 1 / -1;
        grid-row: 1;
        padding: 0 12px;
    }

    .team-column {
        grid-row: 2;
        height: 112px;
        padding: 8px;
    }

    .home-column { grid-column: 1; }
    .away-column { grid-column: 3; }

    .team-info {
        /* Keep the desktop team-name/logo relationship on narrow screens. */
        flex-direction: row;
        gap: 6px;
    }

    .team-logo, .team-logo-placeholder {
        width: 38px;
        height: 38px;
    }

    .match-center {
        grid-column: 2;
        grid-row: 2;
        height: 92px;
        min-height: 92px;
        margin: 0;
        padding: 0 6px;
    }

    .prediction-section {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        height: auto;
        padding: 10px 12px 12px;
    }

    .favorite-toggle-desktop { display: none; }

    .favorite-toggle-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        border-radius: 50%;
        font-size: 19px;
        flex: 0 0 auto;
    }


    .match-status-badge {
        top: 12px;

        right: 14px;
    }
}


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

@media (max-width: 800px) {

    .content-grid {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .matches-section {
        width: 100%;
        min-width: 0;
    }

    .match-card {
        width: 100%;
        min-width: 0;
    }

    .site-header {
        height: auto;
    }


    .header-inner {
        height: auto;

        min-height: 0;

        display: grid;

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

        gap: 6px;

        padding: 4px 8px;
    }


    .logo-container {
        height: auto;
    }


    .site-logo {
        height: 62px;
    }


    .main-nav {
        order: initial;

        width: auto;

        overflow: visible;

        height: auto;

        flex-direction: column;

        align-items: flex-start;

        gap: 1px;
    }

    .theme-button {
        width: 26px;
        height: 22px;
        font-size: 14px;
    }


    .nav-home,
    .nav-about,
    .nav-contact {
        display: none;
    }


    .telegram-desktop-label {
        display: none;
    }


    .telegram-mobile-label {
        display: inline;
    }


    .nav-link {
        font-size: 13.5px;

        padding:
            4px
            5px;
    }


    .header-actions {
        margin-left: 0;

        display: grid;
        grid-template-columns: 26px minmax(0, 100px);
        grid-template-rows: 24px 24px;
        align-items: center;
        gap: 3px 4px;
        width: 130px;
    }


    .header-actions .theme-button {
        grid-column: 1;
        grid-row: 1;
    }


    .favorites-button {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        height: 24px;
        padding: 0 4px;
        font-size: 8px;

        border-radius: 4px;
    }


    .header-actions .country-menu {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        width: 100%;
    }


    .header-actions .country-menu-toggle {
        width: 100%;
        min-height: 24px;
        height: 24px;
        padding: 0 4px;
        font-size: 8px;
    }


    .prediction-button {
        width: 100%;
        min-height: 44px;
        font-size: 13px;
    }


    .prediction-button span {
        font-size: 18px;
    }


    .page-container {
        padding:
            12px;
    }


    .day-tabs {
        grid-template-columns:
            1fr
            1fr;

        border-radius: 8px;
    }


    .day-tab {
        min-height: 56px;

        border-bottom:
            1px solid
            #e4e6e5;
    }


    .day-tab:nth-child(1) { grid-column: 1; grid-row: 1; }
    .day-tab:nth-child(2) { grid-column: 2; grid-row: 1; }
    .day-tab:nth-child(3) { grid-column: 1; grid-row: 2; }
    .day-tab:nth-child(4) { grid-column: 2; grid-row: 2; }
    .day-tab:nth-child(5) { grid-column: 1 / -1; grid-row: 3; }
    .day-tab:nth-child(2), .day-tab:nth-child(4) { border-right: 0; }
    .day-tab:nth-child(5) { border-bottom: 0; }


    .sidebar {
        grid-template-columns: 1fr;
    }


    .section-heading {
        align-items: flex-start;
    }


    .section-heading h1 {
        font-size: 22px;
    }


    .section-heading p {
        font-size: 13px;
    }


    .site-footer {
        flex-wrap: wrap;
    }


    .footer-links {
        width: 100%;

        display: flex;

        gap: 18px;
    }


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

        font-weight: 800;

        text-decoration: none;
    }
}


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

@media (max-width: 480px) {

    .day-tabs {
        grid-template-columns: 1fr 1fr;
    }


    .day-tab {
        border-right: 0;
    }

    .day-tab:nth-child(odd) {
        border-right: 1px solid #e4e6e5;
    }

    .day-tab:nth-child(5) {
        grid-column: 1 / -1;
        border-right: 0;
    }


    .match-card {
        border-radius: 8px;
    }

    /* Preserve the match composition: home team | match details | away team. */
    .match-card {
        grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);
    }

    .team-column {
        padding-left: 3px;
        padding-right: 3px;
    }

    .team-info {
        gap: 4px;
    }

    .team-logo,
    .team-logo-placeholder {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }

    .team-name {
        max-width: calc(100% - 34px);
        font-size: 10px;
        line-height: 1.1;
    }

    .match-time {
        font-size: 15px;
    }

    .match-timezone {
        max-width: 82px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vs-text {
        margin: 3px 0;
        font-size: 12px;
    }


    .comparison-row {
        grid-template-columns:
            75px
            42px
            minmax(0, 4fr)
            42px
            minmax(0, 1fr);

        gap: 4px;
    }


    .comparison-row::after {
        content: "";
        grid-column: 5;
    }


    .comparison-bar {
        width: 100%;
        height: 6.4px;
        justify-self: stretch;
    }


    .comparison-label {
        font-size: 16.2px;
    }


    .comparison-home-value,
    .comparison-away-value {
        font-size: 16.2px;
    }


    .prediction-button {
        width: 100%;
    }
}


/* Keep desktop comparison text clear while shortening the bar track. */
@media (min-width: 851px) {
    .comparison-row {
        grid-template-columns:
            70px
            44px
            minmax(0, 4fr)
            44px
            minmax(0, 1fr);
    }


    .comparison-row::after {
        content: "";
        grid-column: 5;
    }
}