/* Canonical competition detail workspace, shared by all selected views.
   Pixel's brand fonts, gold/mint accents and square geometry are intentional. */
main.tp-detail-new {
    --tp-gold: rgba(218, 172, 58, 0.2);
    --tp-silver: rgba(169, 184, 203, 0.2);
    --tp-bronze: rgba(193, 128, 78, 0.2);
    --tp-bg: #101113;
    --tp-panel: #191a1d;
    --tp-elevated: #222326;
    --tp-ink: #f2f2f3;
    --tp-muted: #b3b4b8;
    --tp-line: #343539;
    padding: 24px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

html[data-theme='light'] main.tp-detail-new {
    --tp-bg: #f7f7f6;
    --tp-panel: #fff;
    --tp-elevated: #ededeb;
    --tp-ink: #202124;
    --tp-muted: #5b5c61;
    --tp-line: #d7d8da;
}

@media (prefers-color-scheme: light) {
    html:not([data-theme='dark']):not([data-theme='light']) main.tp-detail-new {
        --tp-bg: #f7f7f6;
        --tp-panel: #fff;
        --tp-elevated: #ededeb;
        --tp-ink: #202124;
        --tp-muted: #5b5c61;
        --tp-line: #d7d8da;
    }
}

main.tp-detail-new .tp-shell {
    max-width: 1440px;
}

main.tp-detail-new[data-competition-view='bracket'] .tp-shell {
    max-width: none;
}

main.tp-detail-new[data-competition-view='bracket'] .tn-hero {
    display: flex;
    padding: 0;
    margin: 0 0 16px;
}

main.tp-detail-new[data-competition-view='bracket'] .tn-hero h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
}

main.tp-detail-new[data-competition-view='bracket'] :is(
    .tn-hero-meta, .tn-hero-bottom, .tn-hero-teams,
    [data-event-region='live'], .tn-highlights, .tn-statistics, .tn-details, #registration
) {
    display: none;
}

main.tp-detail-new[data-competition-view='bracket'] .tn-arena {
    display: block;
}

main.tp-detail-new[data-competition-view='bracket'] .tn-bracket-explorer > .tp-section-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

main.tp-detail-new[data-competition-view='bracket'] [data-canvas-active] > .tn-bracket-source {
    display: none;
}

main.tp-detail-new h1,
main.tp-detail-new h2,
main.tp-detail-new h3 {
    font-family: 'Chakra Petch', sans-serif;
    letter-spacing: 0;
}

main.tp-detail-new h1 {
    margin: 8px 0 16px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

main.tp-detail-new h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

main.tp-detail-new h3 {
    font-size: 18px;
}

main.tp-detail-new :is(h2, #registration) {
    scroll-margin-top: 136px;
}

main.tp-detail-new button,
main.tp-detail-new select,
main.tp-detail-new input {
    font: inherit;
}

main.tp-detail-new :focus-visible {
    outline: 2px solid var(--tp-accent);
    outline-offset: 4px;
}

main.tp-detail-new .tn-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-bottom: 24px;
}

main.tp-detail-new .tn-hero-copy {
    min-width: 0;
}

main.tp-detail-new .tn-administration-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--color-ps-primary, #2c12d9);
    background: var(--color-ps-primary, #2c12d9);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

main.tp-detail-new .tn-administration-link:hover {
    border-color: var(--color-ps-primary-light, #4a35e0);
    background: var(--color-ps-primary-light, #4a35e0);
}

main.tp-detail-new .tn-administration-link svg {
    color: currentColor;
}

main.tp-detail-new .tn-hero-meta,
main.tp-detail-new .tn-hero-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: var(--tp-muted);
    font-size: 13px;
}

main.tp-detail-new .tn-kind {
    color: var(--tp-accent);
    font-weight: 600;
}

main.tp-detail-new .tp-status {
    padding: 2px 8px;
    border: 0;
    background: var(--tp-elevated);
}

main.tp-detail-new .tn-start {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0;
}

main.tp-detail-new .tn-start time {
    color: var(--tp-ink);
    font-variant-numeric: tabular-nums;
}

main.tp-detail-new .tn-hero-teams {
    flex: 0 0 auto;
    max-width: 320px;
}

main.tp-detail-new .tn-hero-teams > p {
    margin: 0 0 8px;
    color: var(--tp-muted);
    font-size: 12px;
}

main.tp-detail-new .tp-team-avatars {
    gap: 8px;
    margin: 0;
}

main.tp-detail-new .tp-team-avatar {
    width: 44px;
    height: 44px;
    border: 0;
}

main.tp-detail-new .tp-team-avatar img {
    width: 32px;
    height: 32px;
}

main.tp-detail-new .tn-navigation {
    scroll-margin-top: 56px;
    position: sticky;
    top: 56px;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 56px;
    padding: 4px 0;
    margin: 0 0 24px;
    border-top: 1px solid var(--tp-line);
    border-bottom: 1px solid var(--tp-line);
    background: var(--tp-bg);
}

main.tp-detail-new .tn-navigation-links {
    display: flex;
    min-width: 0;
    gap: 24px;
    overflow-x: auto;
    scrollbar-width: thin;
}

main.tp-detail-new .tn-navigation-links a {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 44px;
    color: var(--tp-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

main.tp-detail-new .tn-navigation-links a:is(:hover, [aria-current]) {
    color: var(--tp-ink);
    text-decoration: underline;
    text-underline-offset: 8px;
}

main.tp-detail-new .tn-navigation-links a:focus-visible {
    outline-offset: -2px;
}

main.tp-detail-new .tn-update {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 12px;
    color: var(--tp-muted);
    font-size: 12px;
}

main.tp-detail-new .tn-refresh {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--tp-line);
    background: var(--tp-panel);
    color: var(--tp-ink);
    cursor: pointer;
}

main.tp-detail-new [data-refresh-countdown] {
    display: inline-block;
    min-width: 3ch;
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

/* At 1440: 48 outer gutters + 1048 bracket + 32 gap + 312 highlights = 1440. */
main.tp-detail-new .tn-arena {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 312px;
    align-items: start;
    gap: 32px;
}

main.tp-detail-new .tn-bracket-workspace {
    min-width: 0;
}

main.tp-detail-new .tp-section {
    padding-top: 24px;
    margin-top: 32px;
}

main.tp-detail-new .tp-bracket-section {
    padding: 0;
    margin: 0;
}

main.tp-detail-new .tp-section-heading {
    gap: 16px;
    margin-bottom: 20px;
}

main.tp-detail-new .tp-section-heading > div > p {
    margin: 8px 0 0;
    font-size: 13px;
}

main.tp-detail-new .tp-section-heading > .tp-muted {
    font-size: 12px;
}

main.tp-detail-new .tp-bracket-lane > h3 {
    margin: 0 0 16px;
    color: var(--tp-muted);
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

main.tp-detail-new .tp-bracket-pan {
    padding: 4px 0 16px;
}

main.tp-detail-new .tp-bracket-rounds {
    gap: 48px;
}

main.tp-detail-new .tp-bracket-round {
    flex: 0 0 288px;
    width: 288px;
    max-width: none;
}

main.tp-detail-new .tp-bracket-round h4 {
    min-height: 20px;
    margin-bottom: 16px;
    line-height: 20px;
}

main.tp-detail-new .tp-round-matches {
    gap: 24px;
}

main.tp-detail-new [data-bracket-format='round_robin'] .tp-bracket-rounds {
    flex-direction: column;
    width: 100%;
    gap: 24px;
}

main.tp-detail-new [data-bracket-format='round_robin'] .tp-bracket-round {
    flex: none;
    width: 100%;
    min-width: 0;
}

main.tp-detail-new [data-bracket-format='round_robin'] .tp-bracket-round + .tp-bracket-round {
    padding-top: 24px;
    border-top: 2px solid var(--tp-line);
}

main.tp-detail-new [data-bracket-format='round_robin'] .tp-round-matches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    align-items: start;
}

main.tp-detail-new .tp-bracket-match {
    padding: 16px;
    border-color: transparent;
    background: var(--tp-panel);
    outline-offset: -3px;
}

main.tp-detail-new .tp-bracket-match-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    line-height: 16px;
}

main.tp-detail-new .tp-bracket-match-label {
    overflow-wrap: anywhere;
    line-height: 16px;
}

main.tp-detail-new .tp-bracket-team {
    min-height: 40px;
    gap: 12px;
    padding: 8px;
    margin: 0 -8px;
    font-size: 14px;
}

main.tp-detail-new .tp-bracket-team + .tp-bracket-team {
    margin-top: 4px;
}

main.tp-detail-new .tp-bracket-identity {
    line-height: 20px;
}

main.tp-detail-new .tp-bracket-identity small {
    margin-top: 4px;
    font-size: 11px;
    line-height: 16px;
}

main.tp-detail-new .tp-bracket-team strong {
    min-width: 32px;
    max-width: 80px;
    font-size: 20px;
    line-height: 24px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

main.tp-detail-new .tp-bracket-match-bottom {
    align-items: center;
    gap: 4px 12px;
    padding-top: 12px;
    margin-top: 12px;
    font-size: 12px;
    line-height: 16px;
}

main.tp-detail-new .tp-bracket-match-time {
    margin-top: 4px;
    line-height: 16px;
}

main.tp-detail-new .tp-empty-bracket {
    min-height: 240px;
    padding: 32px;
    border: 0;
    background: var(--tp-panel);
}

main.tp-detail-new .tp-empty-mark {
    display: none;
}

main.tp-detail-new .tn-highlights {
    padding: 20px;
    background: var(--tp-panel);
}

main.tp-detail-new .tn-highlights-heading {
    margin-bottom: 20px;
}

main.tp-detail-new .tn-highlights h2 {
    font-size: 18px;
}

main.tp-detail-new .tn-highlights-heading p {
    margin: 4px 0 0;
    color: var(--tp-muted);
    font-size: 12px;
}

main.tp-detail-new .tn-highlight-tables {
    display: grid;
    gap: 24px;
}

main.tp-detail-new .tp-highlight-table caption {
    margin-bottom: 8px;
    color: var(--tp-ink);
    font-size: 13px;
    font-weight: 500;
}

main.tp-detail-new .tp-highlight-table th,
main.tp-detail-new .tp-highlight-table td {
    padding: 8px 0;
}

main.tp-detail-new .tp-highlight-table .tp-highlight-rank {
    width: 24px;
    color: var(--tp-muted);
}

main.tp-detail-new .tp-highlight-player {
    gap: 8px;
    font-size: 12px;
}

main.tp-detail-new .tp-highlight-maps {
    margin-left: 32px;
    font-size: 11px;
}

main.tp-detail-new .tp-highlight-table .tp-highlight-value {
    width: 44px;
    font-size: 16px;
}

main.tp-detail-new .tn-highlight-empty {
    color: var(--tp-muted);
    font-size: 13px;
}

main.tp-detail-new .tn-all-statistics {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 44px;
    margin-top: 16px;
    color: var(--tp-ink);
    font-size: 12px;
    text-decoration: none;
}

main.tp-detail-new .tn-statistics-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
}

main.tp-detail-new .tn-metric-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--tp-panel);
}

main.tp-detail-new .tn-metric-groups button {
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--tp-muted);
    cursor: pointer;
}

main.tp-detail-new .tn-metric-groups button:is(:hover, [aria-pressed='true']) {
    background: var(--tp-elevated);
    color: var(--tp-ink);
}

main.tp-detail-new .tp-statistics-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: min(100%, 560px);
    margin: 0;
}

main.tp-detail-new .tp-statistics-controls label {
    color: var(--tp-muted);
    font-size: 12px;
}

main.tp-detail-new .tp-statistics-controls input,
main.tp-detail-new .tp-statistics-controls select {
    min-height: 44px;
    padding: 8px 12px;
    margin-top: 0;
    border-color: var(--tp-line);
    background: var(--tp-panel);
    color: var(--tp-ink);
    font-size: 13px;
}

main.tp-detail-new .tp-statistics-controls input::placeholder {
    color: var(--tp-muted);
    opacity: 1;
}

main.tp-detail-new .tn-statistics-help {
    margin: 12px 0 16px;
    color: var(--tp-muted);
    font-size: 12px;
}

main.tp-detail-new .tn-statistics-help summary {
    width: fit-content;
    min-height: 44px;
    padding: 12px 0;
    cursor: pointer;
}

main.tp-detail-new .tn-statistics-help p {
    max-width: 800px;
    padding: 12px 0;
    margin: 0;
}

main.tp-detail-new .tn-player-count {
    margin: 0;
    color: var(--tp-muted);
    font-size: 12px;
}

main.tp-detail-new .tn-statistics > .tp-section-heading {
    gap: 8px 16px;
    margin-bottom: 16px;
}

main.tp-detail-new .tn-statistics > .tp-section-heading .tp-muted {
    margin: 8px 0 0;
}

main.tp-detail-new .tp-statistics-table {
    min-width: 720px;
    width: 100%;
}

main.tp-detail-new[data-statistics-group='all'] .tp-statistics-table {
    min-width: 1320px;
}

main.tp-detail-new .tp-statistics-table th,
main.tp-detail-new .tp-statistics-table td {
    padding: 12px 16px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

main.tp-detail-new .tp-statistics-table thead th {
    background: transparent;
    color: var(--tp-muted);
    font-weight: 500;
}

main.tp-detail-new .tp-statistics-table thead tr:first-child > th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--tp-bg);
}

main.tp-detail-new .tp-statistics-table tbody th {
    min-width: 216px;
    background: var(--tp-bg);
}

main.tp-detail-new .tp-statistics-table :is(td, th:not(:first-child)) {
    text-align: right;
}

main.tp-detail-new .tp-statistics-table thead th[data-metric-group] {
    text-align: right;
}

main.tp-detail-new .tn-average-value {
    font-weight: 600;
}

main.tp-detail-new .tn-value-track {
    display: block;
    width: 88px;
    height: 3px;
    margin: 8px 0 0 auto;
    background: var(--tp-elevated);
}

main.tp-detail-new .tn-value-track > span {
    display: block;
    height: 100%;
    background: var(--tp-accent);
}

main.tp-detail-new[data-statistics-group='rockets'] [data-metric-group]:not([data-metric-group='rockets']),
main.tp-detail-new[data-statistics-group='rails'] [data-metric-group]:not([data-metric-group='rails']),
main.tp-detail-new[data-statistics-group='attacks'] [data-metric-group]:not([data-metric-group='attacks']) {
    display: none;
}

main.tp-detail-new .tp-statistics-empty {
    padding: 32px;
    border: 0;
    background: var(--tp-panel);
}

main.tp-detail-new .tp-teams {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr));
    gap: 24px;
}

main.tp-detail-new .tp-teams > li {
    padding: 20px;
    border: 0;
    background: var(--tp-panel);
}

main.tp-detail-new .tp-pool-cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: 24px;
}

main.tp-detail-new .tp-information-grid {
    gap: 32px;
}

main.tp-detail-new .tp-live-section {
    padding: 0 0 24px;
    margin: 0;
}

main.tp-detail-new .tp-live-card {
    border-color: transparent;
}

@media (max-width: 1359px) {
    main.tp-detail-new .tn-arena {
        grid-template-columns: minmax(0, 1fr) 256px;
        gap: 24px;
    }
}

@media (max-width: 1099px) {
    main.tp-detail-new :is(h2, #registration) {
        scroll-margin-top: 178px;
    }

    main.tp-detail-new .tn-arena {
        grid-template-columns: minmax(0, 1fr);
    }

    main.tp-detail-new .tn-highlight-tables {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }

    main.tp-detail-new .tn-hero-teams {
        max-width: 208px;
    }

    main.tp-detail-new .tn-navigation {
        flex-wrap: wrap;
        gap: 0 16px;
    }

    main.tp-detail-new .tn-update {
        width: 100%;
        justify-content: flex-end;
    }

    main.tp-detail-new .tp-statistics-controls {
        width: 100%;
    }
}

@media (max-width: 639px) {
    main.tp-detail-new {
        padding: 20px 16px;
    }

    main.tp-detail-new h1 {
        font-size: 26px;
    }

    main.tp-detail-new h2 {
        font-size: 20px;
    }

    main.tp-detail-new .tn-hero {
        align-items: start;
        flex-direction: column;
        gap: 16px;
        padding-bottom: 20px;
    }

    main.tp-detail-new .tn-hero-teams {
        max-width: 100%;
    }

    main.tp-detail-new .tn-navigation-links {
        width: 100%;
        gap: 20px;
    }

    main.tp-detail-new .tn-navigation {
        margin-bottom: 20px;
    }

    main.tp-detail-new .tn-arena {
        gap: 24px;
    }

    main.tp-detail-new .tn-highlight-tables {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    main.tp-detail-new .tn-highlights {
        padding: 16px;
    }

    main.tp-detail-new .tn-statistics-toolbar,
    main.tp-detail-new .tp-statistics-controls {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    main.tp-detail-new .tp-statistics-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    main.tp-detail-new .tp-statistics-table :is(thead tr:first-child > th:first-child, tbody th) {
        width: 160px;
        min-width: 160px;
        max-width: 160px;
    }

    main.tp-detail-new .tn-metric-groups {
        justify-content: space-between;
        gap: 0;
    }

    main.tp-detail-new .tn-metric-groups button {
        padding: 8px;
        font-size: 13px;
    }

    main.tp-detail-new .tp-information-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Viewport-sized canvas: the bracket world never becomes a giant bitmap. */
main.tp-detail-new .tn-bracket-explorer > .tp-section-heading {
    margin-bottom: 16px;
}

main.tp-detail-new .tn-bracket-source > .tp-section {
    margin: 0;
    padding: 0;
    border: 0;
}

main.tp-detail-new .tn-bracket-source > .tp-bracket-section > .tp-section-heading,
main.tp-detail-new [data-canvas-active] .tn-bracket-source .tp-bracket-lane,
main.tp-detail-new [data-canvas-active] .tn-rr-tables {
    display: none;
}

main.tp-detail-new .tn-canvas-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

main.tp-detail-new .tn-canvas-zoom {
    display: flex;
    align-items: center;
    gap: 4px;
}

main.tp-detail-new .tn-canvas-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--tp-line);
    color: var(--tp-ink);
    background: var(--tp-panel);
}

main.tp-detail-new .tn-canvas-toolbar button:not([aria-disabled='true']):hover {
    border-color: var(--tp-accent);
    color: var(--tp-accent);
}

main.tp-detail-new .tn-canvas-toolbar button[aria-disabled='true'] {
    opacity: 0.45;
}

main.tp-detail-new .tn-canvas-zoom output {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    min-height: 44px;
    text-align: center;
    color: var(--tp-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

main.tp-detail-new .tn-canvas-stage {
    width: 100%;
    height: 560px;
    overflow: hidden;
    border: 1px solid var(--tp-line);
    background: var(--tp-bg);
}

main.tp-detail-new[data-competition-view='bracket'] .tn-canvas-stage {
    height: max(360px, calc(100dvh - 280px));
}

main.tp-detail-new .tn-canvas-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

main.tp-detail-new .tn-canvas-stage canvas:focus-visible {
    outline-offset: -4px;
}

main.tp-detail-new .tn-canvas-help {
    display: grid;
    justify-items: start;
    gap: 8px;
    margin-top: 12px;
    color: var(--tp-muted);
    font-size: 12px;
}

main.tp-detail-new .tn-canvas-help p {
    margin: 0;
    overflow-wrap: anywhere;
}

main.tp-detail-new :is(.tn-canvas-toolbar, .tn-canvas-zoom, .tn-canvas-stage, .tn-canvas-help)[hidden] {
    display: none;
}

@media (max-width: 767px) {
    main.tp-detail-new .tn-canvas-stage {
        height: 440px;
    }
}

/* Final sporting places only; the passive source exposes the same medal as canvas. */
main.tp-detail-new [data-podium-rank='1'] {
    background-color: var(--tp-gold);
}

main.tp-detail-new [data-podium-rank='2'] {
    background-color: var(--tp-silver);
}

main.tp-detail-new [data-podium-rank='3'] {
    background-color: var(--tp-bronze);
}

/* Independent bodies stay mounted: switching views never rebuilds bracket or filters. */
main.tp-detail-new [data-competition-body][hidden],
main.tp-detail-new [data-enhanced-controls][hidden],
main.tp-detail-new .tn-refresh[hidden] {
    display: none;
}

main.tp-detail-new .tn-tab-body {
    min-width: 0;
    scroll-margin-top: 136px;
}

main.tp-detail-new .tn-tab-body > .tp-section,
main.tp-detail-new .tn-tab-body > [data-event-region] > .tp-section {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Two equal columns plus 24px: both edges close on the same workspace gutters. */
main.tp-detail-new .tn-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
    margin-top: 32px;
}

main.tp-detail-new .tn-summary-grid > section {
    min-width: 0;
    padding: 24px;
    background: var(--tp-panel);
}

main.tp-detail-new .tn-summary-grid .tp-section-heading {
    flex-wrap: wrap;
    margin-bottom: 16px;
}

main.tp-detail-new .tn-summary-grid h2 {
    font-size: 18px;
}

main.tp-detail-new .tn-summary-grid a {
    color: var(--tp-ink);
    font-size: 13px;
    text-underline-offset: 4px;
}

main.tp-detail-new .tn-summary-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 0;
    margin: 16px 0 0;
    list-style: none;
}

main.tp-detail-new .tn-summary-counts {
    display: grid;
    gap: 8px;
    margin: 0;
}

main.tp-detail-new .tn-summary-counts > div {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

main.tp-detail-new .tn-summary-counts dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

main.tp-detail-new .tn-team-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
    margin-top: 24px;
}

main.tp-detail-new .tn-team-directory > li {
    padding: 24px;
}

main.tp-detail-new .tn-team-directory > li > .tp-identity {
    min-height: 48px;
    font-size: 18px;
    font-weight: 600;
}

main.tp-detail-new .tn-team-directory .tp-roster {
    display: grid;
    gap: 4px;
    padding: 16px 0 0;
    margin: 16px 0 0;
    border-top: 1px solid var(--tp-line);
    list-style: none;
}

main.tp-detail-new .tn-team-directory .tp-roster .tp-identity {
    min-height: 48px;
    gap: 12px;
    font-size: 14px;
}

main.tp-detail-new .tn-roster-heading {
    margin: 20px 0 0;
    color: var(--tp-muted);
    font-size: 13px;
    font-weight: 400;
}

main.tp-detail-new .tn-tab-body .tp-pool-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 24px;
    margin-top: 24px;
}

main.tp-detail-new .tn-tab-body .tp-pool-name {
    padding: 16px;
    font-size: 16px;
}

main.tp-detail-new .tn-tab-body .tp-information-grid {
    align-items: start;
}

main.tp-detail-new .tn-tab-body .tp-information-grid > section {
    margin-top: 0;
    padding: 24px;
    border: 0;
    background: var(--tp-panel);
}

main.tp-detail-new .tn-empty-state {
    padding: 24px;
    margin: 0;
    background: var(--tp-panel);
}

main.tp-detail-new .tn-empty-state h3 {
    margin: 0 0 8px;
}

main.tp-detail-new .tn-empty-state p {
    max-width: 72ch;
    margin: 0;
}

main.tp-detail-new .tn-match-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

main.tp-detail-new .tn-match-group {
    grid-column: 1 / -1;
    min-width: 0;
}

main.tp-detail-new .tn-match-group--empty {
    grid-column: auto;
    padding: 16px;
    background: var(--tp-panel);
}

main.tp-detail-new .tn-match-group--empty .tp-section-heading {
    gap: 8px;
    margin-bottom: 8px;
}

main.tp-detail-new .tn-match-group--empty h3 {
    font-size: 16px;
}

main.tp-detail-new .tn-match-group--empty .tn-empty-state {
    padding: 0;
}

main.tp-detail-new .tn-match-groups h3 {
    margin: 0;
}

main.tp-detail-new .tn-match-list {
    display: grid;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

main.tp-detail-new .tn-match-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(280px, 2fr) auto;
    align-items: center;
    gap: 16px 32px;
    padding: 24px;
    background: var(--tp-panel);
}

main.tp-detail-new .tn-match-context,
main.tp-detail-new .tn-match-sides {
    display: grid;
    min-width: 0;
    gap: 8px;
}

main.tp-detail-new .tn-match-context > a,
main.tp-detail-new .tn-match-action {
    color: var(--tp-ink);
    text-underline-offset: 4px;
}

main.tp-detail-new .tn-match-context > a {
    font-weight: 600;
}

main.tp-detail-new .tn-match-context > span {
    font-size: 12px;
}

main.tp-detail-new .tn-match-side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 44px;
}

main.tp-detail-new .tn-match-side > :first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

main.tp-detail-new .tn-match-side strong {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 12px;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

main.tp-detail-new .tn-match-winner {
    color: var(--tp-muted);
    font-size: 12px;
    font-weight: 400;
}

main.tp-detail-new .tn-match-notes {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 8px 24px;
    font-size: 12px;
}

main.tp-detail-new .tn-match-notes:empty {
    display: none;
}

main.tp-detail-new .tn-match-action {
    grid-column: 3;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    font-size: 13px;
}

@media (max-width: 1099px) {
    main.tp-detail-new .tn-match-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: 16px 24px;
    }

    main.tp-detail-new .tn-match-action {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: start;
    }
}

@media (max-width: 639px) {
    /* Dedicated views lead with their own data, not a repeated team-logo shelf. */
    main.tp-detail-new:not([data-competition-view='overview']):not([data-competition-view='bracket']) .tn-hero-teams {
        display: none;
    }

    main.tp-detail-new:not([data-competition-view='overview']):not([data-competition-view='bracket']) .tn-hero {
        padding-bottom: 16px;
    }

    main.tp-detail-new:not([data-competition-view='overview']):not([data-competition-view='bracket']) h1 {
        margin-bottom: 12px;
        font-size: 24px;
    }

    main.tp-detail-new .tn-statistics .tp-section-heading {
        gap: 8px;
    }

    main.tp-detail-new .tn-statistics-help {
        margin: 8px 0;
    }

    main.tp-detail-new .tn-team-directory {
        grid-template-columns: minmax(0, 1fr);
    }

    main.tp-detail-new .tn-summary-grid,
    main.tp-detail-new .tn-match-row {
        grid-template-columns: minmax(0, 1fr);
    }

    main.tp-detail-new .tn-summary-grid > section,
    main.tp-detail-new .tn-team-directory > li,
    main.tp-detail-new .tn-match-row,
    main.tp-detail-new .tn-empty-state {
        padding: 20px;
    }

    main.tp-detail-new .tn-match-notes,
    main.tp-detail-new .tn-match-action {
        grid-column: 1;
        grid-row: auto;
    }

    main.tp-detail-new .tn-match-side {
        gap: 16px;
    }
}

/* Registration reuses the existing Pixel surfaces, theme tokens and square controls. */
main.tp-detail-new .tn-registration {
    margin: 0 0 24px;
    padding: 20px;
    background: var(--tp-panel);
    border: 0;
}

main.tp-detail-new .tn-registration .tp-section-heading,
main.tp-detail-new .tn-registration-dialog .tp-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

main.tp-detail-new .tn-registration-primary {
    background: var(--tp-accent);
    border-color: var(--tp-accent);
    color: var(--tp-bg);
}

main.tp-detail-new .tn-registration-dialog {
    width: min(640px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 24px;
    overflow-y: auto;
    background: var(--tp-panel);
    color: var(--tp-ink);
    border: 1px solid var(--tp-line);
    border-radius: 0;
    font: inherit;
}

main.tp-detail-new .tn-registration-dialog::backdrop {
    background: rgba(0, 0, 0, 0.65);
}

main.tp-detail-new :is(.tn-registration, .tn-registration-dialog) .tp-form {
    max-width: none;
    margin-top: 20px;
    gap: 16px;
}

main.tp-detail-new .tn-registration-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

main.tp-detail-new .tn-registration-identity img {
    flex: none;
    object-fit: contain;
}

main.tp-detail-new :is(.tn-registration, .tn-registration-dialog) :is(button, select) {
    min-height: 44px;
}

main.tp-detail-new :is(.tn-registration, .tn-registration-dialog) button:not(:disabled):hover {
    filter: brightness(1.1);
}

main.tp-detail-new :is(.tn-registration, .tn-registration-dialog) .tp-check {
    min-height: 44px;
    overflow-wrap: anywhere;
}

main.tp-detail-new :is(.tn-registration, .tn-registration-dialog) .tp-check input {
    flex: none;
}

main.tp-detail-new :is(.tn-registration, .tn-registration-dialog) .tp-notice a {
    text-decoration: underline;
}

@media (max-width: 640px) {
    main.tp-detail-new .tn-registration-dialog {
        padding: 16px;
    }

    main.tp-detail-new :is(.tn-registration, .tn-registration-dialog) .tp-actions {
        align-items: stretch;
        flex-direction: column;
    }
}