/* Mini Football v9: compact mobile layout, generated background and motion polish. */
.sport-bet-page {
    background:
        linear-gradient(rgba(242, 246, 250, .88), rgba(242, 246, 250, .94)),
        url('../img/sport-bet/mini-football-worldcup-bg-v2.png') center top / cover fixed;
    overflow-x: clip;
}

.sport-bet-shell {
    max-width: 1240px;
    overflow-x: clip;
}

.sport-bet-page .sport-bet-hero-v5 {
    background: #087fc2;
    animation: miniFootballHeroGlow 9s ease-in-out infinite alternate;
}

.sport-bet-page .sport-hero-player-v5 {
    animation: miniFootballHeroZoom 14s ease-in-out infinite alternate;
    will-change: transform;
}

.sport-bet-page .sport-bet-tabs,
.sport-bet-page .sport-win-ticker {
    max-width: 100%;
}

.sport-bet-page .sport-match {
    animation: miniFootballCardIn .45s ease both;
}

.sport-bet-page .sport-match:nth-child(2) { animation-delay: .06s; }
.sport-bet-page .sport-match:nth-child(3) { animation-delay: .12s; }
.sport-bet-page .sport-match:nth-child(4) { animation-delay: .18s; }

.sport-bet-page .sport-pick {
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.sport-bet-page .sport-pick:hover:not(:disabled) {
    box-shadow: 0 7px 16px rgba(0, 120, 220, .16);
}

.sport-bet-page .sport-schedule-days button.active {
    animation: miniFootballDayPulse 2.2s ease-in-out infinite;
}

@keyframes miniFootballHeroGlow {
    from { box-shadow: 0 24px 70px rgba(0, 70, 135, .28); }
    to { box-shadow: 0 28px 82px rgba(0, 174, 116, .28); }
}

@keyframes miniFootballHeroZoom {
    from { transform: scale(1); }
    to { transform: scale(1.035); }
}

@keyframes miniFootballCardIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes miniFootballDayPulse {
    50% { filter: brightness(1.06); box-shadow: 0 8px 22px rgba(255, 191, 31, .32); }
}

@media (max-width: 620px) {
    .sport-bet-page {
        min-width: 0;
        padding: 70px 8px 112px;
        background-attachment: scroll;
        background-position: center top;
    }

    .sport-bet-shell {
        width: 100%;
    }

    .sport-bet-page .sport-bet-hero-v5 {
        min-height: 388px;
        border-radius: 16px;
    }

    .sport-bet-page .sport-hero-player-v5 {
        height: 49%;
        object-position: center 34%;
    }

    .sport-bet-page .sport-bet-hero-v5:before {
        background: linear-gradient(0deg, rgba(0, 70, 145, .96) 0%, rgba(0, 104, 186, .78) 42%, rgba(0, 110, 195, .08) 82%);
    }

    .sport-bet-page .sport-bet-hero-v5 .sport-bet-hero-content {
        width: 100%;
        min-height: 388px;
        padding: 153px 15px 70px;
    }

    .sport-bet-page .sport-bet-hero-v5 h1 {
        margin: 7px 0 8px;
        font-size: clamp(31px, 9vw, 39px);
        letter-spacing: -1px;
    }

    .sport-bet-page .sport-bet-hero-v5 p {
        max-width: 100%;
        margin-bottom: 11px;
        font-size: 10px;
        line-height: 1.4;
    }

    .sport-bet-page .sport-bet-hero-tags {
        gap: 5px;
        margin-top: 4px;
    }

    .sport-bet-page .sport-bet-hero-tags span,
    .sport-bet-page .sport-bet-hero-tags button {
        padding: 7px 8px;
        font-size: 9px;
    }

    .sport-bet-page .sport-bet-balance {
        top: 11px;
        right: 11px;
        padding: 8px 10px;
        font-size: 10px;
    }

    .sport-bet-page .sport-hero-statline {
        left: 12px;
        right: 12px;
        bottom: 11px;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .sport-bet-page .sport-hero-statline::-webkit-scrollbar,
    .sport-bet-page .sport-bet-tabs::-webkit-scrollbar,
    .sport-bet-page .sport-schedule-days::-webkit-scrollbar {
        display: none;
    }

    .sport-bet-page .sport-hero-statline span {
        flex: 0 0 auto;
        padding: 7px 9px;
        font-size: 8px;
    }

    .sport-bet-page .sport-win-ticker {
        margin: 8px 0 10px;
        border-radius: 9px;
    }

    .sport-bet-page .sport-win-ticker > strong {
        padding: 9px 8px;
        font-size: 8px;
    }

    .sport-bet-page .sport-win-track > div {
        gap: 26px;
        padding-left: 18px;
        animation-duration: 38s;
    }

    .sport-bet-page .sport-win-track span {
        padding: 9px 0;
        font-size: 9px;
    }

    .sport-bet-page .sport-bet-tabs {
        gap: 4px;
        margin: 9px 0 11px;
        padding: 5px;
        border-radius: 11px;
        scrollbar-width: none;
    }

    .sport-bet-page .sport-bet-tab {
        padding: 9px 11px;
        font-size: 10px;
    }

    .sport-bet-page .sport-schedule-card {
        margin-bottom: 12px;
        border-radius: 13px;
    }

    .sport-bet-page .sport-section-head {
        align-items: center;
        padding: 12px 13px;
        gap: 8px;
    }

    .sport-bet-page .sport-section-head > div > span {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .sport-bet-page .sport-section-head h2 {
        margin-top: 3px;
        font-size: 15px;
    }

    .sport-bet-page .sport-section-head small {
        max-width: 112px;
        font-size: 8px;
        line-height: 1.25;
    }

    .sport-bet-page .sport-schedule-filter-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 9px;
    }

    .sport-bet-page .sport-schedule-toolbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 6px 8px;
        padding: 9px;
    }

    .sport-bet-page .sport-schedule-toolbar label {
        align-self: center;
        margin: 0;
        font-size: 10px;
    }

    .sport-bet-page .sport-schedule-toolbar select {
        height: 35px;
        font-size: 11px;
    }

    .sport-bet-page .sport-schedule-toolbar > span {
        grid-column: 1 / -1;
        margin: 0;
        font-size: 8px;
        text-align: left;
    }

    .sport-bet-page .sport-schedule-days {
        gap: 5px;
        padding: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .sport-bet-page .sport-schedule-days button {
        flex: 0 0 67px;
        min-height: 56px;
        padding: 7px 5px;
        border-radius: 7px;
    }

    .sport-bet-page .sport-schedule-days b { font-size: 10px; }
    .sport-bet-page .sport-schedule-days span { margin-top: 2px; font-size: 8px; }

    .sport-bet-page .sport-schedule-table-wrap {
        margin: 0 9px 10px;
        border-radius: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .sport-bet-page .sport-schedule-table {
        min-width: 590px;
    }

    .sport-bet-page .sport-schedule-table th,
    .sport-bet-page .sport-schedule-table td {
        padding: 8px 7px;
        font-size: 9px;
    }

    .sport-bet-page .sport-schedule-table td img {
        width: 21px;
        height: 21px;
    }

    .sport-bet-page .sport-match {
        border-radius: 13px;
    }

    .sport-bet-page .sport-match-head {
        padding: 9px 11px;
        font-size: 9px;
    }

    .sport-bet-page .sport-match-league img {
        width: 17px;
        height: 17px;
    }

    .sport-bet-page .sport-teams {
        gap: 5px;
        padding: 15px 9px 11px;
    }

    .sport-bet-page .sport-team {
        gap: 6px;
    }

    .sport-bet-page .sport-team-crest {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 13px;
    }

    .sport-bet-page .sport-team-crest img,
    .sport-bet-page .sport-team-crest .sport-team-fallback {
        width: 36px;
        height: 36px;
    }

    .sport-bet-page .sport-team-name {
        max-width: 95px;
        font-size: 11px;
    }

    .sport-bet-page .sport-score {
        min-width: 53px;
    }

    .sport-bet-page .sport-score strong {
        font-size: 18px;
    }

    .sport-bet-page .sport-score span {
        margin-top: 4px;
        font-size: 8px;
    }

    .sport-bet-page .sport-markets {
        padding: 0 9px 10px;
    }

    .sport-bet-page .sport-market {
        margin-top: 7px;
        padding: 9px;
        border-radius: 10px;
    }

    .sport-bet-page .sport-market-title {
        margin-bottom: 7px;
        font-size: 9px;
    }

    .sport-bet-page .sport-selections {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .sport-bet-page .sport-pick {
        min-height: 40px;
        padding: 7px 6px;
        border-radius: 8px;
        font-size: 9px;
    }

    .sport-bet-page .sport-pick b {
        font-size: 9px;
    }

    .sport-bet-page .sport-open-campaign-head {
        padding: 13px 12px;
        border-radius: 11px;
    }

    .sport-bet-page .sport-open-campaign-head h2 {
        font-size: 14px;
    }

    .sport-bet-page .sport-open-campaign-head small {
        font-size: 9px;
    }

    /* Keep the existing support chat available without covering odds/cards. */
    body:has(.sport-bet-page) .support-widget {
        right: 10px;
        bottom: 88px;
    }

    body:has(.sport-bet-page) .support-widget__toggle {
        width: 48px;
        min-width: 48px;
        height: 48px;
        padding: 0;
    }

    body:has(.sport-bet-page) .support-widget__toggle-text {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sport-bet-page .sport-bet-hero-v5,
    .sport-bet-page .sport-hero-player-v5,
    .sport-bet-page .sport-match,
    .sport-bet-page .sport-schedule-days button.active,
    .sport-bet-page .sport-win-track > div {
        animation: none;
    }
}