.ms-match-page {
    min-height: 100vh;
    padding: 40px 20px 80px;
    background: #07080c;
    color: #fff;
}

.ms-match-page__shell {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.ms-match-page__breadcrumb {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 12px;
    color: rgba(255,255,255,.45);
}

.ms-match-page__breadcrumb a {
    color: rgba(255,255,255,.75);
    text-decoration: none;
}

.ms-match-page__hero,
.ms-match-page__section {
    border: 1px solid rgba(255,255,255,.09);
    background: #11131a;
}

.ms-match-page__hero {
    padding: 28px;
    border-radius: 22px;
}

.ms-match-page__hero-top {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    font-size: 12px;
    color: rgba(255,255,255,.48);
}

.ms-match-page__badge {
    color: #ff747d;
    font-weight: 900;
}

.ms-match-page__score {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 25px;
    margin-top: 40px;
}

.ms-match-page__score h1,
.ms-match-page__score h2 {
    margin: 6px 0 0;
    font-size: clamp(20px, 4vw, 38px);
}

.ms-match-page__away {
    text-align: right;
}

.ms-match-page__result {
    text-align: center;
}

.ms-match-page__result strong {
    display: block;
    font-size: clamp(42px, 7vw, 68px);
}

.ms-match-page__result span {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 9px;
    border-radius: 8px;
    background: rgba(255,30,50,.14);
    color: #ff747d;
}

.ms-match-page__story {
    margin-top: 35px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.ms-match-page__story span {
    color: #ff4a55;
    font-size: 11px;
    font-weight: 900;
}

.ms-match-page__story h2 {
    margin: 8px 0;
    font-size: clamp(24px, 4vw, 36px);
}

.ms-match-page__story p {
    color: rgba(255,255,255,.68);
    line-height: 1.7;
}

.ms-match-page__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.ms-match-page__section {
    padding: 22px;
    border-radius: 17px;
}

.ms-match-page__section h2 {
    margin-top: 0;
    font-size: 18px;
}

.ms-match-page__metrics {
    display: grid;
    gap: 12px;
}

.ms-match-page__metric {
    padding: 13px;
    border-radius: 11px;
    background: rgba(255,255,255,.035);
}

.ms-match-page__metric strong {
    float: right;
}

.ms-match-page__metric-track {
    height: 5px;
    margin-top: 11px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255,255,255,.08);
}

.ms-match-page__metric-track i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ffad00, #ff283c);
}

.ms-match-page__reasons {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ms-match-page__reasons li,
.ms-match-page__event {
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.035);
}

.ms-match-page__event {
    display: flex;
    gap: 14px;
    align-items: center;
}

.ms-match-page__event h3,
.ms-match-page__event p {
    margin: 0;
}

.ms-match-page__event p {
    margin-top: 4px;
    color: rgba(255,255,255,.48);
}

.ms-match-page__section dl {
    margin: 0;
}

.ms-match-page__section dl div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.ms-match-page__section dd {
    margin: 0;
}

.ms-match-page__muted,
.ms-match-page__loading,
.ms-match-page__error p {
    color: rgba(255,255,255,.48);
}

.ms-match-page__loading,
.ms-match-page__error {
    padding: 120px 20px;
    text-align: center;
}

.ms-match-page__error a {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 18px;
    border-radius: 10px;
    background: #e7192c;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 700px) {
    .ms-match-page {
        padding: 24px 10px 60px;
    }

    .ms-match-page__hero {
        padding: 18px 15px;
    }

    .ms-match-page__score {
        gap: 10px;
    }

    .ms-match-page__score h1,
    .ms-match-page__score h2 {
        font-size: 17px;
    }

    .ms-match-page__result strong {
        font-size: 38px;
    }

    .ms-match-page__grid {
        grid-template-columns: 1fr;
    }
}

/* Match Intelligence v2 */

.ms-intelligence {
    --intelligence-accent: #48a8ff;
    --intelligence-accent-soft: rgba(72, 168, 255, .16);

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 1px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 22px;
    background: rgba(255,255,255,.08);
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.ms-intelligence--interesting {
    --intelligence-accent: #ffc247;
    --intelligence-accent-soft: rgba(255, 194, 71, .16);
}

.ms-intelligence--hot {
    --intelligence-accent: #ff8a32;
    --intelligence-accent-soft: rgba(255, 138, 50, .17);
}

.ms-intelligence--must-watch {
    --intelligence-accent: #ff3449;
    --intelligence-accent-soft: rgba(255, 52, 73, .18);
}

.ms-intelligence__glow {
    position: absolute;
    top: -180px;
    left: -100px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: var(--intelligence-accent-soft);
    filter: blur(55px);
    pointer-events: none;
}

.ms-intelligence__main,
.ms-intelligence__explanation {
    position: relative;
    z-index: 1;
    padding: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        ),
        #11131a;
}

.ms-intelligence__heading {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
}

.ms-intelligence__eyebrow {
    color: var(--intelligence-accent);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}

.ms-intelligence__live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.45);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
}

.ms-intelligence__live::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--intelligence-accent);
    box-shadow:
        0 0 0 5px var(--intelligence-accent-soft);
    content: "";
    animation: ms-intelligence-pulse 1.8s infinite;
}

.ms-intelligence__rating {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 28px;
}

.ms-intelligence__ring {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    width: 158px;
    height: 158px;
    place-items: center;
    border-radius: 50%;
    background:
        conic-gradient(
            var(--intelligence-accent) var(--progress),
            rgba(255,255,255,.075) 0
        );
    box-shadow:
        0 0 36px var(--intelligence-accent-soft),
        inset 0 0 20px rgba(0,0,0,.24);
}

.ms-intelligence__ring::before {
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: inherit;
    background: #0d0f15;
    content: "";
}

.ms-intelligence__ring-inner {
    position: relative;
    z-index: 1;
    display: grid;
    text-align: center;
}

.ms-intelligence__ring-inner strong {
    font-size: 48px;
    line-height: 1;
    letter-spacing: -.05em;
}

.ms-intelligence__ring-inner span {
    margin-top: 5px;
    color: rgba(255,255,255,.4);
    font-size: 11px;
    font-weight: 700;
}

.ms-intelligence__verdict {
    min-width: 0;
}

.ms-intelligence__icon {
    display: block;
    margin-bottom: 8px;
    font-size: 30px;
}

.ms-intelligence__verdict strong {
    display: block;
    color: var(--intelligence-accent);
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1;
    letter-spacing: -.035em;
}

.ms-intelligence__verdict p {
    max-width: 260px;
    margin: 12px 0 0;
    color: rgba(255,255,255,.5);
    font-size: 13px;
    line-height: 1.6;
}

.ms-intelligence__explanation {
    border-left: 1px solid rgba(255,255,255,.08);
}

.ms-intelligence__explanation h2 {
    margin: 12px 0 10px;
    font-size: clamp(20px, 3vw, 28px);
    line-height: 1.18;
}

.ms-intelligence__explanation > p,
.ms-intelligence__empty {
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: 14px;
    line-height: 1.65;
}

.ms-intelligence__reason-list {
    display: grid;
    gap: 8px;
    margin: 18px 0;
    padding: 0;
    list-style: none;
}

.ms-intelligence__reason-list li {
    display: flex;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.78);
    font-size: 13px;
    line-height: 1.45;
}

.ms-intelligence__reason-list li span {
    color: var(--intelligence-accent);
}

.ms-intelligence__explanation small {
    display: block;
    margin-top: 18px;
    color: rgba(255,255,255,.28);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ms-match-page__metric-track i {
    transform-origin: left;
    animation: ms-intelligence-bar .9s ease both;
}

@keyframes ms-intelligence-pulse {
    0%,
    100% {
        opacity: .55;
        transform: scale(.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

@keyframes ms-intelligence-bar {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@media (max-width: 800px) {
    .ms-intelligence {
        grid-template-columns: 1fr;
    }

    .ms-intelligence__explanation {
        border-top: 1px solid rgba(255,255,255,.08);
        border-left: 0;
    }
}

@media (max-width: 520px) {
    .ms-intelligence__main,
    .ms-intelligence__explanation {
        padding: 20px 16px;
    }

    .ms-intelligence__heading {
        align-items: flex-start;
    }

    .ms-intelligence__rating {
        gap: 18px;
    }

    .ms-intelligence__ring {
        width: 118px;
        height: 118px;
    }

    .ms-intelligence__ring-inner strong {
        font-size: 36px;
    }

    .ms-intelligence__verdict strong {
        font-size: 22px;
    }

    .ms-intelligence__verdict p {
        font-size: 12px;
    }
}

/* MatchShock AI Timeline v1 */

.ms-match-page__section--timeline {
    min-height: 320px;
}

.ms-match-page__section-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.ms-match-page__section-heading span {
    color: #ff4a55;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}

.ms-match-page__section-heading h2 {
    margin: 5px 0 0;
}

.ms-match-page__section-heading > strong {
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.42);
    font-size: 9px;
    letter-spacing: .08em;
}

.ms-timeline {
    display: grid;
}

.ms-timeline__item {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
}

.ms-timeline__rail {
    position: relative;
    display: grid;
    grid-template-columns: 32px 28px;
    align-items: flex-start;
    min-height: 92px;
}

.ms-timeline__minute {
    padding-top: 9px;
    color: rgba(255,255,255,.6);
    font-size: 11px;
    font-weight: 800;
    text-align: right;
}

.ms-timeline__dot {
    position: relative;
    z-index: 2;
    display: grid;
    width: 28px;
    height: 28px;
    margin-left: 9px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    background: #191c24;
    font-size: 13px;
}

.ms-timeline__rail i {
    position: absolute;
    z-index: 1;
    top: 28px;
    bottom: -1px;
    left: 54px;
    width: 1px;
    background:
        linear-gradient(
            rgba(255,255,255,.14),
            rgba(255,255,255,.035)
        );
}

.ms-timeline__body {
    min-width: 0;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 11px;
    background: rgba(255,255,255,.027);
}

.ms-timeline__item--high .ms-timeline__body {
    border-color: rgba(255,52,73,.18);
    background:
        linear-gradient(
            90deg,
            rgba(255,52,73,.075),
            rgba(255,255,255,.025)
        );
}

.ms-timeline__item--high .ms-timeline__dot {
    border-color: rgba(255,52,73,.35);
    box-shadow: 0 0 18px rgba(255,52,73,.15);
}

.ms-timeline__item--medium .ms-timeline__dot {
    border-color: rgba(255,173,0,.3);
}

.ms-timeline__top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.ms-timeline__top h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
}

.ms-timeline__impact {
    flex: 0 0 auto;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.46);
    font-size: 9px;
    font-weight: 800;
}

.ms-timeline__item--high .ms-timeline__impact {
    background: rgba(255,52,73,.11);
    color: #ff6473;
}

.ms-timeline__body > strong {
    display: block;
    margin-top: 7px;
    font-size: 12px;
}

.ms-timeline__team {
    display: block;
    margin-top: 2px;
    color: rgba(255,255,255,.48);
    font-size: 11px;
}

.ms-timeline__body p {
    margin: 8px 0 0;
    color: rgba(255,255,255,.5);
    font-size: 11px;
    line-height: 1.55;
}

@media (max-width: 520px) {
    .ms-timeline__item {
        grid-template-columns: 55px minmax(0, 1fr);
    }

    .ms-timeline__rail {
        grid-template-columns: 27px 24px;
    }

    .ms-timeline__dot {
        width: 24px;
        height: 24px;
        margin-left: 7px;
        font-size: 11px;
    }

    .ms-timeline__rail i {
        top: 24px;
        left: 46px;
    }

    .ms-timeline__minute {
        font-size: 10px;
    }

    .ms-timeline__top {
        display: block;
    }

    .ms-timeline__impact {
        display: inline-block;
        margin-top: 7px;
    }
}

/* =========================================================
   MatchMaker v1
   ========================================================= */

.ms-matchmaker {
    --matchmaker-accent: #48a8ff;
    --matchmaker-accent-rgb: 72, 168, 255;
    --matchmaker-accent-soft: rgba(72, 168, 255, .16);

    position: relative;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        ),
        #0f1118;
    box-shadow:
        0 28px 80px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.035);
    isolation: isolate;
}

.ms-matchmaker--normal {
    --matchmaker-accent: #48a8ff;
    --matchmaker-accent-rgb: 72, 168, 255;
    --matchmaker-accent-soft: rgba(72, 168, 255, .16);
}

.ms-matchmaker--interesting {
    --matchmaker-accent: #ffc247;
    --matchmaker-accent-rgb: 255, 194, 71;
    --matchmaker-accent-soft: rgba(255, 194, 71, .16);
}

.ms-matchmaker--hot {
    --matchmaker-accent: #ff8a32;
    --matchmaker-accent-rgb: 255, 138, 50;
    --matchmaker-accent-soft: rgba(255, 138, 50, .18);
}

.ms-matchmaker--must-watch {
    --matchmaker-accent: #ff3449;
    --matchmaker-accent-rgb: 255, 52, 73;
    --matchmaker-accent-soft: rgba(255, 52, 73, .2);
}

.ms-matchmaker::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(var(--matchmaker-accent-rgb), .055),
            transparent 38%,
            transparent 68%,
            rgba(var(--matchmaker-accent-rgb), .025)
        );
    content: "";
    pointer-events: none;
}

.ms-matchmaker__glow {
    position: absolute;
    z-index: -1;
    top: -220px;
    left: -130px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: var(--matchmaker-accent-soft);
    filter: blur(75px);
    opacity: .9;
    pointer-events: none;
}

.ms-matchmaker__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding: 26px 28px 20px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.ms-matchmaker__eyebrow {
    display: block;
    color: var(--matchmaker-accent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ms-matchmaker__header h2 {
    margin: 7px 0 0;
    font-size: clamp(23px, 3vw, 34px);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.ms-matchmaker__live {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid rgba(var(--matchmaker-accent-rgb), .22);
    border-radius: 999px;
    background: rgba(var(--matchmaker-accent-rgb), .08);
    color: var(--matchmaker-accent);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}

.ms-matchmaker__live::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow:
        0 0 0 5px rgba(var(--matchmaker-accent-rgb), .1),
        0 0 15px rgba(var(--matchmaker-accent-rgb), .55);
    content: "";
    animation: ms-matchmaker-live-pulse 1.7s infinite;
}

.ms-matchmaker__overview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(220px, .72fr);
    gap: 30px;
    align-items: center;
    padding: 30px 28px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.ms-matchmaker__rating {
    position: relative;
    display: grid;
    width: 164px;
    height: 164px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background:
        conic-gradient(
            var(--matchmaker-accent) var(--progress),
            rgba(255,255,255,.065) 0
        );
    box-shadow:
        0 0 42px var(--matchmaker-accent-soft),
        inset 0 0 22px rgba(0,0,0,.34);
}

.ms-matchmaker__rating::before {
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: inherit;
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(var(--matchmaker-accent-rgb), .08),
            transparent 48%
        ),
        #0b0d13;
    content: "";
}

.ms-matchmaker__rating > div {
    position: relative;
    z-index: 1;
    display: grid;
    text-align: center;
}

.ms-matchmaker__rating strong {
    font-size: 52px;
    line-height: .95;
    letter-spacing: -.065em;
}

.ms-matchmaker__rating span {
    margin-top: 7px;
    color: rgba(255,255,255,.38);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.ms-matchmaker__verdict {
    min-width: 0;
}

.ms-matchmaker__verdict > span {
    display: block;
    margin-bottom: 9px;
    color: rgba(255,255,255,.44);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
}

.ms-matchmaker__verdict > strong {
    display: block;
    color: var(--matchmaker-accent);
    font-size: clamp(27px, 4vw, 44px);
    line-height: 1;
    letter-spacing: -.045em;
    text-transform: uppercase;
    text-wrap: balance;
}

.ms-matchmaker__verdict p {
    max-width: 410px;
    margin: 13px 0 0;
    color: rgba(255,255,255,.5);
    font-size: 13px;
    line-height: 1.65;
}

.ms-matchmaker__state {
    position: relative;
    min-width: 0;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(var(--matchmaker-accent-rgb), .16);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            rgba(var(--matchmaker-accent-rgb), .105),
            rgba(255,255,255,.025)
        );
}

.ms-matchmaker__state::after {
    position: absolute;
    top: -55px;
    right: -55px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: var(--matchmaker-accent-soft);
    filter: blur(30px);
    content: "";
    pointer-events: none;
}

.ms-matchmaker__state > span,
.ms-matchmaker__section-title > span {
    position: relative;
    z-index: 1;
    display: block;
    color: rgba(255,255,255,.4);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.ms-matchmaker__state > strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 11px;
    color: #fff;
    font-size: clamp(17px, 2.5vw, 23px);
    line-height: 1.2;
    letter-spacing: -.025em;
}

.ms-matchmaker__state > small {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 9px;
    color: rgba(255,255,255,.42);
    font-size: 10px;
}

.ms-matchmaker__pressure {
    padding: 24px 28px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.ms-matchmaker__section-title {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}

.ms-matchmaker__section-title > strong {
    color: var(--matchmaker-accent);
    font-size: 11px;
    font-weight: 800;
}

.ms-matchmaker__pressure-row + .ms-matchmaker__pressure-row {
    margin-top: 16px;
}

.ms-matchmaker__pressure-top,
.ms-matchmaker__metric-top {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
}

.ms-matchmaker__pressure-top > span {
    min-width: 0;
    color: rgba(255,255,255,.4);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
}

.ms-matchmaker__pressure-top > span strong {
    display: inline;
    margin-left: 7px;
    color: rgba(255,255,255,.84);
    font-size: 12px;
    letter-spacing: normal;
}

.ms-matchmaker__pressure-top > b {
    color: #fff;
    font-size: 13px;
}

.ms-matchmaker__pressure-track,
.ms-matchmaker__track {
    height: 8px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.065);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}

.ms-matchmaker__pressure-track i,
.ms-matchmaker__track i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            rgba(var(--matchmaker-accent-rgb), .65),
            var(--matchmaker-accent)
        );
    box-shadow:
        0 0 18px rgba(var(--matchmaker-accent-rgb), .38);
    transition:
        width 1s cubic-bezier(.22, .8, .25, 1);
}

.ms-matchmaker__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.ms-matchmaker__metric {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}

.ms-matchmaker__metric-top span {
    color: rgba(255,255,255,.52);
    font-size: 11px;
    font-weight: 700;
}

.ms-matchmaker__metric-top strong {
    color: #fff;
    font-size: 13px;
}

.ms-matchmaker__track {
    height: 6px;
    margin-top: 12px;
}

.ms-matchmaker__insight {
    position: relative;
    padding: 27px 28px 29px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(var(--matchmaker-accent-rgb), .075),
            rgba(255,255,255,.012) 48%,
            transparent
        );
}

.ms-matchmaker__insight::before {
    position: absolute;
    top: 27px;
    bottom: 29px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--matchmaker-accent);
    box-shadow:
        0 0 17px rgba(var(--matchmaker-accent-rgb), .55);
    content: "";
}

.ms-matchmaker__insight-content {
    display: grid;
    gap: 9px;
    max-width: 880px;
    margin-top: 14px;
}

.ms-matchmaker__insight-content p {
    position: relative;
    margin: 0;
    padding-left: 17px;
    color: rgba(255,255,255,.78);
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.65;
}

.ms-matchmaker__insight-content p::before {
    position: absolute;
    top: .7em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--matchmaker-accent);
    box-shadow:
        0 0 10px rgba(var(--matchmaker-accent-rgb), .5);
    content: "";
}

.ms-matchmaker__insight > small {
    display: block;
    margin-top: 18px;
    color: rgba(255,255,255,.27);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@keyframes ms-matchmaker-live-pulse {
    0%,
    100% {
        opacity: .55;
        transform: scale(.88);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

@media (max-width: 900px) {
    .ms-matchmaker__overview {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ms-matchmaker__state {
        grid-column: 1 / -1;
    }

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

@media (max-width: 620px) {
    .ms-matchmaker {
        border-radius: 19px;
    }

    .ms-matchmaker__header {
        padding: 21px 17px 17px;
    }

    .ms-matchmaker__header h2 {
        font-size: 24px;
    }

    .ms-matchmaker__overview {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 17px;
        padding: 22px 17px;
    }

    .ms-matchmaker__rating {
        width: 112px;
        height: 112px;
    }

    .ms-matchmaker__rating::before {
        inset: 7px;
    }

    .ms-matchmaker__rating strong {
        font-size: 37px;
    }

    .ms-matchmaker__rating span {
        font-size: 8px;
    }

    .ms-matchmaker__verdict > span {
        font-size: 8px;
    }

    .ms-matchmaker__verdict > strong {
        font-size: 22px;
    }

    .ms-matchmaker__verdict p {
        display: none;
    }

    .ms-matchmaker__state {
        padding: 16px;
    }

    .ms-matchmaker__pressure,
    .ms-matchmaker__metrics,
    .ms-matchmaker__insight {
        padding-right: 17px;
        padding-left: 17px;
    }

    .ms-matchmaker__metrics {
        gap: 9px;
    }

    .ms-matchmaker__metric {
        padding: 12px;
    }
}

@media (max-width: 390px) {
    .ms-matchmaker__overview {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 14px;
    }

    .ms-matchmaker__rating {
        width: 96px;
        height: 96px;
    }

    .ms-matchmaker__rating strong {
        font-size: 31px;
    }

    .ms-matchmaker__verdict > strong {
        font-size: 19px;
    }

    .ms-matchmaker__metrics {
        grid-template-columns: 1fr;
    }

    .ms-matchmaker__section-title {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ms-matchmaker__live::before {
        animation: none;
    }

    .ms-matchmaker__pressure-track i,
    .ms-matchmaker__track i {
        transition: none;
    }
}



/* MATCHSHOCK_MATCH_CENTER_FRONTEND_V1 */

.mc-hub,
.mc-detail {
    width: min(1240px, 100%);
    margin: 0 auto;
}

.mc-eyebrow {
    color: #ff4b59;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
}

.mc-hub__hero {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 34px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,39,61,.16),
            transparent 38%
        ),
        #11131a;
}

.mc-hub__hero h1 {
    margin: 8px 0;
    font-size: clamp(38px, 7vw, 72px);
    line-height: .95;
    letter-spacing: -.055em;
}

.mc-hub__hero p {
    max-width: 600px;
    margin: 18px 0 0;
    color: rgba(255,255,255,.58);
    font-size: 16px;
    line-height: 1.7;
}

.mc-hub__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    gap: 10px;
    min-width: 310px;
}

.mc-hub__summary div,
.mc-hub__summary small {
    padding: 18px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    background: rgba(255,255,255,.035);
}

.mc-hub__summary strong {
    display: block;
    font-size: 32px;
}

.mc-hub__summary span,
.mc-hub__summary small {
    color: rgba(255,255,255,.45);
}

.mc-hub__summary small {
    grid-column: 1 / -1;
}

.mc-toolbar {
    position: sticky;
    z-index: 10;
    top: 0;
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(7,8,12,.94);
    backdrop-filter: blur(18px);
}

.mc-sport-filters,
.mc-status-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.mc-sport-filters::-webkit-scrollbar,
.mc-status-filters::-webkit-scrollbar {
    display: none;
}

.mc-filter,
.mc-status-filter {
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.65);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
}

.mc-filter span {
    margin-right: 5px;
}

.mc-filter.is-active,
.mc-status-filter.is-active {
    border-color: rgba(255,55,72,.6);
    background: rgba(255,37,57,.16);
    color: #fff;
}

.mc-status-filter span {
    margin-left: 5px;
    opacity: .55;
}

.mc-event-grid {
    display: grid;
    grid-template-columns: repeat(
        2,
        minmax(0, 1fr)
    );
    gap: 16px;
    margin-top: 18px;
}

.mc-event-card {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            transparent 55%
        ),
        #11131a;
    color: #fff;
    text-decoration: none;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.mc-event-card:hover {
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 22px 55px rgba(0,0,0,.28);
    transform: translateY(-3px);
}

.mc-event-card--critical {
    border-color: rgba(255,49,68,.48);
    box-shadow: inset 0 0 45px rgba(255,26,52,.05);
}

.mc-event-card--hot {
    border-color: rgba(255,134,44,.35);
}

.mc-event-card.is-live::before {
    position: absolute;
    top: 0;
    left: 18px;
    width: 54px;
    height: 3px;
    background: #ff3046;
    box-shadow: 0 0 20px rgba(255,48,70,.8);
    content: "";
}

.mc-event-card__top,
.mc-event-card__footer,
.mc-event-card__score,
.mc-event-card__signals {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.mc-event-card__top {
    align-items: center;
}

.mc-event-card__sport {
    color: rgba(255,255,255,.68);
    font-size: 12px;
    font-weight: 800;
}

.mc-event-card__status {
    padding: 5px 8px;
    border-radius: 7px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.55);
    font-size: 11px;
    font-weight: 900;
}

.mc-event-card__status.is-live {
    background: rgba(255,32,54,.16);
    color: #ff6b77;
}

.mc-event-card__competition {
    margin-top: 12px;
    color: rgba(255,255,255,.38);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.mc-event-card__score {
    align-items: center;
    margin-top: 25px;
}

.mc-event-card__score > div {
    width: 35%;
}

.mc-event-card__score span {
    display: block;
    margin-bottom: 6px;
    color: rgba(255,255,255,.32);
    font-size: 9px;
    letter-spacing: .12em;
}

.mc-event-card__score strong {
    font-size: clamp(15px, 2vw, 20px);
}

.mc-event-card__score > b {
    white-space: nowrap;
    font-size: 29px;
}

.mc-event-card__score > b i {
    margin: 0 4px;
    color: rgba(255,255,255,.28);
    font-style: normal;
}

.mc-event-card__away {
    text-align: right;
}

.mc-event-card__signals {
    margin-top: 22px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.035);
}

.mc-event-card__signals > span {
    min-width: 0;
}

.mc-event-card__signals small {
    display: block;
    color: rgba(255,255,255,.35);
    font-size: 9px;
    text-transform: uppercase;
}

.mc-event-card__signals strong {
    display: block;
    margin-top: 4px;
    font-size: 14px;
}

.mc-event-card__footer {
    margin-top: 15px;
    color: rgba(255,255,255,.45);
    font-size: 11px;
}

.mc-event-card__footer strong {
    color: #ff6974;
}

.mc-empty {
    grid-column: 1 / -1;
    padding: 80px 20px;
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: 20px;
    text-align: center;
}

.mc-empty > span {
    font-size: 38px;
}

.mc-empty h2 {
    margin-bottom: 8px;
}

.mc-empty p,
.mc-muted {
    color: rgba(255,255,255,.48);
}

.mc-detail-hero,
.mc-panel {
    border: 1px solid rgba(255,255,255,.09);
    background: #11131a;
}

.mc-detail-hero {
    overflow: hidden;
    padding: 28px;
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(255,45,64,.18),
            transparent 45%
        ),
        #11131a;
}

.mc-detail-hero.is-live {
    border-color: rgba(255,50,67,.35);
}

.mc-detail-hero__top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    color: rgba(255,255,255,.45);
    font-size: 11px;
}

.mc-detail-hero__top a {
    color: rgba(255,255,255,.7);
    text-decoration: none;
}

.mc-detail-hero__top strong {
    justify-self: end;
    color: #ff6a76;
}

.mc-detail-score {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 25px;
    align-items: center;
    margin-top: 45px;
}

.mc-detail-score span {
    color: rgba(255,255,255,.3);
    font-size: 10px;
    letter-spacing: .12em;
}

.mc-detail-score h1,
.mc-detail-score h2 {
    margin: 8px 0 0;
    font-size: clamp(22px, 4vw, 40px);
    line-height: 1.05;
}

.mc-detail-score__away {
    text-align: right;
}

.mc-detail-score__result {
    text-align: center;
}

.mc-detail-score__result > strong {
    display: block;
    white-space: nowrap;
    font-size: clamp(46px, 8vw, 76px);
    line-height: 1;
}

.mc-detail-score__result i {
    color: rgba(255,255,255,.25);
    font-style: normal;
}

.mc-detail-score__result > span {
    display: inline-block;
    margin-top: 12px;
    padding: 7px 10px;
    border-radius: 9px;
    background: rgba(255,39,58,.14);
    color: #ff6571;
    letter-spacing: 0;
}

.mc-detail-story {
    max-width: 760px;
    margin-top: 38px;
    padding-top: 23px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.mc-detail-story > span {
    color: #ff4654;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
}

.mc-detail-story h2 {
    margin: 8px 0;
    font-size: clamp(22px, 4vw, 36px);
}

.mc-detail-story p {
    margin-bottom: 0;
    color: rgba(255,255,255,.58);
    line-height: 1.7;
}

.mc-detail-grid {
    display: grid;
    grid-template-columns: repeat(
        2,
        minmax(0, 1fr)
    );
    gap: 18px;
    margin-top: 18px;
}

.mc-panel {
    padding: 23px;
    border-radius: 18px;
}

.mc-panel__heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 21px;
}

.mc-panel__heading h2 {
    margin: 6px 0 0;
    font-size: 22px;
}

.mc-data-badge {
    flex: 0 0 auto;
    padding: 6px 8px;
    border-radius: 7px;
    background: rgba(255,170,36,.12);
    color: #ffbc58;
    font-size: 9px;
    font-weight: 900;
}

.mc-data-badge.is-available {
    background: rgba(48,207,127,.12);
    color: #5ee19b;
}

.mc-intelligence {
    --mc-accent: #4aa7ff;
    position: relative;
    overflow: hidden;
}

.mc-intelligence--interesting {
    --mc-accent: #ffc344;
}

.mc-intelligence--hot {
    --mc-accent: #ff8a34;
}

.mc-intelligence--critical {
    --mc-accent: #ff354a;
}

.mc-intelligence__main {
    display: flex;
    gap: 25px;
    align-items: center;
}

.mc-score-ring {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    width: 135px;
    height: 135px;
    place-items: center;
    border-radius: 50%;
    background:
        conic-gradient(
            var(--mc-accent) var(--mc-score),
            rgba(255,255,255,.07) 0
        );
}

.mc-score-ring::before {
    position: absolute;
    inset: 8px;
    border-radius: inherit;
    background: #11131a;
    content: "";
}

.mc-score-ring > div {
    position: relative;
    z-index: 1;
    text-align: center;
}

.mc-score-ring strong {
    display: block;
    font-size: 39px;
}

.mc-score-ring span {
    color: rgba(255,255,255,.35);
    font-size: 10px;
}

.mc-intelligence__verdict > span {
    font-size: 29px;
}

.mc-intelligence__verdict h3 {
    margin: 7px 0;
    color: var(--mc-accent);
    font-size: 28px;
}

.mc-intelligence__verdict p {
    margin: 0;
    color: rgba(255,255,255,.5);
    font-size: 13px;
    line-height: 1.6;
}

.mc-intelligence__metrics {
    display: grid;
    grid-template-columns: repeat(
        2,
        minmax(0, 1fr)
    );
    gap: 10px;
    margin-top: 22px;
}

.mc-metric {
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.035);
}

.mc-metric__top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
}

.mc-metric__top span {
    color: rgba(255,255,255,.45);
}

.mc-metric__track,
.mc-probability__track {
    height: 5px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}

.mc-metric__track i,
.mc-probability__track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #ffae25,
            #ff3149
        );
}

.mc-reason-list {
    display: grid;
    gap: 7px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.mc-reason-list li {
    padding: 9px 10px;
    border-radius: 9px;
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.65);
    font-size: 12px;
}

.mc-reason-list span {
    margin-right: 5px;
}

.mc-statistics__unavailable {
    display: flex;
    gap: 15px;
    padding: 18px;
    border: 1px dashed rgba(255,255,255,.1);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}

.mc-statistics__unavailable > span {
    font-size: 28px;
}

.mc-statistics__unavailable h3 {
    margin: 0 0 7px;
}

.mc-statistics__unavailable p {
    margin: 0;
    color: rgba(255,255,255,.48);
    font-size: 13px;
    line-height: 1.6;
}

.mc-stat-head,
.mc-stat-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 12px;
    align-items: center;
    text-align: center;
}

.mc-stat-head {
    padding-bottom: 10px;
    color: rgba(255,255,255,.38);
    font-size: 10px;
}

.mc-stat-head strong:first-child,
.mc-stat-row strong:first-child {
    text-align: left;
}

.mc-stat-head strong:last-child,
.mc-stat-row strong:last-child {
    text-align: right;
}

.mc-stat-row {
    padding: 11px 0;
    border-top: 1px solid rgba(255,255,255,.055);
}

.mc-stat-row span {
    color: rgba(255,255,255,.42);
    font-size: 11px;
}

.mc-probability {
    display: grid;
    gap: 13px;
}

.mc-probability__row {
    display: grid;
    grid-template-columns: 110px 1fr 42px;
    gap: 12px;
    align-items: center;
    font-size: 12px;
}

.mc-probability__track {
    margin: 0;
}

.mc-probability__row strong {
    text-align: right;
}

.mc-signal-grid {
    display: grid;
    grid-template-columns: repeat(
        2,
        minmax(0, 1fr)
    );
    gap: 10px;
    margin-top: 20px;
}

.mc-signal-grid > div {
    padding: 15px;
    border-radius: 11px;
    background: rgba(255,255,255,.035);
}

.mc-signal-grid span,
.mc-signal-grid small {
    display: block;
    color: rgba(255,255,255,.38);
    font-size: 10px;
}

.mc-signal-grid strong {
    display: block;
    margin: 5px 0;
    font-size: 25px;
}

.mc-timeline {
    display: grid;
    gap: 9px;
}

.mc-timeline article {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 13px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.03);
}

.mc-timeline article > strong {
    color: #ff6470;
}

.mc-timeline h3,
.mc-timeline p {
    margin: 0;
}

.mc-timeline h3 {
    font-size: 13px;
}

.mc-timeline p {
    margin-top: 4px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
}

@media (max-width: 850px) {
    .mc-hub__hero {
        display: grid;
    }

    .mc-hub__summary {
        min-width: 0;
    }

    .mc-event-grid,
    .mc-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .mc-hub__hero,
    .mc-detail-hero,
    .mc-panel {
        padding: 17px;
        border-radius: 16px;
    }

    .mc-hub__summary {
        grid-template-columns: 1fr 1fr;
    }

    .mc-detail-hero__top {
        grid-template-columns: 1fr auto;
    }

    .mc-detail-hero__top > span {
        display: none;
    }

    .mc-detail-score {
        gap: 8px;
        margin-top: 30px;
    }

    .mc-detail-score h1,
    .mc-detail-score h2 {
        font-size: 17px;
    }

    .mc-detail-score__result > strong {
        font-size: 38px;
    }

    .mc-event-card {
        padding: 16px;
    }

    .mc-event-card__score > div {
        width: 36%;
    }

    .mc-event-card__score strong {
        font-size: 14px;
    }

    .mc-event-card__score > b {
        font-size: 23px;
    }

    .mc-event-card__signals {
        gap: 7px;
    }

    .mc-intelligence__main {
        display: grid;
        justify-items: center;
        text-align: center;
    }

    .mc-intelligence__metrics,
    .mc-signal-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mc-probability__row {
        grid-template-columns: 85px 1fr 38px;
    }
}


/* MATCHSHOCK_STALE_LIVE_DATA_PROTECTION_V1 */

.mc-freshness {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(255,185,55,.35);
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            rgba(255,178,38,.11),
            rgba(255,178,38,.035)
        ),
        #11131a;
}

.mc-freshness.is-stale {
    border-color: rgba(255,62,76,.48);
    background:
        linear-gradient(
            135deg,
            rgba(255,38,57,.14),
            rgba(255,38,57,.035)
        ),
        #11131a;
}

.mc-freshness > span {
    flex: 0 0 auto;
    font-size: 26px;
}

.mc-freshness strong {
    display: block;
    color: #ffc35b;
    font-size: 14px;
}

.mc-freshness.is-stale strong {
    color: #ff6975;
}

.mc-freshness p {
    margin: 5px 0 0;
    color: rgba(255,255,255,.56);
    font-size: 12px;
    line-height: 1.6;
}

.mc-event-card.is-delayed {
    border-color: rgba(255,185,55,.3);
}

.mc-event-card.is-delayed::before {
    position: absolute;
    top: 0;
    left: 18px;
    width: 75px;
    height: 3px;
    background: #ffb638;
    box-shadow: 0 0 18px rgba(255,182,56,.55);
    content: "";
}

.mc-event-card.is-delayed
.mc-event-card__status {
    background: rgba(255,178,43,.12);
    color: #ffc15b;
}

@media (max-width: 600px) {
    .mc-freshness {
        padding: 14px;
    }

    .mc-freshness > span {
        font-size: 22px;
    }
}


/* MATCHSHOCK_TEAM_HISTORY_MATCH_CENTER_FRONTEND_V1 */

.mc-h2h {
    overflow: hidden;
}

.mc-h2h__sample {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.mc-h2h__record {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.mc-h2h__record-item {
    min-width: 0;
    padding: 20px 14px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.025)
        );
    text-align: center;
}

.mc-h2h__record-item strong {
    display: block;
    color: #fff;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1;
}

.mc-h2h__record-item span {
    display: block;
    margin-top: 8px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
}

.mc-h2h__signals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.mc-h2h__signals span {
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.64);
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

.mc-h2h__signals strong {
    display: block;
    margin-bottom: 2px;
    color: #fff;
    font-size: 17px;
}

.mc-h2h__meetings {
    margin-top: 24px;
}

.mc-h2h__meetings h3 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 16px;
}

.mc-h2h__list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mc-h2h-match {
    display: grid;
    grid-template-columns:
        minmax(120px, 0.8fr)
        minmax(260px, 2fr)
        auto;
    align-items: center;
    gap: 16px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.035);
}

.mc-h2h-match__meta {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.mc-h2h-match__meta time {
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.mc-h2h-match__meta span {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-h2h-match__score {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mc-h2h-match__team {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-h2h-match__team:first-child {
    text-align: right;
}

.mc-h2h-match__score strong {
    min-width: 55px;
    padding: 6px 9px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 15px;
    text-align: center;
}

.mc-h2h-match__result {
    min-width: 50px;
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-align: center;
}

.mc-h2h-match__result--win {
    background: rgba(48, 209, 88, 0.14);
    color: #58df7a;
}

.mc-h2h-match__result--draw {
    background: rgba(255, 184, 0, 0.14);
    color: #ffc43d;
}

.mc-h2h-match__result--loss {
    background: rgba(255, 49, 49, 0.14);
    color: #ff6868;
}

.mc-h2h-match__result--neutral {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 700px) {
    .mc-h2h__record,
    .mc-h2h__signals {
        grid-template-columns: 1fr;
    }

    .mc-h2h__record {
        gap: 8px;
    }

    .mc-h2h__record-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        text-align: left;
    }

    .mc-h2h__record-item strong {
        font-size: 27px;
    }

    .mc-h2h__record-item span {
        max-width: 75%;
        margin-top: 0;
        text-align: right;
    }

    .mc-h2h-match {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .mc-h2h-match__meta {
        grid-column: 1 / -1;
    }

    .mc-h2h-match__score {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);
    }
}

@media (max-width: 460px) {
    .mc-h2h__sample {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }

    .mc-h2h-match {
        padding: 12px;
    }

    .mc-h2h-match__score {
        gap: 7px;
    }

    .mc-h2h-match__team {
        font-size: 10px;
    }

    .mc-h2h-match__score strong {
        min-width: 46px;
        padding: 5px 6px;
        font-size: 13px;
    }
}


/* MATCHSHOCK_TEAM_FORM_MATCH_CENTER_FRONTEND_V1 */

.mc-team-form {
    overflow: hidden;
}

.mc-team-form__note {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.mc-team-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.mc-team-form__grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.mc-team-form-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.025)
        );
}

.mc-team-form-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.mc-team-form-card__head div {
    min-width: 0;
}

.mc-team-form-card__head span {
    display: block;
    margin-bottom: 5px;
    color: #ff4a4a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.09em;
}

.mc-team-form-card__head h3 {
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 18px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-team-form-card__head > strong {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.54);
    font-size: 11px;
}

.mc-team-form__sequence {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

.mc-team-form__result {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 950;
}

.mc-team-form__result--win {
    background: rgba(48, 209, 88, 0.16);
    color: #61e681;
}

.mc-team-form__result--draw {
    background: rgba(255, 184, 0, 0.16);
    color: #ffc846;
}

.mc-team-form__result--loss {
    background: rgba(255, 49, 49, 0.16);
    color: #ff7070;
}

.mc-team-form__result--neutral {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.45);
}

.mc-team-form__summary {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.61);
    font-size: 12px;
}

.mc-team-form__summary strong {
    color: #fff;
}

.mc-team-form__summary span {
    margin: 0 5px;
    color: rgba(255, 255, 255, 0.25);
}

.mc-team-form__metrics {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 17px;
}

.mc-team-form__metrics span {
    min-width: 0;
    padding: 10px 7px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.52);
    font-size: 9px;
    line-height: 1.3;
    text-align: center;
}

.mc-team-form__metrics strong {
    display: block;
    margin-bottom: 2px;
    color: #fff;
    font-size: 14px;
}

.mc-team-form__matches {
    display: grid;
    gap: 7px;
    margin: 17px 0 0;
    padding: 0;
    list-style: none;
}

.mc-team-form-match {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.16);
}

.mc-team-form-match .mc-team-form__result {
    width: 29px;
    height: 29px;
    border-radius: 8px;
    font-size: 10px;
}

.mc-team-form-match__main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.mc-team-form-match__main strong {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.84);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-team-form-match__main span {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.42);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-team-form-match__score {
    min-width: 42px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-align: right;
}

@media (max-width: 850px) {
    .mc-team-form__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .mc-team-form__note {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }

    .mc-team-form-card {
        padding: 15px;
    }

    .mc-team-form__metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mc-team-form__result {
        width: 33px;
        height: 33px;
    }
}


/* MATCHSHOCK_FOOTBALL_LINEUPS_FRONTEND_V1 */

.mc-lineups {
    grid-column: 1 / -1;
}

.mc-lineups__notice {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--color-secondary-text, #aab0bc);
    font-size: 0.88rem;
    line-height: 1.55;
}

.mc-lineups__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.mc-lineups__grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.mc-lineup-team {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
}

.mc-lineup-team__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.mc-lineup-team__head span,
.mc-lineup-meta span,
.mc-lineup-subheading span {
    color: var(--color-secondary-text, #aab0bc);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mc-lineup-team__head h3,
.mc-lineup-team__head strong {
    margin: 4px 0 0;
}

.mc-lineup-team__head strong {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.82rem;
}

.mc-lineup-meta {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
}

.mc-lineup-team > section + section {
    margin-top: 22px;
}

.mc-lineup-subheading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}

.mc-lineup-subheading h4 {
    margin: 0;
    font-size: 0.95rem;
}

.mc-lineup-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mc-lineup-player {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
}

.mc-lineup-player > strong {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.8rem;
}

.mc-lineup-player h4,
.mc-lineup-player span {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-lineup-player h4 {
    font-size: 0.86rem;
}

.mc-lineup-player span {
    display: block;
    margin-top: 2px;
    color: var(--color-secondary-text, #aab0bc);
    font-size: 0.72rem;
}

@media (max-width: 760px) {
    .mc-lineups__grid {
        grid-template-columns: 1fr;
    }

    .mc-lineup-team {
        padding: 14px;
    }
}


/* MATCHSHOCK_FOOTBALL_PITCH_RENDERER_V1 */

.mc-lineup-pitch {
    position: relative;
    display: grid;
    min-height: 530px;
    overflow: hidden;
    grid-template-rows:
        repeat(
            var(--pitch-row-count),
            minmax(0, 1fr)
        );
    margin: 0;
    padding: 28px 18px;
    border: 2px solid rgba(255, 255, 255, 0.32);
    border-radius: 16px;
    background:
        linear-gradient(
            rgba(3, 50, 31, 0.18),
            rgba(3, 50, 31, 0.18)
        ),
        repeating-linear-gradient(
            0deg,
            rgba(35, 142, 82, 0.92) 0,
            rgba(35, 142, 82, 0.92) 12.5%,
            rgba(29, 126, 73, 0.92) 12.5%,
            rgba(29, 126, 73, 0.92) 25%
        );
    box-shadow:
        inset 0 0 45px rgba(0, 0, 0, 0.22);
    isolation: isolate;
}

.mc-lineup-pitch::before {
    position: absolute;
    inset: 13px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 4px;
    content: "";
    pointer-events: none;
}

.mc-lineup-pitch__halfway {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: 13px;
    left: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.48);
    pointer-events: none;
}

.mc-lineup-pitch__centre-circle {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 82px;
    height: 82px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mc-lineup-pitch__centre-circle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    content: "";
    transform: translate(-50%, -50%);
}

.mc-lineup-pitch__penalty-area {
    position: absolute;
    z-index: 0;
    left: 50%;
    width: 42%;
    height: 14%;
    border: 1px solid rgba(255, 255, 255, 0.46);
    transform: translateX(-50%);
    pointer-events: none;
}

.mc-lineup-pitch__penalty-area--top {
    top: 13px;
    border-top: 0;
}

.mc-lineup-pitch__penalty-area--bottom {
    bottom: 13px;
    border-bottom: 0;
}

.mc-pitch-player {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    align-items: center;
    align-self: center;
    flex-direction: column;
    grid-row: var(--pitch-row);
    grid-column: var(--pitch-column);
    justify-self: center;
    text-align: center;
}

.mc-lineup-pitch {
    grid-template-columns:
        repeat(12, minmax(0, 1fr));
}

.mc-pitch-player {
    /*
     * Provider columns are distributed evenly across
     * twelve internal pitch columns.
     */
    grid-column:
        calc(
            (
                (
                    var(--pitch-column)
                    * 12
                )
                /
                (
                    var(--pitch-column-count)
                    + 1
                )
            )
        );
}

.mc-pitch-player__number {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            #191d29,
            #080a10
        );
    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.4);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 900;
}

.mc-pitch-player__name {
    display: block;
    max-width: 96px;
    overflow: hidden;
    margin-top: 5px;
    padding: 3px 6px;
    border-radius: 6px;
    background: rgba(3, 8, 12, 0.78);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px #000000;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .mc-lineup-pitch {
        min-height: 500px;
    }

    .mc-pitch-player__name {
        max-width: 82px;
        font-size: 0.63rem;
    }
}

@media (max-width: 760px) {
    .mc-lineup-pitch {
        min-height: 570px;
        padding: 24px 10px;
    }

    .mc-pitch-player__number {
        width: 32px;
        height: 32px;
    }

    .mc-pitch-player__name {
        max-width: 76px;
        padding: 3px 4px;
        font-size: 0.61rem;
    }
}

@media (max-width: 420px) {
    .mc-lineup-pitch {
        min-height: 520px;
    }

    .mc-pitch-player__number {
        width: 29px;
        height: 29px;
        font-size: 0.7rem;
    }

    .mc-pitch-player__name {
        max-width: 67px;
        font-size: 0.57rem;
    }
}


/* MATCHSHOCK_FOOTBALL_PITCH_RENDERER_V2 */

/*
 * A slightly wider-looking desktop proportion while
 * preserving additional vertical space on small screens.
 */
.mc-lineup-pitch {
    min-height: 465px;
    padding: 24px 16px;
}

.mc-pitch-player__name {
    max-width: 82px;
    padding: 4px 7px;
    font-size: 0.7rem;
    letter-spacing: 0.01em;
}

@media (max-width: 1100px) and (min-width: 761px) {
    .mc-lineup-pitch {
        min-height: 455px;
        padding: 22px 12px;
    }

    .mc-pitch-player__name {
        max-width: 74px;
        padding-right: 5px;
        padding-left: 5px;
        font-size: 0.65rem;
    }
}

@media (max-width: 760px) {
    .mc-lineups__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mc-lineup-pitch {
        min-height: 560px;
        padding: 26px 12px;
    }

    .mc-pitch-player__name {
        max-width: 76px;
        padding: 4px 6px;
        font-size: 0.64rem;
    }
}

@media (max-width: 420px) {
    .mc-lineup-pitch {
        min-height: 520px;
        padding: 24px 8px;
    }

    .mc-pitch-player__name {
        max-width: 65px;
        padding: 3px 5px;
        font-size: 0.6rem;
    }
}


/* MATCHSHOCK_TEAM_IDENTITY_V1 */

.mc-team-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
}

.mc-team-identity__badge {
    position: relative;
    display: inline-flex;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 67, 82, 0.22),
            rgba(255, 255, 255, 0.045)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(0, 0, 0, 0.16);
}

.mc-team-identity__initials {
    color: rgba(255, 255, 255, 0.9);
    font-size: 17px;
    font-weight: 950;
    letter-spacing: 0.04em;
}

.mc-team-identity__badge img {
    position: absolute;
    inset: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    object-fit: contain;
}

.mc-team-identity__content {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.mc-team-identity__content small {
    color: rgba(255, 255, 255, 0.34);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.mc-team-identity__content strong {
    overflow: hidden;
    color: #fff;
    font-size: clamp(22px, 4vw, 40px);
    line-height: 1.05;
    text-overflow: ellipsis;
}

.mc-team-identity--away {
    flex-direction: row-reverse;
}

.mc-team-identity--away
.mc-team-identity__content {
    text-align: right;
}

.mc-detail-score__team {
    min-width: 0;
}

.mc-lineup-team__head
.mc-team-identity {
    flex: 1 1 auto;
}

.mc-lineup-team__head
.mc-team-identity__badge {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 13px;
}

.mc-lineup-team__head
.mc-team-identity__initials {
    font-size: 13px;
}

.mc-lineup-team__head
.mc-team-identity__content {
    gap: 3px;
}

.mc-lineup-team__head
.mc-team-identity__content strong {
    font-size: 1.17rem;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .mc-team-identity {
        gap: 7px;
    }

    .mc-team-identity__badge {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 12px;
    }

    .mc-team-identity__initials {
        font-size: 12px;
    }

    .mc-team-identity__content {
        gap: 4px;
    }

    .mc-team-identity__content small {
        font-size: 8px;
    }

    .mc-team-identity__content strong {
        font-size: 17px;
    }

    .mc-lineup-team__head
    .mc-team-identity__badge {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .mc-lineup-team__head
    .mc-team-identity__content strong {
        max-width: 170px;
        font-size: 1rem;
    }
}


/* MATCHSHOCK_MATCH_CENTER_HUB_V2_CSS */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    clip-path: inset(50%) !important;
}

.mc-toolbar--hub-v2 {
    display: grid;
    grid-template-columns: minmax(240px, 1fr);
    gap: 13px;
}

.mc-hub-search {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
}

.mc-hub-search:focus-within {
    border-color: rgba(255, 60, 78, .7);
    box-shadow: 0 0 0 3px rgba(255, 48, 70, .1);
}

.mc-hub-search > span[aria-hidden="true"] {
    flex: 0 0 auto;
    opacity: .7;
}

.mc-hub-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 14px;
}

.mc-hub-search input::placeholder {
    color: rgba(255, 255, 255, .42);
}

.mc-hub__result-summary {
    display: flex;
    justify-content: space-between;
    margin-top: 17px;
    color: rgba(255, 255, 255, .58);
    font-size: 12px;
}

.mc-hub__result-summary strong {
    color: #fff;
}

.mc-event-grid--hub-v2 {
    display: grid;
    grid-template-columns: repeat(
        2,
        minmax(0, 1fr)
    );
    gap: 12px;
}

.mc-event-card--hub-v2 {
    display: grid;
    gap: 16px;
    padding: 17px 18px;
    border-radius: 16px;
}

.mc-event-card--hub-v2.is-important {
    border-color: rgba(255, 122, 55, .3);
}

.mc-event-card--hub-v2.is-live {
    border-color: rgba(255, 48, 70, .58);
}

.mc-event-card--hub-v2
.mc-event-card__top {
    align-items: flex-start;
}

.mc-event-card--hub-v2
.mc-event-card__top > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.mc-event-card--hub-v2
.mc-event-card__competition {
    overflow: hidden;
    max-width: 280px;
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-event-card--hub-v2
.mc-event-card__status {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.mc-event-card--hub-v2
.mc-event-card__status.is-live {
    background: rgba(255, 38, 58, .18);
    color: #ff6674;
}

.mc-event-card__matchup {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.mc-event-team {
    display: grid;
    gap: 8px;
    justify-items: start;
    min-width: 0;
}

.mc-event-team--away {
    justify-items: end;
    text-align: right;
}

.mc-event-team > strong {
    overflow: hidden;
    width: 100%;
    font-size: 14px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-event-team__badge {
    position: relative;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.mc-event-team__badge > span {
    color: rgba(255, 255, 255, .65);
    font-size: 10px;
    font-weight: 900;
}

.mc-event-team__badge img {
    position: absolute;
    inset: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    object-fit: contain;
}

.mc-event-team__badge.is-fallback img {
    display: none;
}

.mc-event-card--hub-v2
.mc-event-card__score {
    display: grid;
    min-width: 68px;
    place-items: center;
}

.mc-event-card__result {
    color: #fff;
    font-size: 22px;
    line-height: 1;
    white-space: nowrap;
}

.mc-event-card__result span {
    margin: 0 3px;
    color: rgba(255, 255, 255, .35);
}

.mc-event-card__upcoming {
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    color: rgba(255, 255, 255, .62);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

.mc-event-card--hub-v2
.mc-event-card__footer {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
}

.mc-event-card--hub-v2
.mc-event-card__footer strong {
    color: rgba(255, 255, 255, .88);
}

.mc-hub__load-more {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.mc-hub__load-more button,
.mc-empty button {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .055);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
}

.mc-hub__load-more button:hover,
.mc-empty button:hover {
    border-color: rgba(255, 55, 72, .55);
    background: rgba(255, 37, 57, .12);
}

.mc-hub__load-more button span {
    margin-left: 7px;
    color: #ff6876;
}

@media (max-width: 850px) {
    .mc-event-grid--hub-v2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .mc-toolbar--hub-v2 {
        gap: 10px;
    }

    .mc-sport-filters,
    .mc-status-filters {
        display: flex;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: none;
    }

    .mc-sport-filters::-webkit-scrollbar,
    .mc-status-filters::-webkit-scrollbar {
        display: none;
    }

    .mc-filter,
    .mc-status-filter {
        flex: 0 0 auto;
    }

    .mc-event-card--hub-v2 {
        gap: 14px;
        padding: 15px;
    }

    .mc-event-card__matchup {
        gap: 8px;
    }

    .mc-event-team > strong {
        font-size: 13px;
    }

    .mc-event-card__result {
        font-size: 20px;
    }

    .mc-event-card--hub-v2
    .mc-event-card__competition {
        max-width: 190px;
    }
}


/* MATCHSHOCK_MATCH_PAGE_V2_PHASE1_CSS */

.mc-detail-hero--v2 {
    position: relative;
}

.mc-detail-status {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.mc-detail-status--live {
    background: rgba(255, 43, 65, .17);
    color: #ff6a78 !important;
}

.mc-detail-status--finished {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .72) !important;
}

.mc-detail-status--upcoming {
    background: rgba(67, 145, 255, .13);
    color: #78b3ff !important;
}

.mc-detail-title {
    margin: 30px 0 0;
    color: #fff;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.15;
    text-align: center;
}

.mc-detail-score__versus {
    min-width: 82px;
    padding: 13px 16px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 16px;
    background: rgba(255, 255, 255, .045);
    font-size: clamp(26px, 5vw, 42px) !important;
    letter-spacing: .08em;
}

.mc-detail-hero--upcoming
.mc-detail-story {
    max-width: 820px;
}

.mc-detail-hero--finished {
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(91, 128, 180, .15),
            transparent 45%
        ),
        #11131a;
}

.mc-detail-overview {
    grid-column: 1 / -1;
}

.mc-detail-overview__grid {
    display: grid;
    grid-template-columns: repeat(
        4,
        minmax(0, 1fr)
    );
    gap: 12px;
}

.mc-detail-overview__grid > div {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
}

.mc-detail-overview__grid small {
    color: rgba(255, 255, 255, .42);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.mc-detail-overview__grid strong {
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.mc-detail-overview__grid span {
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
    line-height: 1.4;
}

.mc-detail-overview--live {
    border-color: rgba(255, 51, 70, .25);
}

@media (max-width: 850px) {
    .mc-detail-overview__grid {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }
}

@media (max-width: 600px) {
    .mc-detail-title {
        margin-top: 24px;
        font-size: 21px;
    }

    .mc-detail-score__versus {
        min-width: 60px;
        padding: 10px 11px;
        font-size: 24px !important;
    }

    .mc-detail-overview__grid {
        grid-template-columns: 1fr;
    }

    .mc-detail-overview__grid > div {
        padding: 13px;
    }
}

/* =========================================================
   MATCHSHOCK_MATCH_PAGE_V2_PHASE2_COMPACT_LAYOUT
   ========================================================= */

/*
 * Prevent independent cards in the two-column detail grid
 * from stretching to the height of neighboring content.
 */

.mc-detail-grid {
    align-items: start;
    align-content: start;
}

.mc-detail-grid > .mc-panel {
    min-height: 0;
    align-self: start;
}


/* ---------------------------------------------------------
   Compact panel rhythm
   --------------------------------------------------------- */

.mc-detail-grid .mc-panel {
    padding: 20px;
}

.mc-detail-grid .mc-panel__heading {
    min-height: 42px;
    margin-bottom: 15px;
}

.mc-detail-grid .mc-panel__heading h2 {
    line-height: 1.1;
}


/* ---------------------------------------------------------
   Compact intelligence card
   --------------------------------------------------------- */

.mc-detail-grid .mc-intelligence__main {
    gap: 18px;
}

.mc-detail-grid .mc-score-ring {
    width: 116px;
    height: 116px;
}

.mc-detail-grid .mc-score-ring::before {
    inset: 7px;
}

.mc-detail-grid .mc-score-ring strong {
    font-size: 34px;
}

.mc-detail-grid .mc-intelligence__verdict > span {
    font-size: 24px;
}

.mc-detail-grid .mc-intelligence__verdict h3 {
    margin: 5px 0;
    font-size: 24px;
    line-height: 1.05;
}

.mc-detail-grid .mc-intelligence__verdict p {
    font-size: 12px;
    line-height: 1.45;
}

.mc-detail-grid .mc-intelligence__metrics {
    gap: 8px;
    margin-top: 16px;
}

.mc-detail-grid .mc-metric {
    padding: 9px 10px;
}

.mc-detail-grid .mc-reason-list {
    gap: 6px;
    margin-top: 12px;
}


/* ---------------------------------------------------------
   Compact probabilities and signal blocks
   --------------------------------------------------------- */

.mc-detail-grid .mc-probability {
    gap: 10px;
}

.mc-detail-grid .mc-probability__row {
    gap: 10px;
}

.mc-detail-grid .mc-signal-grid {
    gap: 8px;
}

.mc-detail-grid .mc-signal-grid > div {
    padding: 10px;
}

.mc-detail-grid .mc-signal-grid strong {
    margin: 3px 0;
    font-size: 21px;
}


/* ---------------------------------------------------------
   Timeline
   Desktop: chronological two-column grid.
   Mobile: compact single-column stream.
   --------------------------------------------------------- */

.mc-detail-grid .mc-timeline {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.mc-detail-grid .mc-timeline article {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px;
    min-width: 0;
    padding: 8px 9px;
    border-radius: 9px;
}

.mc-detail-grid .mc-timeline article > strong {
    font-size: 12px;
    line-height: 1.25;
}

.mc-detail-grid .mc-timeline h3 {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.mc-detail-grid .mc-timeline p {
    display: -webkit-box;
    margin-top: 2px;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 600px) {
    .mc-detail-grid {
        gap: 14px;
    }

    .mc-detail-grid .mc-panel {
        padding: 15px;
        border-radius: 15px;
    }

    .mc-detail-grid .mc-panel__heading {
        min-height: 40px;
        margin-bottom: 13px;
    }

    /*
     * Keep the score ring and verdict beside each other
     * instead of stacking them vertically.
     */

    .mc-detail-grid .mc-intelligence__main {
        display: grid;
        grid-template-columns:
            100px minmax(0, 1fr);
        align-items: center;
        gap: 13px;
    }

    .mc-detail-grid .mc-score-ring {
        width: 100px;
        height: 100px;
    }

    .mc-detail-grid .mc-score-ring strong {
        font-size: 29px;
    }

    .mc-detail-grid .mc-intelligence__verdict > span {
        font-size: 20px;
    }

    .mc-detail-grid .mc-intelligence__verdict h3 {
        font-size: 20px;
    }

    .mc-detail-grid .mc-intelligence__verdict p {
        font-size: 11px;
        line-height: 1.4;
    }

    .mc-detail-grid .mc-intelligence__metrics {
        margin-top: 14px;
    }

    .mc-detail-grid .mc-timeline {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .mc-detail-grid .mc-timeline article {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
    }
}


/* ---------------------------------------------------------
   Very narrow phones
   --------------------------------------------------------- */

@media (max-width: 350px) {
    .mc-detail-grid .mc-intelligence__main {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .mc-detail-grid .mc-intelligence__verdict {
        text-align: center;
    }
}


/* MATCHSHOCK_MULTISPORT_MATCH_FRONTEND_V1 */

.mc-event-card__result--text {
    display: block;
    max-width: 240px;
    font-size: 0.82rem;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
}

.mc-event-card__mma-meta {
    display: block;
    margin-top: 0.2rem;
    opacity: 0.72;
}

.mc-event-team.is-winner strong,
.mc-detail-score__team.is-winner
.mc-team-identity__name {
    font-weight: 800;
}

.mc-winner-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    margin-top: 0.35rem;
    padding: 0.18rem 0.48rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mc-detail-score__fight-result {
    display: block;
    max-width: 380px;
    font-size: clamp(1rem, 2.4vw, 1.45rem);
    line-height: 1.25;
    text-align: center;
}

.mc-overview-result-text {
    display: block;
    max-width: 340px;
    line-height: 1.35;
}

.mc-multisport-details__grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.mc-multisport-details__grid > div {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    padding: 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
}

.mc-multisport-details__grid small {
    opacity: 0.66;
}

.mc-multisport-details__grid strong {
    overflow-wrap: anywhere;
}

.mc-multisport-table-wrap {
    overflow-x: auto;
}

.mc-multisport-table {
    width: 100%;
    border-collapse: collapse;
}

.mc-multisport-table th,
.mc-multisport-table td {
    padding: 0.75rem;
    border-bottom: 1px solid
        rgba(255, 255, 255, 0.08);
    text-align: center;
}

.mc-multisport-table th:first-child {
    text-align: left;
}

@media (max-width: 700px) {
    .mc-multisport-details__grid {
        grid-template-columns: 1fr;
    }

    .mc-detail-score__fight-result {
        max-width: 220px;
        font-size: 0.95rem;
    }

    .mc-event-card__result--text {
        max-width: 160px;
        font-size: 0.74rem;
    }
}

/* =========================================================
   MATCHSHOCK_DETAIL_LAYOUT_V1
   Wider and more readable permanent match pages
   ========================================================= */

@media (min-width: 851px) {
    #ms-match-page .mc-detail {
        width: 100%;
        max-width: 1180px;
        margin-right: auto;
        margin-left: auto;
    }

    #ms-match-page .mc-detail-hero {
        padding: 30px 34px;
    }

    #ms-match-page .mc-detail-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    #ms-match-page
    .mc-detail-grid
    > .mc-detail-overview {
        grid-column: 1 / -1;
    }

    #ms-match-page .mc-panel {
        padding: 24px;
    }

    #ms-match-page
    .mc-detail-grid
    .mc-panel__heading h2 {
        font-size: 23px;
    }

    #ms-match-page .mc-stat-head,
    #ms-match-page .mc-stat-row {
        grid-template-columns:
            minmax(70px, .75fr)
            minmax(120px, 1.5fr)
            minmax(70px, .75fr);
        column-gap: 16px;
    }

    #ms-match-page .mc-stat-head {
        font-size: 11px;
    }

    #ms-match-page .mc-stat-row {
        min-height: 39px;
        font-size: 13px;
    }

    #ms-match-page .mc-stat-row span {
        font-size: 12px;
    }

    #ms-match-page .mc-stat-row strong {
        font-size: 14px;
    }

    #ms-match-page
    .mc-detail-grid
    .mc-timeline {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    #ms-match-page
    .mc-detail-grid
    .mc-timeline article {
        min-height: 68px;
        padding: 12px 13px;
    }

    #ms-match-page
    .mc-detail-grid
    .mc-timeline article > strong {
        min-width: 45px;
        font-size: 13px;
    }

    #ms-match-page
    .mc-detail-grid
    .mc-timeline h3 {
        font-size: 13px;
        line-height: 1.25;
    }

    #ms-match-page
    .mc-detail-grid
    .mc-timeline p {
        margin-top: 5px;
        font-size: 11px;
        line-height: 1.45;
    }
}

@media (min-width: 1180px) {
    #ms-match-page .mc-detail-score {
        gap: 44px;
    }

    #ms-match-page
    .mc-detail-score__team h1,
    #ms-match-page
    .mc-detail-score__team h2 {
        font-size: 31px;
    }

    #ms-match-page
    .mc-detail-score__result > strong {
        font-size: 58px;
    }

    #ms-match-page .mc-detail-title {
        font-size: 30px;
    }
}

@media (max-width: 850px) {
    #ms-match-page .mc-detail {
        width: 100%;
        max-width: 100%;
    }

    #ms-match-page .mc-detail-grid {
        grid-template-columns: 1fr;
    }

    #ms-match-page
    .mc-detail-grid
    > .mc-panel {
        grid-column: auto;
    }
}

@media (max-width: 600px) {
    #ms-match-page .mc-detail-hero,
    #ms-match-page .mc-panel {
        padding: 18px 15px;
    }

    #ms-match-page
    .mc-detail-grid
    .mc-timeline {
        grid-template-columns: 1fr;
    }

    #ms-match-page .mc-stat-row {
        min-height: 36px;
    }
}


/* MATCHSHOCK_DATA_QUALITY_FRONTEND_CSS_V1 */

.mc-data-quality-warning {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid rgba(245, 158, 11, 0.38);
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.09);
}

.mc-data-quality-warning__icon {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.18);
    font-weight: 800;
}

.mc-data-quality-warning strong {
    display: block;
    margin-bottom: 4px;
}

.mc-data-quality-warning p {
    margin: 0;
    line-height: 1.5;
}

.mc-data-quality-warning small {
    display: block;
    margin-top: 7px;
    opacity: 0.72;
}

@media (max-width: 640px) {
    .mc-data-quality-warning {
        padding: 14px;
    }
}