:root {
    --st-live: #ff4d4d;
    --st-live-soft: rgba(255, 77, 77, .13);
    --st-live-line: rgba(255, 77, 77, .42);
    --st-up: #35c97a;
    --st-down: #ff6363;
    --st-win: #16804c;
    --st-draw: #56677d;
    --st-loss: #c4262e;
    --st-muted: #9aa9bd;
    --st-chip-bg: rgba(255, 255, 255, .06);
    --st-chip-line: rgba(255, 255, 255, .12);
    --st-zone-up: #2fbf71;
    --st-zone-next: #4f8cff;
    --st-zone-down: #ff4d4d;
    --st-row-live: rgba(255, 77, 77, .07);
    --st-lift: #101b2e;
    --st-lift-shadow: 0 14px 34px rgba(0, 0, 0, .45);
    --st-gold: rgba(255, 207, 122, .35);
}

html[data-theme="light"],
html[data-visual-theme="light"] {
    --st-live: #c81e28;
    --st-live-soft: rgba(200, 30, 40, .08);
    --st-live-line: rgba(200, 30, 40, .32);
    --st-up: #0f7340;
    --st-down: #c4262e;
    --st-win: #15803d;
    --st-draw: #5b6b80;
    --st-loss: #c4262e;
    --st-muted: #5a6a80;
    --st-chip-bg: #f3f6fa;
    --st-chip-line: rgba(14, 28, 47, .12);
    --st-zone-up: #15803d;
    --st-zone-next: #1f5fd6;
    --st-zone-down: #c4262e;
    --st-row-live: rgba(200, 30, 40, .05);
    --st-lift: #ffffff;
    --st-lift-shadow: 0 14px 30px rgba(14, 28, 47, .16);
    --st-gold: rgba(154, 98, 0, .25);
}

.st-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--st-live-line);
    border-radius: 999px;
    background: var(--st-live-soft);
    color: var(--st-live);
    font: 800 12px/1 Cairo, "Segoe UI", Tahoma, sans-serif;
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
}

.st-badge[hidden] {
    display: none !important;
}

.st-badge i,
.st-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.st-badge i {
    animation: st-pulse 1.8s ease-out infinite;
}

.st-dot {
    width: 6px;
    height: 6px;
    animation: st-blink 1.4s ease-in-out infinite;
}

@keyframes st-pulse {
    0% {
        box-shadow: 0 0 0 0 var(--st-live-line);
    }

    70%,
    100% {
        box-shadow: 0 0 0 7px transparent;
    }
}

@keyframes st-blink {
    50% {
        opacity: .25;
    }
}

.st-move {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font: 800 11px/1 Cairo, "Segoe UI", Tahoma, sans-serif;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.st-move i {
    font-size: 8px;
    font-style: normal;
}

.st-move.is-up {
    color: var(--st-up);
}

.st-move.is-down {
    color: var(--st-down);
}

.st-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 3px 0 9px;
    border: 1px solid var(--st-chip-line);
    border-radius: 999px;
    background: var(--st-chip-bg);
    color: inherit;
    font: 800 12px/1 Cairo, "Segoe UI", Tahoma, sans-serif;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s ease, background-color .2s ease;
}

.st-chip strong {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--st-draw);
    color: #ffffff;
    font-weight: 800;
}

.st-chip strong i {
    font-style: normal;
    opacity: .75;
}

.st-chip.is-w strong {
    background: var(--st-win);
}

.st-chip.is-l strong {
    background: var(--st-loss);
}

html[data-theme="light"] .st-chip strong,
html[data-visual-theme="light"] .st-chip strong {
    color: #ffffff !important;
}

.st-chip small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--st-live);
    font-size: 11px;
    font-weight: 800;
}

.st-chip.is-break small,
.st-chip.is-ended small {
    color: var(--st-muted);
}

.st-chip.is-ended {
    border-style: dashed;
}

a.st-chip:hover,
a.st-chip:focus-visible {
    border-color: var(--st-live-line);
    background: var(--st-live-soft);
}

.st-chip:focus-visible {
    outline: 2px solid var(--st-live);
    outline-offset: 2px;
}

.league-section-head h2 .st-badge {
    margin-inline-start: 10px;
    transform: translateY(-5px);
}

.league-group-head h3 .st-badge {
    margin-inline-start: 10px;
    transform: translateY(-3px);
}

.league-table-card.has-groups > .league-table-head {
    display: none !important;
}

.league-rank {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.league-rank .st-move {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
}

.league-team > span {
    min-width: 0;
    flex: 0 1 auto;
}

.league-table-row[class*="is-zone-"] .rank-cell {
    position: relative !important;
}

.league-table-row[class*="is-zone-"] .rank-cell::after {
    content: "";
    position: absolute;
    inset-block: 7px;
    inset-inline-start: -7px;
    width: 3px;
    border-radius: 3px;
    background: var(--st-zone-up);
}

.league-table-row.is-zone-next .rank-cell::after {
    background: var(--st-zone-next);
}

.league-table-row.is-zone-down .rank-cell::after {
    background: var(--st-zone-down);
}

.league-table-row.is-playing {
    background: linear-gradient(to left, var(--st-row-live), transparent 70%) !important;
}

.league-table-row.is-top.is-playing {
    background: linear-gradient(to left, var(--st-row-live), rgba(255, 179, 71, .045) 70%) !important;
}

.league-group-table .league-table-row.is-moving {
    z-index: 3;
    border-radius: 14px;
    background: var(--st-lift) !important;
    box-shadow: var(--st-lift-shadow);
}

.league-table-row.is-bumped b {
    animation: st-points 1.6s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes st-points {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 transparent;
    }

    18% {
        transform: scale(1.16);
        box-shadow: 0 0 0 6px var(--st-gold);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 transparent;
    }
}

@media (max-width: 760px) {
    .league-group-table .league-table-head,
    .league-group-table .league-table-row {
        grid-template-columns: 38px minmax(0, 1fr) 28px 36px 44px !important;
        min-width: 0 !important;
        gap: 6px !important;
        padding-inline: 10px !important;
    }

    .league-group-table .league-table-head > :nth-child(n+4):nth-child(-n+8),
    .league-group-table .league-table-head > :nth-child(11),
    .league-group-table .league-table-row > :nth-child(n+4):nth-child(-n+8),
    .league-group-table .league-table-row > .league-form {
        display: none !important;
    }

    .league-group-table .league-table-head {
        padding-block: 12px !important;
    }

    .league-group-table .league-table-row {
        padding-block: 10px !important;
        font-size: 13px !important;
    }

    .league-group-table .league-table-row > :nth-child(3),
    .league-group-table .league-table-row > :nth-child(9),
    .league-group-table .league-table-head > :nth-child(n+3) {
        text-align: center;
    }

    .league-group-table .league-table-row b {
        width: 44px !important;
        min-height: 30px !important;
    }

    .league-group-table .rank-cell {
        width: 30px !important;
        height: 30px !important;
        border-radius: 10px !important;
    }

    .league-group-table .league-team {
        gap: 8px !important;
    }

    .league-group-table .league-team img {
        width: 24px !important;
        height: 24px !important;
    }

    .league-group-table .league-table-row.is-playing .league-team {
        display: grid !important;
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: center;
        column-gap: 8px !important;
        row-gap: 5px;
    }

    .league-group-table .league-table-row.is-playing .league-team img {
        grid-row: span 2;
    }

    .league-group-table .league-table-row.is-playing .st-chip {
        justify-self: start;
    }

    .league-group-table .league-table-row[class*="is-zone-"] .rank-cell::after {
        inset-inline-start: -5px;
    }
}

.game-card.is-standings .game-card-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.game-card.is-standings .st-badge {
    height: 22px;
    padding: 0 8px;
    font-size: 11px;
}

.game-standings-group {
    margin: 4px 0 6px;
    color: var(--fx-muted, var(--st-muted));
    font-size: 12px;
    font-weight: 700;
}

.game-table.is-compact {
    table-layout: fixed;
}

.game-table.is-compact th:first-child,
.game-table.is-compact td:first-child {
    width: 50px;
}

.game-table.is-compact th:nth-child(3),
.game-table.is-compact td:nth-child(3) {
    width: 38px;
}

.game-table.is-compact th:nth-child(4),
.game-table.is-compact td:nth-child(4) {
    width: 44px;
}

.game-table.is-compact th:nth-child(5),
.game-table.is-compact td:nth-child(5) {
    width: 46px;
}

.game-table.is-compact td {
    height: 42px;
}

.game-table.is-compact .game-table-team {
    gap: 8px;
}

.game-table.is-compact .st-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-table.is-compact .st-chip {
    height: 24px;
}

.game-table.is-compact .st-chip strong {
    height: 18px;
}

.st-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-variant-numeric: tabular-nums;
}

.game-table-gap td {
    height: 18px !important;
    padding: 0 !important;
    color: var(--fx-muted, var(--st-muted)) !important;
    font-size: 12px;
    letter-spacing: 3px;
    line-height: 1;
}

@media (max-width: 1019px) {
    .game-card.is-standings {
        order: 2;
    }
}

@media (max-width: 420px) {
    .game-table.is-compact .game-table-row.is-playing .game-table-team {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr);
        align-items: center;
        row-gap: 4px;
        padding-block: 6px;
    }

    .game-table.is-compact .game-table-row.is-playing .game-mini-crest {
        grid-row: span 2;
    }

    .game-table.is-compact .game-table-row.is-playing .st-chip {
        justify-self: start;
    }

    .game-table.is-compact .game-table-row.is-playing td {
        height: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .st-badge i,
    .st-dot,
    .league-table-row.is-bumped b {
        animation: none;
    }

    .league-table-row.is-bumped b {
        box-shadow: 0 0 0 3px var(--st-gold) !important;
    }

    .st-chip {
        transition: none;
    }
}