.live-matches-shell {
    margin: 0 auto;
    max-width: 92rem;
    padding: 0 clamp(.25rem, 1.4vw, 1.35rem) 3rem;
}

.live-matches-hero {
    align-items: end;
    background:
        radial-gradient(circle at 88% 12%, rgba(120, 196, 147, .16), transparent 24rem),
        linear-gradient(135deg, rgba(209, 132, 84, .11), rgba(21, 26, 24, .96) 54%);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .18);
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    min-height: 13rem;
    overflow: hidden;
    padding: clamp(1.5rem, 3vw, 3rem);
    position: relative;
}

.live-matches-hero::after {
    border: 1px solid rgba(215, 180, 106, .13);
    border-radius: 50%;
    content: "";
    height: 15rem;
    position: absolute;
    right: -5rem;
    top: -7rem;
    width: 15rem;
}

.live-matches-hero__copy {
    max-width: 52rem;
    position: relative;
    z-index: 1;
}

.live-matches-eyebrow {
    color: var(--theme-accent-bright);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .13em;
    margin: 0 0 .35rem;
    text-transform: uppercase;
}

.live-matches-hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    line-height: .95;
    margin: 0 0 .8rem;
}

.live-matches-hero__copy > p:last-child {
    color: var(--theme-muted);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.6;
    margin: 0;
    max-width: 46rem;
}

.live-matches-hero__status {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-width: 13rem;
    position: relative;
    z-index: 1;
}

.live-matches-live-pill,
.live-match-state {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-weight: 850;
    gap: .45rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.live-matches-live-pill {
    background: var(--theme-success-soft);
    border: 1px solid rgba(120, 196, 147, .45);
    color: var(--theme-success);
    font-size: .72rem;
    padding: .58rem .8rem;
}

.live-matches-live-pill i,
.live-match-state__dot {
    animation: live-match-pulse 1.6s ease-in-out infinite;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 0 .25rem rgba(120, 196, 147, .12);
    height: .45rem;
    width: .45rem;
}

.live-matches-connection {
    color: var(--theme-faint);
    font-size: .74rem;
}

.live-matches-connection[data-state="connected"] {
    color: var(--theme-success);
}

.live-matches-connection[data-state="retrying"],
.live-matches-connection[data-state="reconnecting"] {
    color: var(--theme-warning);
}

.live-matches-connection[data-state="stopped"] {
    color: var(--theme-danger);
}

.live-matches-toolbar {
    align-items: center;
    border-bottom: 1px solid var(--theme-border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: 1rem 0 1.5rem;
    padding: .4rem 0 1rem;
}

.live-matches-toolbar p {
    color: var(--theme-muted);
    font-size: .82rem;
    margin: 0;
    text-align: right;
}

.live-matches-filters {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    display: inline-flex;
    flex: none;
    padding: .2rem;
}

.live-matches-filters button {
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--theme-muted);
    cursor: pointer;
    font-size: .78rem;
    font-weight: 750;
    padding: .48rem .8rem;
}

.live-matches-filters button:hover,
.live-matches-filters button:focus-visible {
    color: var(--theme-ink);
}

.live-matches-filters button:focus-visible {
    outline: 2px solid var(--theme-focus);
    outline-offset: 2px;
}

.live-matches-filters button.is-active {
    background: var(--theme-surface-raised);
    box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .28);
    color: var(--theme-accent-bright);
}

.live-matches-layout {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.live-matches-layout.has-viewer-panel {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem);
}

.live-matches-board,
.live-match-groups,
.recent-match-cards,
.live-match-group__cards,
.viewer-match-list {
    display: grid;
    gap: .85rem;
}

.live-matches-section--recent {
    margin-top: 2.5rem;
}

.live-matches-section__heading {
    align-items: end;
    display: flex;
    justify-content: space-between;
    margin-bottom: .85rem;
}

.live-matches-section__heading h2,
.viewer-matches-panel h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.65rem;
    margin: 0;
}

.live-matches-section__heading > span {
    color: var(--theme-faint);
    font-size: .75rem;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.live-match-group {
    background: rgba(21, 26, 24, .65);
    border: 1px solid var(--theme-border);
    border-radius: .9rem;
    overflow: hidden;
}

.live-match-group__heading {
    align-items: center;
    background: linear-gradient(90deg, rgba(120, 196, 147, .1), transparent);
    border-bottom: 1px solid var(--theme-border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .85rem 1rem;
}

.live-match-group__title p {
    color: var(--theme-success);
    font-size: .62rem;
    margin-bottom: .16rem;
}

.live-match-group__name {
    font-size: inherit;
    line-height: 1.25;
    margin: 0;
}

.live-match-group__link {
    color: var(--theme-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.04rem;
    font-weight: 700;
}

.live-match-group__count {
    color: var(--theme-success);
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.live-match-group__cards {
    padding: .75rem;
}

.live-match-card {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: .75rem;
    box-shadow: 0 .45rem 1.2rem rgba(0, 0, 0, .12);
    overflow: hidden;
    position: relative;
}

.live-match-card.is-live {
    border-color: rgba(120, 196, 147, .4);
}

.live-match-card.is-viewer-match {
    background: linear-gradient(110deg, rgba(89, 174, 226, .11), var(--theme-surface) 36%);
    box-shadow: inset 4px 0 0 #59aee2, 0 .45rem 1.2rem rgba(0, 0, 0, .16);
}

.live-match-card__meta {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    display: flex;
    gap: .8rem;
    justify-content: space-between;
    padding: .58rem .8rem;
}

.live-match-card__meta-primary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    min-width: 0;
}

.live-match-state {
    font-size: .58rem;
    padding: .3rem .48rem;
}

.live-match-state.is-live {
    background: var(--theme-success-soft);
    color: var(--theme-success);
}

.live-match-state.is-complete {
    background: var(--theme-surface-raised);
    color: var(--theme-muted);
}

.live-match-kind {
    background: var(--theme-accent-soft);
    border-radius: 999px;
    color: var(--theme-accent-bright);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .05em;
    padding: .3rem .48rem;
    text-transform: uppercase;
}

.live-match-draft-link {
    color: var(--theme-muted);
    font-size: .71rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-match-time {
    color: var(--theme-faint);
    flex: none;
    font-size: .68rem;
}

.live-match-card__matchup {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(6rem, auto) minmax(0, 1fr);
    padding: 1rem;
}

.live-match-competitor {
    min-width: 0;
}

.live-match-competitor.is-deck-b {
    text-align: right;
}

.live-match-competitor__identity {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
}

.live-match-competitor.is-deck-b .live-match-competitor__identity,
.live-match-competitor.is-deck-b .live-match-rating {
    justify-content: flex-end;
}

.live-match-deck-name {
    color: var(--theme-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(.95rem, 1.4vw, 1.12rem);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.live-match-competitor.is-winner .live-match-deck-name {
    color: var(--theme-gold);
}

.live-match-viewer-badge {
    background: rgba(89, 174, 226, .16);
    border: 1px solid rgba(89, 174, 226, .4);
    border-radius: 999px;
    color: #8bd0f5;
    font-size: .55rem;
    font-weight: 850;
    letter-spacing: .06em;
    padding: .22rem .38rem;
    text-transform: uppercase;
}

.live-match-rating {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .58rem;
    margin-top: .3rem;
}

.live-match-rating__current {
    color: var(--theme-faint);
    font-size: .68rem;
}

.live-match-rating__change {
    font-size: .7rem;
}

.is-positive {
    color: var(--theme-success);
}

.is-negative {
    color: var(--theme-danger);
}

.is-even {
    color: var(--theme-muted);
}

.live-match-result {
    text-align: center;
}

.live-match-result__score {
    color: var(--theme-ink);
    display: block;
    font-size: 1.28rem;
    letter-spacing: .03em;
    white-space: nowrap;
}

.live-match-card.is-live .live-match-result__score {
    color: var(--theme-success);
    font-size: .82rem;
    letter-spacing: .12em;
}

.live-match-result__detail {
    color: var(--theme-faint);
    display: block;
    font-size: .65rem;
    margin-top: .18rem;
    white-space: nowrap;
}

.live-match-card__warning {
    background: var(--theme-warning-soft);
    border-top: 1px solid rgba(216, 179, 91, .2);
    color: var(--theme-warning);
    font-size: .68rem;
    margin: 0;
    padding: .45rem .8rem;
}

.live-matches-empty {
    background: rgba(21, 26, 24, .7);
    border: 1px dashed var(--theme-border-strong);
    border-radius: .8rem;
    color: var(--theme-muted);
    padding: 1.4rem;
    text-align: center;
}

.viewer-matches-panel {
    align-self: start;
    background: linear-gradient(145deg, rgba(89, 174, 226, .09), var(--theme-surface) 30%);
    border: 1px solid rgba(89, 174, 226, .25);
    border-radius: .9rem;
    padding: 1rem;
    position: sticky;
    top: 5.2rem;
}

.viewer-matches-panel__heading {
    border-bottom: 1px solid var(--theme-border);
    margin-bottom: 1rem;
    padding-bottom: .85rem;
}

.viewer-matches-panel__heading > p:last-child {
    color: var(--theme-muted);
    font-size: .75rem;
    line-height: 1.45;
    margin: .45rem 0 0;
}

.viewer-matches-panel section + section {
    margin-top: 1.15rem;
}

.viewer-matches-panel h3 {
    color: var(--theme-muted);
    font-size: .67rem;
    font-weight: 850;
    letter-spacing: .1em;
    margin: 0 0 .5rem;
    text-transform: uppercase;
}

.viewer-match-card {
    background: rgba(255, 255, 255, .028);
    border: 1px solid var(--theme-border);
    border-radius: .6rem;
    padding: .7rem;
}

.viewer-match-card.is-live {
    border-color: rgba(120, 196, 147, .38);
    box-shadow: inset 3px 0 0 var(--theme-success);
}

.viewer-match-card__top,
.viewer-match-card__result {
    align-items: center;
    display: flex;
    gap: .6rem;
    justify-content: space-between;
}

.viewer-match-card__state {
    color: var(--theme-accent-bright);
    font-size: .68rem;
}

.viewer-match-card.is-live .viewer-match-card__state {
    color: var(--theme-success);
}

.viewer-match-card__time {
    color: var(--theme-faint);
    font-size: .62rem;
}

.viewer-match-card__matchup {
    color: var(--theme-muted);
    font-size: .75rem;
    line-height: 1.35;
    margin: .4rem 0;
}

.viewer-match-card__matchup a {
    color: var(--theme-ink);
    font-weight: 750;
}

.viewer-match-card__result {
    color: var(--theme-muted);
    font-size: .68rem;
    margin: 0;
}

.viewer-match-card__delta {
    font-size: .7rem;
}

.viewer-match-card__draft {
    border-top: 1px solid rgba(255, 255, 255, .05);
    color: var(--theme-faint);
    display: block;
    font-size: .62rem;
    margin-top: .55rem;
    overflow: hidden;
    padding-top: .45rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewer-match-empty {
    color: var(--theme-faint);
    font-size: .71rem;
    line-height: 1.45;
    padding: .45rem .1rem;
}

.viewer-matches-panel__history {
    border-top: 1px solid var(--theme-border);
    display: block;
    font-size: .75rem;
    font-weight: 750;
    margin-top: 1.15rem;
    padding-top: .85rem;
}

@keyframes live-match-pulse {
    0%, 100% { opacity: .65; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.12); }
}

@media (max-width: 991.98px) {
    .live-matches-layout.has-viewer-panel {
        grid-template-columns: 1fr;
    }

    .viewer-matches-panel {
        grid-row: 1;
        position: static;
    }

    .viewer-matches-panel section {
        display: inline-block;
        vertical-align: top;
        width: calc(50% - .55rem);
    }

    .viewer-matches-panel section + section {
        margin-left: .75rem;
        margin-top: 0;
    }
}

@media (max-width: 767.98px) {
    .live-matches-hero {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0;
    }

    .live-matches-hero__status {
        align-items: flex-start;
    }

    .live-matches-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .live-matches-toolbar p {
        text-align: left;
    }

    .live-match-card__meta {
        align-items: flex-start;
        flex-direction: column;
        gap: .45rem;
    }
}

@media (max-width: 575.98px) {
    .live-matches-shell {
        padding-inline: 0;
    }

    .live-matches-hero {
        border-radius: .75rem;
        padding: 1.3rem;
    }

    .live-match-card__matchup {
        grid-template-columns: 1fr;
    }

    .live-match-result {
        border-bottom: 1px solid rgba(255, 255, 255, .055);
        border-top: 1px solid rgba(255, 255, 255, .055);
        padding: .55rem 0;
    }

    .live-match-competitor.is-deck-b {
        text-align: left;
    }

    .live-match-competitor.is-deck-b .live-match-competitor__identity,
    .live-match-competitor.is-deck-b .live-match-rating {
        justify-content: flex-start;
    }

    .viewer-matches-panel section {
        display: block;
        width: 100%;
    }

    .viewer-matches-panel section + section {
        margin-left: 0;
        margin-top: 1.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-matches-live-pill i,
    .live-match-state__dot {
        animation: none;
    }
}