:root {
    --bg: #0f1115;
    --panel: #15181e;
    --panel-2: #1b1f26;
    --line: #262b33;
    --text: #e7e9ee;
    --muted: #9aa3ad;
    --accent: #ff7a1a;
    --accent-2: #2bd68f;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

header {
    background: #0c0c0c;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-row {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 16px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

header .logo {
    color: #fff !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

header .logo img {
    width: 28px;
    height: 28px;
}

header .logo h1 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

header .nav-pills {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

header .nav-link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.event-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 14px 40px;
}

.stats-navigation .btn-back-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 14px;
}

.event-hero {
    background: var(--panel);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
}

.event-competition {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    text-decoration: none;
    color: inherit;
}

.event-league {
    font-size: 16px;
    font-weight: 700;
}

.event-country {
    color: var(--muted);
    font-size: 13px;
}

.event-competition-link {
    cursor: pointer;
}

.competition-logo {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.competition-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.competition-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.event-scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.team-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.team-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-logo img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.team-name {
    font-weight: 700;
    text-align: center;
}

.score-block {
    min-width: 120px;
    text-align: center;
}

.score {
    font-size: 28px;
    font-weight: 800;
}

.penalty {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    margin-top: 4px;
}

.penalty.is-empty {
    display: none;
}

.status {
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px;
}

.status.live {
    color: var(--accent-2);
    font-weight: 700;
}

.event-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.event-tabs .tab {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
}

.event-tabs .tab.active {
    background: #fff;
    color: #111;
    border-color: transparent;
}

.event-content {
    display: block;
}

.tab-panel {
    display: none;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
}

.tab-panel.active {
    display: block;
}

.panel-loading,
.panel-empty {
    text-align: center;
    color: var(--muted);
    padding: 18px 0;
}

.summary-row {
    display: grid;
    grid-template-columns: 64px 1fr 90px 1fr;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
}

.summary-time-col {
    color: var(--muted);
    font-weight: 700;
    font-size: 12px;
    text-align: left;
}

.summary-row.hockey .summary-middle {
    text-align: center;
}

.summary-row.hockey .summary-score {
    margin-top: 0;
}

.summary-row.hockey .summary-side {
    font-size: 13px;
}

.summary-body {
    background: transparent;
}

.summary-row:last-child {
    border-bottom: none;
}

.summary-middle {
    text-align: center;
}

.summary-time {
    color: var(--muted);
    font-weight: 700;
    font-size: 12px;
}

.summary-score {
    font-weight: 600;
    margin-top: 4px;
}

.summary-side {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.summary-side.left {
    justify-content: flex-start;
    text-align: left;
}

.summary-side.right {
    justify-content: flex-end;
    text-align: right;
}

.summary-side.left .summary-content {
    justify-content: flex-end;
}

.summary-side.left .summary-texts {
    align-items: flex-end;
    text-align: right;
}

.summary-row {
    position: relative;
}

.summary-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.summary-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-name {
    font-weight: 500;
}

.summary-label {
    font-weight: 700;
    color: var(--text);
    font-size: 12px;
    white-space: nowrap;
}

.summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #0f1218;
    background: transparent;
    flex-shrink: 0;
}

.summary-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.summary-icon.goal {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: transparent;
}

.summary-icon.goal.missed {
    opacity: 0.5;
}

.summary-icon.card {
    width: 12px;
    height: 16px;
    background: transparent;
}

.summary-icon.card.yellow,
.summary-icon.card.red,
.summary-icon.card.red-yellow {
    background: transparent;
}

.summary-icon.var {
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 3px;
    background: transparent;
    color: #fff;
    letter-spacing: 0.04em;
}

.summary-icon.var svg {
    width: 28px;
    height: 14px;
}

.summary-icon.sub {
    width: 16px;
    height: 16px;
    background: transparent;
    border-radius: 50%;
}

/* PEN badge for penalty goals */
.summary-badge.pen,
.summary-badge.pen-miss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    margin-left: 4px;
    letter-spacing: 0.02em;
}

.summary-badge.pen-miss {
    opacity: 0.6;
    text-decoration: line-through;
}

.summary-assist {
    font-size: 12px;
    color: var(--muted);
}

.summary-side.right .summary-content {
    justify-content: flex-end;
}

.summary-side.right .summary-texts {
    align-items: flex-end;
}

.summary-side.left .summary-content {
    justify-content: flex-start;
}

.summary-side.left .summary-texts {
    align-items: flex-start;
}

.tennis-sets {
    margin-top: 18px;
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.tennis-sets-header,
.tennis-sets-row {
    display: grid;
    grid-template-columns: repeat(var(--set-count, 3), minmax(18px, 1fr)) 54px;
    gap: 10px;
    align-items: center;
    justify-items: end;
}

.tennis-sets-header {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 8px 6px;
}

.tennis-sets-row {
    font-size: 13px;
    font-weight: 700;
    padding: 6px 8px;
    border-top: 1px solid var(--line);
}

.tennis-sets-row span {
    min-width: 18px;
    text-align: right;
}

.tennis-sets-total {
    min-width: 46px;
    text-align: right;
}

.tennis-sets-row sup {
    font-size: 0.65em;
    vertical-align: super;
    margin-left: 1px;
}

.tennis-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tennis-summary-row {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}

.tennis-summary-time {
    display: inline-block;
    min-width: 44px;
    margin-right: 8px;
    color: var(--muted);
    font-weight: 600;
}

.commentary-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
}

.commentary-time {
    color: var(--muted);
    font-weight: 700;
    font-size: 13px;
}

.commentary-text {
    color: var(--text);
    line-height: 1.5;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.info-card {
    background: var(--panel-2);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
}

.info-label {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 6px;
}

.info-value {
    font-weight: 700;
}

.stat-row {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.stat-values {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.stat-label {
    text-align: center;
    color: var(--muted);
    font-weight: 600;
}

.stat-bar {
    margin-top: 8px;
    height: 6px;
    background: #2a2f36;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.stat-bar.split::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    transform: translateX(-2px);
    background: #0f1115;
}

.stat-bar-home {
    position: absolute;
    right: 50%;
    top: 0;
    bottom: 0;
    background: #ff4d4d;
}

.stat-bar-away {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    background: #3b82f6;
}

.lineups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.lineups-title {
    font-weight: 700;
    margin-bottom: 10px;
}

.lineups-section {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
}

.lineups-player {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lineups-player:last-child {
    border-bottom: none;
}

.lineups-subtitle {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 6px;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-filters,
.h2h-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.table-filter,
.h2h-tab {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
}

.table-filter.active,
.h2h-tab.active {
    background: #fff;
    color: #111;
    border-color: transparent;
}

.table-head,
.table-row {
    display: grid;
    grid-template-columns: 28px 1.6fr repeat(8, 36px);
    gap: 6px;
    align-items: center;
    padding: 8px 0;
    min-width: 680px;
}

.table-head {
    color: var(--muted);
    font-weight: 700;
    border-bottom: 1px solid var(--line);
}

.table-row {
    border-bottom: 1px solid var(--line);
}

.table-row:last-child {
    border-bottom: none;
}

@media (max-width: 768px) {
    .table-head,
    .table-row {
        grid-template-columns: 24px 1.4fr repeat(8, 28px);
        min-width: 0;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .table-head,
    .table-row {
        grid-template-columns: 22px 1.2fr repeat(8, 24px);
        min-width: 0;
        font-size: 11px;
    }
}

.table-team {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.team-badge img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.table-head.form,
.table-row.form {
    grid-template-columns: 28px 1.4fr 1fr;
}

.table-form {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.form-pill {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    background: #2b2b2b;
    color: #fff;
}

.form-pill.w { background: #19d38e; color: #0b1c13; }
.form-pill.d { background: #9b9b9b; color: #111; }
.form-pill.l { background: #ff4d4d; color: #fff; }

.h2h-section {
    margin-bottom: 16px;
}

.h2h-stage {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.h2h-stage-name {
    font-weight: 700;
}

.h2h-stage-country {
    color: var(--muted);
    font-size: 12px;
}

.h2h-row {
    display: grid;
    grid-template-columns: 120px 1fr 60px 40px;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.h2h-row:last-child {
    border-bottom: none;
}

.h2h-meta {
    display: grid;
    gap: 4px;
}

.h2h-date,
.h2h-status {
    color: var(--muted);
    font-size: 12px;
}

.h2h-status {
    text-align: left;
}

.h2h-score {
    text-align: center;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.h2h-teams {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.h2h-result {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

.h2h-result.w { background: #19d38e; color: #0b1c13; }
.h2h-result.l { background: #ff4d4d; color: #fff; }
.h2h-result.d { background: #ff9f2d; color: #111; }
.h2h-result.empty { background: transparent; border: 1px solid transparent; }

.lineups-section {
    margin-bottom: 16px;
}

.lineups-title {
    font-weight: 700;
    margin-bottom: 8px;
}

.lineups-list {
    display: grid;
    gap: 6px;
}

.lineups-player {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-number {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

.lineups-subtitle {
    color: var(--muted);
    font-weight: 700;
    margin: 12px 0 8px;
}

.pitch {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 13;
    max-height: 70vh;
    border-radius: 16px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(12, 18, 28, 0.65), rgba(12, 18, 28, 0.55)),
        url("/assets/ground/football%20pictch.jpg") center / cover no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pitch::before,
.pitch::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 38%;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    pointer-events: none;
}

.pitch::before {
    top: 4%;
}

.pitch::after {
    bottom: 4%;
}

.pitch-badge {
    position: absolute;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(8, 12, 20, 0.65);
    color: #f1f5ff;
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
}

.pitch-badge.top-left {
    top: 10px;
    left: 10px;
}

.pitch-badge.bottom-right {
    bottom: 10px;
    right: 10px;
}

.pitch::after {
    box-shadow: 0 -2px 0 rgba(255, 255, 255, 0.22) inset;
}

.pitch::before {
    box-shadow: 0 2px 0 rgba(255, 255, 255, 0.22) inset;
}

.pitch::marker {
    display: none;
}

.pitch::backdrop {
    display: none;
}

.pitch-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-weight: 700;
    color: #eaf2ff;
}

.pitch-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 800;
    color: #eaf2ff;
}

.pitch-player {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 120px;
    text-align: center;
}

.pitch-player.home .pitch-number {
    background: rgba(18, 18, 18, 0.9);
    color: #fff;
}

.pitch-player.away .pitch-number {
    background: #fff;
    color: #0b0f16;
}

.pitch-number {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.pitch-name {
    font-size: 11px;
    font-weight: 600;
    color: #f7fbff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    line-height: 1.1;
}

@media (max-width: 768px) {
    .pitch {
        aspect-ratio: 9 / 14;
    }
    .pitch-player {
        max-width: 90px;
    }
    .pitch-number {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
    .pitch-name {
        font-size: 10px;
    }

    .pitch {
        max-height: 60vh;
    }

    .pitch-badge {
        font-size: 11px;
        padding: 5px 8px;
    }

    .lineups-grid.split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .lineups-subrow {
        grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px;
        font-size: 12px;
    }

    .lineups-subrow.stack {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .lineups-subrow.simple {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .lineups-subrow.reason {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .lineups-team-header,
    .lineups-subtitle {
        font-size: 12px;
    }

    .lineups-list .lineups-player span:last-child {
        font-size: 12px;
    }

    .sub-icon {
        display: none;
    }

    .sub-number {
        width: 24px;
        height: 24px;
        font-size: 10px;
        flex-basis: 24px;
    }

    .sub-arrow {
        width: 14px;
        height: 14px;
        font-size: 10px;
        flex-basis: 14px;
    }
}

@media (max-width: 520px) {
    .pitch-player {
        max-width: 72px;
        gap: 2px;
    }
    .pitch-number {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }
    .pitch-name {
        font-size: 9px;
    }

    .pitch {
        max-height: 55vh;
    }

    .pitch-badge {
        font-size: 10px;
        padding: 4px 6px;
    }

    .lineups-grid.split {
        gap: 8px;
    }

    .lineups-subrow {
        grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr);
        gap: 4px;
        font-size: 11px;
    }

    .lineups-subrow.stack {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .lineups-subrow.simple {
        grid-template-columns: 26px minmax(0, 1fr);
    }

    .sub-time {
        font-size: 11px;
    }

    .sub-icon {
        display: none;
    }

    .sub-number {
        width: 22px;
        height: 22px;
        font-size: 9px;
        flex-basis: 22px;
    }

    .sub-arrow {
        width: 12px;
        height: 12px;
        font-size: 9px;
        flex-basis: 12px;
    }
}

@media (max-width: 420px) {
    .pitch-name {
        display: none;
    }

    .pitch-badge {
        font-size: 9px;
        padding: 3px 5px;
    }

    .lineups-grid.split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .lineups-subrow {
        grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr);
        font-size: 10px;
    }

    .lineups-subrow.stack {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .lineups-subrow.simple {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .sub-icon {
        display: none;
    }

    .sub-number {
        width: 20px;
        height: 20px;
        font-size: 9px;
        flex-basis: 20px;
    }

    .sub-arrow {
        width: 10px;
        height: 10px;
        font-size: 8px;
        flex-basis: 10px;
    }
}

.lineups-team-header {
    font-weight: 700;
    margin-bottom: 6px;
}

.lineups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.lineups-grid.single {
    grid-template-columns: 1fr;
}

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

.lineups-subrow {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}

.lineups-subrow.stack {
    grid-template-columns: 44px minmax(0, 1fr);
}

.lineups-subrow.simple {
    grid-template-columns: 36px minmax(0, 1fr);
}

.lineups-subrow.reason {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.lineups-injury {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.lineups-injury-name {
    font-weight: 600;
}

.lineups-injury-header {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 6px;
}

.lineups-injury-grid {
    display: grid;
    gap: 6px;
}

.lineups-injury-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}

.lineups-injury-row:last-child {
    border-bottom: none;
}

.lineups-injury.empty {
    color: var(--muted);
}

.lineups-injury .lineups-meta.reason {
    margin-left: 0;
    text-align: left;
}

.lineups-subrow:last-child {
    border-bottom: none;
}

.sub-time {
    color: var(--muted);
    font-weight: 700;
    font-size: 12px;
}

.sub-out {
    color: #ff5a7a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
}

.sub-in {
    font-weight: 700;
    color: #2dd889;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
    text-align: left;
}

.sub-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lineups-subrow.stack .sub-out,
.lineups-subrow.stack .sub-in {
    justify-content: flex-start;
    text-align: left;
}

.sub-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 16px;
}

.sub-arrow.out {
    background: rgba(255, 90, 122, 0.2);
    color: #ff5a7a;
}

.sub-arrow.in {
    background: rgba(45, 216, 137, 0.2);
    color: #2dd889;
}

.sub-icon {
    display: none;
}

.sub-icon.out {
    background: transparent;
    color: inherit;
}

.sub-icon.in {
    background: transparent;
    color: inherit;
}

.sub-number {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    color: #eaf2ff;
    flex: 0 0 28px;
}

.lineups-meta {
    color: var(--muted);
    font-size: 12px;
    margin-left: 8px;
    min-width: 26px;
    text-align: right;
}

.lineups-meta.reason {
    color: #9aa7b2;
    text-align: right;
}

.lineups-list .lineups-player span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .event-scoreboard {
        grid-template-columns: 1fr auto 1fr;
        gap: 10px;
    }

    .team-logo {
        width: 56px;
        height: 56px;
    }

    .team-logo img {
        width: 40px;
        height: 40px;
    }

    .commentary-row {
        grid-template-columns: 56px 1fr;
    }

    .table-head,
    .table-row {
        grid-template-columns: 24px 1.4fr repeat(8, 28px);
        min-width: 680px;
    }

    .h2h-row {
        grid-template-columns: 100px 1fr 50px 34px;
    }
}

@media (max-width: 600px) {
    .h2h-row {
        grid-template-columns: 96px 1fr 52px 32px;
        align-items: center;
        gap: 8px;
    }

    .h2h-status {
        text-align: left;
    }

    .h2h-teams {
        display: grid;
        gap: 6px;
        font-size: 13px;
    }

    .h2h-score {
        justify-self: end;
    }

    .h2h-result {
        width: 28px;
        height: 28px;
    }

    .h2h-teams .team-badge {
        width: 18px;
        height: 18px;
    }

    .h2h-teams .team-badge img {
        width: 14px;
        height: 14px;
    }

    .tennis-sets-header,
    .tennis-sets-row {
        gap: 6px;
    }

    .tennis-sets-header {
        font-size: 11px;
    }

    .tennis-sets-row {
        font-size: 12px;
    }

    .tennis-sets-total {
        min-width: 36px;
    }

    .tennis-summary-row {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .event-page {
        padding: 12px 10px 32px;
    }

    .team-logo {
        width: 52px;
        height: 52px;
    }

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

    .score {
        font-size: 24px;
    }

    .event-tabs .tab {
        padding: 6px 10px;
        font-size: 12px;
    }

    .tennis-sets-header,
    .tennis-sets-row {
        gap: 4px;
    }

    .tennis-sets-header {
        font-size: 10px;
    }

    .tennis-sets-row {
        font-size: 11px;
    }

    .tennis-sets-total {
        min-width: 32px;
    }
}

/* Odds Markets */
.odds-markets {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px;
}

.odds-market {
    background: var(--panel-2);
    border-radius: 8px;
    overflow: hidden;
}

.odds-market.suspended {
    opacity: 0.7;
}

.odds-market-header {
    background: var(--panel);
    padding: 10px 14px;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid var(--line);
}

.odds-market-header .suspended-label {
    color: #fff;
    font-weight: 400;
    font-size: 12px;
}

.odds-selections {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--line);
}

.odds-selection {
    flex: 1 1 calc(33.333% - 1px);
    min-width: 120px;
    background: var(--panel-2);
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.odds-selection.suspended {
    opacity: 0.6;
}

.selection-name {
    font-size: 13px;
    color: var(--muted);
    flex: 1;
}

.selection-odds {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    min-width: 60px;
    text-align: right;
}

.odds-selection.suspended .selection-odds {
    color: #fff;
    font-size: 12px;
}

@media (max-width: 600px) {
    .odds-selection {
        flex: 1 1 calc(50% - 1px);
        min-width: 100px;
        padding: 10px 12px;
    }

    .selection-name {
        font-size: 12px;
    }

    .selection-odds {
        font-size: 13px;
        min-width: 50px;
    }
}

@media (max-width: 400px) {
    .odds-selection {
        flex: 1 1 100%;
    }
}