/* MatchMaking's map-art cards and cockpit, scoped to the series workspace.
   1240px canvas: 3 × 400px cards + 2 × 20px gutters = 1240px. */
main.tseries {
    --tp-bg: #111113;
    --tp-panel: #1c1b1f;
    --tp-ink: #f7f6fa;
    --tp-muted: #b8b5c1;
    --tp-line: #35333b;
    --tp-accent: #dfbf84;
    --ts-accent-fill: #79531d;
    --ts-blue: #86baff;
    --ts-red: #ffa7ad;
    --ts-raised: #252429;
    padding: 36px 24px 64px;
    font-size: 14px;
}

main.tseries[data-kind='cup'] {
    --tp-accent: #85dbc2;
    --ts-accent-fill: #08705f;
}

html[data-theme='light'] main.tseries {
    --tp-bg: #f7f5f0;
    --tp-panel: #ffffff;
    --tp-ink: #1d1b20;
    --tp-muted: #635f66;
    --tp-line: #dedbd5;
    --tp-accent: #79531d;
    --ts-raised: #f0e9d9;
}

html[data-theme='light'] main.tseries[data-kind='cup'] {
    --tp-bg: #f2f8f6;
    --tp-accent: #08705f;
    --ts-raised: #e4f3ec;
}

@media (prefers-color-scheme: light) {
    html:not([data-theme='dark']):not([data-theme='light']) main.tseries {
        --tp-bg: #f7f5f0;
        --tp-panel: #ffffff;
        --tp-ink: #1d1b20;
        --tp-muted: #635f66;
        --tp-line: #dedbd5;
        --tp-accent: #79531d;
        --ts-raised: #f0e9d9;
    }

    html:not([data-theme='dark']):not([data-theme='light']) main.tseries[data-kind='cup'] {
        --tp-bg: #f2f8f6;
        --tp-accent: #08705f;
        --ts-raised: #e4f3ec;
    }
}

main.tseries .ts-page-head,
main.tseries .ts-section-head,
main.tseries .ts-series-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

main.tseries .ts-page-head {
    margin-bottom: 24px;
    align-items: flex-start;
}

main.tseries .ts-competition {
    color: var(--tp-accent);
    font-weight: 600;
    display: inline-block;
    margin-bottom: 4px;
}

main.tseries h1 {
    font-family: var(--font-family-chakra, 'Chakra Petch', sans-serif);
    font-size: 28px;
    line-height: 1.2;
    margin: 4px 0 8px;
}

main.tseries .ts-page-head p,
main.tseries .ts-score-note {
    margin: 8px 0 0;
    color: var(--tp-muted);
}

main.tseries .tp-refresh {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    flex-shrink: 0;
    color: var(--tp-muted);
    font-size: 12px;
}

main.tseries .tp-refresh button {
    min-height: 40px;
    padding: 8px 16px;
    background: var(--tp-panel);
    border: 1px solid var(--tp-line);
    color: var(--tp-ink);
    font-weight: 600;
}

main.tseries .tp-refresh button:disabled {
    cursor: default;
}

main.tseries .tp-refresh [data-refresh-countdown] {
    margin-left: 8px;
    color: var(--tp-muted);
    font-variant-numeric: tabular-nums;
}

main.tseries .ts-series {
    padding: 20px 24px;
    background: var(--tp-panel);
    border-top: 3px solid var(--tp-accent);
    margin-bottom: 24px;
}

main.tseries .ts-series-meta {
    flex-wrap: wrap;
    color: var(--tp-muted);
    justify-content: flex-start;
    font-size: 13px;
}

main.tseries .ts-status {
    font-weight: 600;
    color: var(--tp-ink);
    padding: 4px 8px;
    background: var(--ts-raised);
}

main.tseries .ts-status.is-live {
    color: var(--tp-accent);
}

main.tseries .ts-series-score {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: 32px;
    padding: 28px 0 20px;
}

main.tseries .ts-team-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
}

main.tseries .ts-team-heading img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

main.tseries .ts-team-heading h2 {
    font-family: var(--font-family-chakra, 'Chakra Petch', sans-serif);
    font-size: 22px;
    line-height: 1.3;
    margin: 0;
    overflow-wrap: anywhere;
}

main.tseries .ts-team.is-red .ts-team-heading {
    flex-direction: row-reverse;
    text-align: right;
}

main.tseries .ts-series-total {
    display: flex;
    gap: 16px;
    align-items: center;
    line-height: 48px;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-family-chakra, 'Chakra Petch', sans-serif);
}

main.tseries .ts-series-total strong {
    font-size: 40px;
    font-weight: 700;
}

main.tseries .ts-series-total > span {
    color: var(--tp-muted);
    font-size: 24px;
}

main.tseries .ts-roster {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

main.tseries .ts-team.is-red .ts-roster {
    justify-content: flex-end;
}

main.tseries .ts-roster li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

main.tseries .ts-roster img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    flex-shrink: 0;
}

main.tseries .ts-team-pending {
    color: var(--tp-muted);
}

main.tseries .ts-team.is-red .ts-team-pending {
    text-align: right;
}

main.tseries .ts-cockpit {
    background: var(--tp-panel);
    color: var(--tp-ink);
    margin-bottom: 24px;
}

/* B2: two team wings, a connection band, then a horizontal preparation rail. */
main.tseries .mmc-cockpit-grid {
    display: grid;
    min-width: 0;
}

main.tseries .ts-presence {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 28px 0;
}

main.tseries .ts-presence-team {
    display: grid;
    gap: 20px;
    min-width: 0;
    padding: 0 28px;
}

main.tseries .ts-presence-team + .ts-presence-team {
    border-left: 1px solid var(--tp-line);
}

main.tseries .ts-presence-heading,
main.tseries .ts-presence-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

main.tseries .ts-presence-heading {
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 8px;
    border-left: 3px solid var(--tp-accent);
    padding-left: 16px;
}

main.tseries .ts-presence-identity {
    flex-wrap: wrap;
    gap: 4px 14px;
}

main.tseries .ts-presence-name {
    margin: 0;
    font-family: var(--font-family-chakra, 'Chakra Petch', sans-serif);
    font-size: clamp(22px, 2.2vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

main.tseries .ts-presence-label,
main.tseries .ts-slot-label,
main.tseries .ts-connected {
    font-family: var(--font-family-chakra, 'Chakra Petch', sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tp-muted);
}

main.tseries .ts-connected {
    color: var(--tp-accent);
    font-variant-numeric: tabular-nums;
}

main.tseries .ts-player-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

main.tseries .ts-player-slot {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid var(--tp-line);
    color: var(--tp-muted);
    background: var(--tp-bg);
}

main.tseries .ts-player-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

main.tseries .ts-player-tag {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 4px 7px;
    background: transparent;
    color: #f8f7fa;
    --mp-default: #f8f7fa;
    font-size: clamp(11px, 1.2vw, 16px);
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Photo labels retain the dark-surface ManiaPlanet colors in every page theme. */
main.tseries .ts-player-tag .mp-col {
    color: var(--mc-d, #f8f7fa) !important;
}

main.tseries .ts-player-slot svg {
    width: 68%;
    height: 68%;
    fill: currentColor;
    opacity: .22;
}

main.tseries .ts-player-slot.is-filled {
    border-color: var(--tp-accent);
    color: var(--tp-accent);
    background: var(--ts-raised);
}

main.tseries .ts-player-slot.is-filled svg {
    opacity: .85;
}

main.tseries .ts-player-slot.is-unknown {
    border-style: dashed;
}

main.tseries .ts-player-slot.is-unknown svg {
    opacity: .12;
}

main.tseries .ts-slot-label {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

main.tseries .ts-connection-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    background: var(--ts-raised);
}

main.tseries .mmc-cockpit-identity {
    position: relative;
    min-width: 0;
    padding-left: 58px;
}

main.tseries .mmc-cockpit-identity::before {
    content: '…';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 2px solid var(--tp-accent);
    color: var(--tp-accent);
    font-size: 24px;
    line-height: 1;
}

main.tseries .ts-connection-band:has([data-current-join]) .mmc-cockpit-identity::before {
    content: '✓';
}

main.tseries .mmc-cockpit-identity h2 {
    font-family: var(--font-family-chakra, 'Chakra Petch', sans-serif);
    font-size: 22px;
    line-height: 1.25;
    text-transform: uppercase;
    margin: 0;
}

main.tseries .mmc-cockpit-identity p {
    margin: 8px 0 0;
    color: var(--tp-muted);
    line-height: 1.5;
}

main.tseries .mmc-cockpit-action {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 35%;
}

main.tseries .mmc-cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 16px 32px;
    font-family: var(--font-family-chakra, 'Chakra Petch', sans-serif);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--ts-accent-fill);
    color: #fff;
}

main.tseries .mmc-cta:hover {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.15);
}

main.tseries .ts-connection-state {
    font-weight: 600;
    color: var(--tp-muted);
    margin: 0;
}

main.tseries .mmc-cockpit-rail {
    min-width: 0;
    overflow-x: auto;
    padding: 22px 28px;
}

main.tseries .mmc-cockpit-rail:focus-visible {
    outline: 2px solid var(--tp-accent);
    outline-offset: -2px;
}

main.tseries .mmc-cockpit-rail > ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    min-width: 760px;
    list-style: none;
    margin: 0;
    padding: 0;
}

main.tseries .mmc-cockpit-rail > ol > li {
    position: relative;
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    color: var(--tp-muted);
}

main.tseries .mmc-cockpit-rail > ol > li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 11px;
    right: -16px;
    width: 12px;
    border-top: 1px solid var(--tp-line);
}

main.tseries .ts-step-mark {
    width: 23px;
    height: 23px;
    border: 1px solid var(--tp-muted);
    display: grid;
    place-items: center;
    line-height: 1;
    font-weight: 700;
}

main.tseries .ts-step-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.4;
}

main.tseries .ts-step-copy strong {
    font-family: var(--font-family-chakra, 'Chakra Petch', sans-serif);
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

main.tseries .mmc-rail-sub {
    font-size: 12px;
    line-height: 1.5;
}

main.tseries .mmc-rail-step.is-done .ts-step-mark {
    border-color: var(--ts-accent-fill);
    background: var(--ts-accent-fill);
    color: #fff;
}

main.tseries .mmc-rail-step.is-active .ts-step-mark {
    border: 4px solid var(--tp-accent);
}

main.tseries .mmc-rail-step.is-active .ts-step-copy strong {
    color: var(--tp-ink);
}

main.tseries .mmc-rail-step.is-blocked .ts-step-mark {
    color: var(--tp-ink);
    border-color: var(--tp-ink);
}

main.tseries .ts-substeps {
    display: grid;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}

main.tseries .ts-substep {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    line-height: 1.5;
}

main.tseries .ts-substep-mark {
    flex: 0 0 12px;
    color: var(--tp-muted);
    font-weight: 700;
}

main.tseries .ts-substep.is-done .ts-substep-mark,
main.tseries .ts-substep.is-active {
    color: var(--tp-accent);
}

main.tseries [data-current-join][aria-disabled='true'] {
    cursor: default;
    filter: none;
}

main.tseries .ts-section-head {
    margin: 28px 0 16px;
}

main.tseries .ts-section-head h2 {
    margin: 0;
    font-family: var(--font-family-chakra, 'Chakra Petch', sans-serif);
    font-size: 22px;
}

main.tseries .ts-section-head > span {
    color: var(--tp-muted);
    font-size: 13px;
}

main.tseries .ts-map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: 20px;
}

main.tseries .mmc-tile {
    position: relative;
    overflow: hidden;
    min-height: 248px;
    display: flex;
    flex-direction: column;
    background: #1c1b1f;
    color: #f8f7fa;
    border: 1px solid #45424c;
    --mp-default: #f8f7fa;
}

main.tseries .mmc-tile.is-current {
    border-top: 3px solid var(--tp-accent);
}

main.tseries .mmc-tile-art,
main.tseries .mmc-tile-shade {
    position: absolute;
    inset: 0;
}

main.tseries .mmc-tile-art {
    background-position: center;
    background-size: cover;
}

main.tseries .mmc-tile-shade {
    background: rgba(12, 12, 16, .48);
}

main.tseries .mmc-tile > :not(.mmc-tile-art, .mmc-tile-shade) {
    position: relative;
    z-index: 1;
}

main.tseries .mmc-tile-top,
main.tseries .mmc-tile-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    font-size: 12px;
}

main.tseries .mmc-tile-status {
    font-weight: 600;
}

main.tseries .mmc-tile-status.is-live {
    color: #93e2c5;
}

main.tseries .mmc-tile-status.is-current {
    color: #f2d7a7;
}

main.tseries .mmc-tile-mode {
    color: #d0cdd7;
}

main.tseries .ts-map-name {
    font-family: var(--font-family-chakra, 'Chakra Petch', sans-serif);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    padding: 8px 16px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

main.tseries .mmc-tile-score {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 16px 20px;
}

main.tseries .mmc-tile-team-label {
    font-family: var(--font-family-chakra, 'Chakra Petch', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

main.tseries .mmc-tile-team.is-blue {
    text-align: right;
}

main.tseries .mmc-tile-team.is-red {
    text-align: left;
}

main.tseries .mmc-tile-versus {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, .45);
    font-family: var(--font-family-chakra, 'Chakra Petch', sans-serif);
    font-variant-numeric: tabular-nums;
}

main.tseries .mmc-tile-versus-num {
    font-size: 28px;
    font-weight: 700;
}

main.tseries .mmc-tile-versus-num.is-blue {
    color: var(--ts-blue);
}

main.tseries .mmc-tile-versus-num.is-red {
    color: var(--ts-red);
}

main.tseries .mmc-tile-versus-dash {
    color: #c3becb;
}

main.tseries .mmc-tile-bottom {
    background: rgba(0, 0, 0, .12);
    flex-wrap: wrap;
    justify-content: flex-end;
}

main.tseries .mmc-tile-link {
    font-weight: 600;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}

main.tseries .mmc-tile-link:hover {
    color: #fff;
}

main.tseries .mmc-tile-bottom:has(.mmc-tile-link) {
    position: static;
}

main.tseries .mmc-tile-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
}

main.tseries .mmc-tile:has(.mmc-tile-link):hover {
    border-color: var(--tp-accent);
}

main.tseries .mmc-tile:has(.mmc-tile-link:focus-visible) {
    outline: 2px solid var(--tp-accent);
    outline-offset: 3px;
}

/* Map artwork remains dark in both themes, including safe ManiaPlanet colors. */
html[data-theme='light'] main.tseries .mmc-tile .mp-col {
    color: var(--mc-d, #f8f7fa) !important;
}

@media (prefers-color-scheme: light) {
    html:not([data-theme='dark']):not([data-theme='light']) main.tseries .mmc-tile .mp-col {
        color: var(--mc-d, #f8f7fa) !important;
    }
}

main.tseries .ts-empty {
    padding: 24px;
    background: var(--tp-panel);
}

main.tseries .ts-empty h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

main.tseries .ts-empty p {
    margin: 0;
    color: var(--tp-muted);
}

@media (max-width: 800px) {
    main.tseries .ts-presence-team {
        padding: 0 20px;
    }

    main.tseries .ts-player-slots {
        gap: 12px;
    }

    main.tseries .ts-connection-band {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    main.tseries .mmc-cockpit-action {
        max-width: 100%;
        margin-left: 58px;
    }
}

@media (max-width: 640px) {
    main.tseries {
        padding: 24px 16px 48px;
    }

    main.tseries h1 {
        font-size: 24px;
    }

    main.tseries .ts-page-head {
        flex-direction: column;
    }

    main.tseries .tp-refresh {
        align-items: flex-start;
    }

    main.tseries .tp-refresh button,
    main.tseries .mmc-tile-link {
        min-height: 44px;
    }

    main.tseries .ts-series {
        padding: 16px;
    }

    main.tseries .ts-series-score {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 12px;
        padding: 24px 0 12px;
    }

    main.tseries .ts-team-heading,
    main.tseries .ts-team.is-red .ts-team-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    main.tseries .ts-team.is-red .ts-team-heading {
        align-items: flex-end;
    }

    main.tseries .ts-team-heading h2 {
        font-size: 18px;
    }

    main.tseries .ts-series-total {
        gap: 6px;
    }

    main.tseries .ts-series-total strong {
        font-size: 32px;
    }

    main.tseries .ts-roster {
        flex-direction: column;
        gap: 12px;
        font-size: 13px;
    }

    main.tseries .ts-team.is-red .ts-roster li {
        flex-direction: row-reverse;
        text-align: right;
    }

    main.tseries .ts-presence {
        grid-template-columns: minmax(0, 1fr);
        padding: 20px;
        gap: 24px;
    }

    main.tseries .ts-presence-team {
        padding: 0;
        gap: 16px;
    }

    main.tseries .ts-presence-team + .ts-presence-team {
        border-left: 0;
        border-top: 1px solid var(--tp-line);
        padding-top: 24px;
    }

    main.tseries .ts-connection-band {
        padding: 20px;
    }

    main.tseries .mmc-cockpit-identity {
        padding-left: 0;
    }

    main.tseries .mmc-cockpit-identity::before {
        display: none;
    }

    main.tseries .mmc-cockpit-identity h2 {
        font-size: 20px;
    }

    main.tseries .mmc-cockpit-action {
        width: 100%;
        margin-left: 0;
    }

    main.tseries .mmc-cta {
        width: 100%;
    }

    main.tseries .mmc-cockpit-rail {
        padding: 24px 20px;
    }

    main.tseries .ts-section-head {
        align-items: flex-start;
    }

    main.tseries .mmc-tile-score {
        gap: 8px;
    }
}

/* Web veto shares the cockpit palette, not native in-game controls. */
main.tseries .ts-veto {
    margin-top: 24px;
    padding: 28px;
    border-top: 3px solid var(--tp-accent);
    background: var(--tp-panel);
    color: var(--tp-ink);
}

main.tseries .ts-veto-head,
main.tseries .ts-veto-sides {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

main.tseries .ts-veto-eyebrow {
    color: var(--tp-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

main.tseries .ts-veto h2 {
    margin: 8px 0;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.2;
}

main.tseries .ts-veto-head p {
    max-width: 720px;
    margin: 0;
    color: var(--tp-muted);
}

main.tseries .ts-veto-counter {
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid var(--tp-line);
    color: var(--tp-muted);
    font-size: 12px;
}

main.tseries .ts-veto-sides {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 24px;
    font-weight: 600;
}

main.tseries .ts-veto-sides b {
    display: inline-block;
    margin-right: 8px;
    color: var(--tp-accent);
}

main.tseries .ts-veto-rail {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    margin: 18px 0 24px;
    padding: 0 0 8px;
    list-style: none;
}

main.tseries .ts-veto-rail li {
    display: flex;
    align-items: center;
    flex: 1 0 84px;
    gap: 8px;
    padding: 10px;
    border-bottom: 2px solid var(--tp-line);
    color: var(--tp-muted);
    font-size: 12px;
}

main.tseries .ts-veto-rail li.is-current {
    border-color: var(--tp-accent);
    background: var(--ts-raised);
    color: var(--tp-ink);
    font-weight: 700;
}

main.tseries .ts-veto-rail li.is-done {
    color: var(--tp-accent);
}

main.tseries .ts-veto-start {
    margin-bottom: 24px;
}

main.tseries .ts-veto-maps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

main.tseries .ts-veto-map {
    display: flex;
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 165px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    padding: 18px;
    border: 1px solid #45424c;
    background: #171b22;
    color: #fff;
    text-align: left;
    font: inherit;
    isolation: isolate;
}

main.tseries .ts-veto-map img,
main.tseries .ts-veto-map::after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

main.tseries .ts-veto-map img {
    object-fit: cover;
}

main.tseries .ts-veto-map::after {
    content: '';
    background: linear-gradient(180deg, #10151b38, #10151be6);
}

main.tseries .ts-veto-map strong {
    font-size: 17px;
    line-height: 1.3;
}

main.tseries .ts-veto-map:disabled {
    opacity: 1;
    cursor: default;
}

main.tseries .ts-veto-map:not(:disabled) {
    cursor: pointer;
}

main.tseries .ts-veto-map:not(:disabled):hover {
    border-color: var(--tp-accent);
}

main.tseries .ts-veto-map:focus-visible {
    outline: 3px solid var(--tp-accent);
    outline-offset: 3px;
}

main.tseries .ts-veto-map.is-ban {
    border-color: #b84444;
}

main.tseries .ts-veto-map.is-ban::after {
    background: linear-gradient(180deg, #b91c1c26 0%, #7f1d1d66 45%, #450a0ae6 100%);
}

main.tseries .ts-veto-map.is-pick {
    border-color: #2c9b74;
}

main.tseries .ts-veto-map.is-pick::after {
    background: linear-gradient(180deg, #05966926 0%, #065f4666 45%, #022c22e6 100%);
}

main.tseries .ts-veto-map.is-ban strong {
    text-decoration: line-through;
    color: #fff;
}

main.tseries .ts-veto-map-state,
main.tseries .ts-veto-map-action {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

main.tseries .ts-veto-map-state {
    margin-bottom: auto;
}

main.tseries .ts-veto-order {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 24px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--tp-line);
    list-style: none;
}

main.tseries .ts-veto-order li {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

main.tseries .ts-veto-order span {
    color: var(--tp-accent);
    font-size: 12px;
}

@media (max-width: 760px) {
    main.tseries .ts-veto {
        padding: 20px;
    }

    main.tseries .ts-veto-head {
        flex-direction: column;
        gap: 12px;
    }

    main.tseries .ts-veto-maps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    main.tseries .ts-veto-map {
        min-height: 150px;
        padding: 12px;
    }

    main.tseries .ts-veto-order {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    main.tseries .ts-veto-maps {
        grid-template-columns: 1fr;
    }
}