/* ============================================================================
   BRACKET PAGE V2 (Views/Tournament/Bracket.cshtml)
   LayoutV2 shell for the public bracket: info strip (same card look as
   reg-info-strip on RegistrationV2) + a re-skin of the legacy markup produced by
   _TournamentMapBuilder.cshtml / TournamentMap.js. Everything is scoped under
   .bracket-v2-page so the legacy Map page (theme.css / tableLayout.css) is unaffected.
   Load AFTER brackets-viewer.min.css, brackets-viewer-v2.css and full-width-layout.css.
   ============================================================================ */

.bracket-v2-page {
    --bk-gap: 16px;
    --bk-card: var(--card-bg, var(--color-surface));
    --bk-border: var(--card-border, var(--color-border-strong));
    --bk-muted: var(--color-text-secondary);
    --bk-text: var(--color-text-primary);
    --bk-radius: var(--radius-md, 10px);
    --bk-done: #1c8719;
    --bk-playing: #dc3545;
    --bk-ready: #f7ca30;
    --bk-predict: #888888;
    touch-action: pan-x pan-y pinch-zoom;
}

.bracket-v2-page * {
    touch-action: pan-x pan-y pinch-zoom;
}

/* ---- Info strip (2 compact blocks) ------------------------------------- */
.bracket-v2-page .bk-info-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.bracket-v2-page .bk-info-card {
    background: var(--bk-card);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bracket-v2-page .bk-info-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--bk-muted);
}

.bracket-v2-page .bk-info-card__head i {
    color: var(--color-primary);
    font-size: 12px;
}

.bracket-v2-page .bk-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.bracket-v2-page .bk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--bk-text);
    min-width: 0;
    overflow-wrap: anywhere;
}

.bracket-v2-page .bk-chip > i {
    color: var(--bk-muted);
    font-size: 12px;
}

.bracket-v2-page .bk-chip--checkin strong {
    font-size: 15px;
    font-weight: 800;
}

.bracket-v2-page .bk-chip--abbr {
    color: var(--bk-muted);
    font-size: 12px;
    cursor: help;
}

.bracket-v2-page .bk-progress {
    display: inline-block;
    width: 64px;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--color-surface-secondary);
}

.bracket-v2-page .bk-progress-fill {
    display: block;
    height: 100%;
    background: var(--color-primary);
}

.bracket-v2-page .bk-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 10px;
}

.bracket-v2-page .bk-dot--done { background: var(--bk-done); }
.bracket-v2-page .bk-dot--playing { background: var(--bk-playing); }
.bracket-v2-page .bk-dot--ready { background: var(--bk-ready); }
.bracket-v2-page .bk-dot--predict { background: var(--bk-predict); }

.bracket-v2-page .bk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bracket-v2-page .bk-actions .sc-btn {
    gap: 6px;
}

/* ---- Board --------------------------------------------------------------- */
.bracket-v2-page .bk-board {
    background: var(--bk-card);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    padding: var(--bk-gap);
    overflow-x: auto;
    color: var(--bk-text);
}

.bracket-v2-page .bk-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 0;
    color: var(--bk-muted);
}

.bracket-v2-page .spinner {
    width: 40px;
    height: 40px;
    border: 6px solid var(--color-surface-secondary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: bk-spin 1s linear infinite;
}

@keyframes bk-spin {
    to { transform: rotate(360deg); }
}

/* Round / group headings emitted with an inline white colour by the legacy partial */
.bracket-v2-page .box-Tournament-bracket > h2,
.bracket-v2-page .box-Tournament-bracket h2 {
    color: var(--bk-text) !important;
    font-size: 20px;
    font-weight: 800 !important;
    margin: 8px 0 12px;
}

.bracket-v2-page .box-Tournament-bracket h4 {
    color: var(--bk-text);
}

.bracket-v2-page .box-Tournament-bracket hr {
    border-color: var(--bk-border);
}

/* Elimination bracket nodes: brackets-viewer hard-codes --match-width:150px and ellipsises
   .participant .name at 80% width, which cuts doubles names ("A / B"). Widen the node and let
   the name wrap; Bracket.cshtml also copies the full text into title= as a tooltip. */
.bracket-v2-page .brackets-viewer {
    --match-width: 230px;
}

.bracket-v2-page .brackets-viewer .participant .name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.bracket-v2-page .brackets-viewer .participant {
    height: auto;
    min-height: 2.2em;
    padding-block: 3px;
}

/* Elimination bracket containers */
.bracket-v2-page .brackets-viewerContainer {
    overflow-x: auto;
}

/* Group-stage grid: legacy 4-up `.row` of `.col-5` cells -> responsive grid */
.bracket-v2-page .brackets-viewerContainer .list > .row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--bk-gap);
    margin: 0 0 var(--bk-gap);
}

/* Bootstrap's .row clearfix (::before/::after { display:table }) becomes real grid items and eats
   column 1 (groups 1-3 shift right, group 4 wraps). Not needed in a grid. */
.bracket-v2-page .brackets-viewerContainer .list > .row::before,
.bracket-v2-page .brackets-viewerContainer .list > .row::after {
    content: none;
    display: none;
}

.bracket-v2-page .brackets-viewerContainer .list > .row > [class*="col-"] {
    width: auto;
    float: none;
    padding: 0;
    min-width: 0;
}

.bracket-v2-page .brackets-viewerContainer .list > .row > .col-5:empty {
    display: none;
}

/* ---- Group card: header + standings + match cards (markup: _TournamentMapBuilder helpers) ---- */
.bracket-v2-page .box-Tournament-bracket .gm-round {
    margin: 18px 0 10px;
    font-size: 18px;
    font-weight: 800;
    color: var(--bk-text);
}

/* One accent hue per group (cycled by data-accent = group index % 8). */
.bracket-v2-page .brackets-viewerContainer [data-accent="0"] { --gm-accent: #2f80ed; }
.bracket-v2-page .brackets-viewerContainer [data-accent="1"] { --gm-accent: #12a594; }
.bracket-v2-page .brackets-viewerContainer [data-accent="2"] { --gm-accent: #8e5bd9; }
.bracket-v2-page .brackets-viewerContainer [data-accent="3"] { --gm-accent: #e07b24; }
.bracket-v2-page .brackets-viewerContainer [data-accent="4"] { --gm-accent: #d6457a; }
.bracket-v2-page .brackets-viewerContainer [data-accent="5"] { --gm-accent: #4a9d2f; }
.bracket-v2-page .brackets-viewerContainer [data-accent="6"] { --gm-accent: #0f9fc7; }
.bracket-v2-page .brackets-viewerContainer [data-accent="7"] { --gm-accent: #b8892b; }

.bracket-v2-page .brackets-viewerContainer .item {
    background: var(--color-surface-secondary);
    border: 1px solid var(--bk-border);
    border-top: 3px solid var(--gm-accent, var(--color-primary));
    border-radius: var(--bk-radius);
    overflow: hidden;
}

.bracket-v2-page .brackets-viewerContainer .item .head {
    margin: 0;
    padding: 9px 12px;
    background: color-mix(in srgb, var(--gm-accent, var(--color-primary)) 16%, transparent);
    color: var(--bk-text) !important;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-align: left;
    text-transform: uppercase;
}

/* Collapsible matches: header toggles .item.gm-collapsed; standings stay visible. */
.bracket-v2-page .gm-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.bracket-v2-page .gm-toggle-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bk-text);
    background: var(--color-surface-secondary);
    border: 1px solid var(--bk-border);
    border-radius: 999px;
    cursor: pointer;
}

.bracket-v2-page .gm-toggle-all:hover {
    border-color: var(--color-primary);
}

.bracket-v2-page .brackets-viewerContainer .item .head.gm-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.bracket-v2-page .brackets-viewerContainer .item .head.gm-toggle:hover {
    background: color-mix(in srgb, var(--gm-accent, var(--color-primary)) 26%, transparent);
}

.bracket-v2-page .brackets-viewerContainer .item .head.gm-toggle:focus-visible,
.bracket-v2-page .gm-toggle-all:focus-visible {
    outline: 2px solid var(--gm-accent, var(--color-primary));
    outline-offset: -2px;
}

.bracket-v2-page .gm-head-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bk-muted);
}

.bracket-v2-page .gm-count {
    padding: 0 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bk-muted) 18%, transparent);
    line-height: 1.6;
}

.bracket-v2-page .gm-chev {
    font-size: 11px;
    transform: rotate(180deg);
}

.bracket-v2-page .item.gm-collapsed .gm-chev {
    transform: none;
}

.bracket-v2-page .item.gm-collapsed .gm-matches {
    display: none;
}

/* Live indicator in the header: visible whenever a match of the group is in progress (Status 3). */
.bracket-v2-page .gm-live-dot {
    display: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bk-playing);
}

.bracket-v2-page .item.gm-live .gm-live-dot {
    display: inline-block;
}

/* Standings numbers flash while the group has a live match. Reduced motion: static red tint instead. */
.bracket-v2-page .item.gm-live .gm-st-row:not(.gm-st-head) .gm-st-num {
    color: var(--bk-playing);
    font-weight: 800;
}

@media (prefers-reduced-motion: no-preference) {
    .bracket-v2-page .gm-chev {
        transition: transform 0.2s ease;
    }

    .bracket-v2-page .item.gm-live .gm-st-row:not(.gm-st-head) .gm-st-num,
    .bracket-v2-page .item.gm-live .gm-live-dot {
        animation: gm-num-flash 1.2s ease-in-out infinite;
    }
}

@keyframes gm-num-flash {
    50% { opacity: 0.25; }
}

/* Standings (also used by IdtheThuc 7/8 parent results and the multi-round summary) */
.bracket-v2-page .box-Tournament-bracket .gm-standings {
    background: transparent;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--bk-border);
    padding: 2px 0 4px;
    color: var(--bk-text);
    box-sizing: border-box;
    /* header row (28) + N rows (32 each) + vertical padding (6): same height for every group in a row
       (--gm-st-rows = the tallest standings of that row, set inline on .list by the view). */
    min-height: calc(var(--gm-st-rows, 0) * 32px + 28px + 6px);
}

.bracket-v2-page .gm-st-row {
    min-height: 32px;
}

.bracket-v2-page .gm-st-head {
    min-height: 28px;
}

.bracket-v2-page .box-Tournament-bracket [data-accent] > .gm-standings {
    border: 1px solid var(--bk-border);
    border-top: 3px solid var(--gm-accent, var(--color-primary));
    border-radius: var(--bk-radius);
    background: var(--color-surface-secondary);
}

.bracket-v2-page .box-Tournament-bracket .gm-summary {
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    background: var(--color-surface-secondary);
    max-width: 560px;
}

.bracket-v2-page .box-Tournament-bracket .gm-summary-title {
    margin: 18px 0 8px;
    font-weight: 800;
    color: var(--bk-text);
}

.bracket-v2-page .gm-st-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 40px 40px;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 9px;
    font-size: 13px;
    border-left: 3px solid transparent;
}

.bracket-v2-page .gm-st-row + .gm-st-row {
    border-top: 1px solid color-mix(in srgb, var(--bk-border) 55%, transparent);
}

.bracket-v2-page .gm-st-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--bk-muted);
}

.bracket-v2-page .gm-st-rank {
    text-align: center;
    font-weight: 800;
    color: var(--bk-muted);
}

.bracket-v2-page .gm-st-team {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.bracket-v2-page .gm-st-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--bk-muted);
}

.bracket-v2-page .gm-st-pts {
    font-weight: 800;
    color: var(--bk-text);
}

/* Qualifiers (top 2): accent bar, tinted row, bold name. */
.bracket-v2-page .gm-st-row.gm-q {
    border-left-color: var(--gm-accent, var(--color-primary));
    background: color-mix(in srgb, var(--gm-accent, var(--color-primary)) 10%, transparent);
}

.bracket-v2-page .gm-st-row.gm-q .gm-st-team,
.bracket-v2-page .gm-st-row.gm-q .gm-st-rank {
    font-weight: 800;
    color: var(--bk-text);
}

/* Match cards */
.bracket-v2-page .gm-matches {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bracket-v2-page .gm-match {
    position: relative;
    padding: 6px 10px 6px 14px;
    background: var(--color-surface);
    border: 1px solid var(--bk-border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    color: var(--bk-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bracket-v2-page .gm-match:hover {
    border-color: var(--gm-accent, var(--color-primary));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Left status strip. Colours come from the .match* rules below (ContractMatch.ClassByStatus). */
.bracket-v2-page .gm-status {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--bk-predict);
}

.bracket-v2-page .gm-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--bk-muted);
}

.bracket-v2-page .gm-meta .matchCode {
    font-weight: 800;
    color: var(--gm-accent, var(--color-primary));
}

.bracket-v2-page .gm-meta .san:empty,
.bracket-v2-page .gm-meta .san > span:empty,
.bracket-v2-page .gm-meta .time:empty {
    display: none;
}

/* "Watch" pill (shown when the match has an http(s) ReferLink; red while live). `[hidden]` must win over display. */
.bracket-v2-page .gm-watch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 3px 10px;
    min-height: 26px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    color: var(--bk-playing);
    background: color-mix(in srgb, var(--bk-muted) 16%, transparent);
    border: 1px solid var(--bk-border);
    border-radius: 999px;
}

/* Inside an elimination node label the live label itself is already red (.matchInprogress), so the live pill
   is inverted (white with a red icon/text) to stay visible. */
.bracket-v2-page .brackets-viewer .gm-watch--live {
    background: #fff;
    border-color: #fff;
    color: var(--bk-playing);
}

.bracket-v2-page .brackets-viewer .gm-watch--live i,
.bracket-v2-page .brackets-viewer .gm-watch--live:hover,
.bracket-v2-page .brackets-viewer .gm-watch--live:focus-visible {
    color: var(--bk-playing);
}

/* Inside an elimination node label. The library draws that label as a small absolutely positioned tab
   (`.opponents > span`, top:-15px, .8em) above the node, so the chip must NOT make the tab taller or it
   grows down over the first player's name: icon-only, 14px high, inline at the end of the label text. */
.bracket-v2-page .brackets-viewer .gm-watch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    vertical-align: middle;
    width: 20px;
    height: 17px;
    min-height: 0;
    margin: -1px 0 -1px 6px;
    padding: 0;
    line-height: 1;
    border: 0;
    pointer-events: auto;
}

.bracket-v2-page .brackets-viewer .gm-watch i {
    font-size: 8px;
    margin-left: 1px;
}

.bracket-v2-page .brackets-viewer .opponents > span {
    white-space: nowrap;
    line-height: 15px;
}

.bracket-v2-page .brackets-viewer .gm-watch span {
    display: none;
}

.bracket-v2-page .gm-watch[hidden] {
    display: none;
}

.bracket-v2-page .gm-watch i {
    font-size: 11px;
    color: var(--bk-playing);
}

.bracket-v2-page .gm-watch--live i {
    color: #fff;
}

.bracket-v2-page .gm-watch:hover,
.bracket-v2-page .gm-watch:focus-visible {
    border-color: var(--bk-playing);
    color: var(--bk-playing);
}

.bracket-v2-page .gm-watch--live {
    background: var(--bk-playing);
    border-color: var(--bk-playing);
    color: #fff;
}

.bracket-v2-page .gm-watch--live:hover,
.bracket-v2-page .gm-watch--live:focus-visible {
    color: #fff;
    filter: brightness(1.1);
}

.bracket-v2-page .gm-team {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    font-size: 13px;
    color: var(--bk-muted);
}

.bracket-v2-page .gm-team + .gm-team {
    border-top: 1px dashed color-mix(in srgb, var(--bk-border) 70%, transparent);
}

.bracket-v2-page .gm-name {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.bracket-v2-page .gm-score {
    flex: none;
    min-width: 30px;
    padding: 1px 6px;
    text-align: center;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    border-radius: 6px;
    background: color-mix(in srgb, var(--bk-muted) 14%, transparent);
    color: var(--bk-text);
}

/* Completed: winner stands out, loser is muted. Before a result, both names read as normal text. */
.bracket-v2-page .gm-match:not([data-status="4"]) .gm-team {
    color: var(--bk-text);
}

.bracket-v2-page .gm-team.gm-win {
    color: var(--bk-text);
    font-weight: 800;
}

.bracket-v2-page .gm-team.gm-win .gm-score {
    background: var(--bk-done);
    color: #fff;
}

.bracket-v2-page .gm-score.flashing {
    background: var(--bk-playing);
    color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
    .bracket-v2-page .gm-match[data-status="3"] .gm-status {
        animation: gm-live-pulse 1.4s ease-in-out infinite;
    }
}

@keyframes gm-live-pulse {
    50% { opacity: 0.35; }
}

/* Clickable match cells (operator popup) */
.bracket-v2-page .box-Tournament-bracket div[onclick] {
    cursor: pointer;
}

/* Match status colours (ContractMatch.ClassByStatus) */
.bracket-v2-page .matchCompleted { background: var(--bk-done) !important; color: #fff !important; }
.bracket-v2-page .matchInprogress { background: var(--bk-playing) !important; color: #fff !important; }
.bracket-v2-page .matchReady { background: var(--bk-ready) !important; color: #111 !important; }
.bracket-v2-page .matchPredict { background: var(--bk-predict) !important; color: #fff !important; }

/* ---- Modals (match update popup is injected into #matchUpdatePopup, which sits inside the page) ---- */
.bracket-v2-page .popup-match {
    width: min(760px, 96vw);
}

.bracket-v2-page .popup-match .content-p {
    background: var(--color-surface);
    color: var(--bk-text);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    padding: 16px;
}

.bracket-v2-page .popup-match .title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 800;
}

.bracket-v2-page .popup-match .table td {
    color: var(--bk-text);
    border-color: var(--bk-border);
}

.bracket-v2-page .popup-match input.form-control,
.bracket-v2-page .popup-match .form-controlMatchResult {
    background: var(--color-surface-secondary);
    color: var(--bk-text);
    border: 1px solid var(--bk-border);
    border-radius: 6px;
    padding: 6px 8px;
    width: 100%;
    text-align: center;
}

.bracket-v2-page .popup-match .box-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.bracket-v2-page .popup-match .box-bottom a.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.bracket-v2-page .popup-match .sc-btn {
    margin: 4px 4px 0 0;
}

.bracket-v2-page #ModalHistorymatch .modal-content {
    background: var(--color-surface);
    color: var(--bk-text);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
}

.bracket-v2-page #ModalHistorymatch .modal-header {
    border-bottom: 1px solid var(--bk-border);
}

.bracket-v2-page #ModalHistorymatch .close {
    color: var(--bk-text);
    opacity: 0.7;
}

.bracket-v2-page .match-history {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    padding: 12px 14px;
    margin: 8px 0;
    background: var(--color-surface-secondary);
}

.bracket-v2-page .team-listmatch {
    flex: 1;
    font-size: 16px;
    color: var(--bk-text);
}

.bracket-v2-page .team-left { text-align: left; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1199px) {
    .bracket-v2-page .brackets-viewerContainer .list > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .bracket-v2-page .bk-info-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .bracket-v2-page .brackets-viewerContainer .list > .row {
        grid-template-columns: 1fr;
    }

    .bracket-v2-page .bk-board {
        padding: 10px;
    }

    .bracket-v2-page .brackets-viewer {
        --match-width: 190px;
    }

    .bracket-v2-page .brackets-viewer {
        padding: 10px !important;
        overflow: auto !important;
    }
}

/* ---- Player avatars inside the match-update popup -------------------------
   TeamOnMap.Apprearance emits <p class="acc-50 [check]"><img class="avatar">name</p>. The size
   rules (.acc-50 .avatar ...) live in the legacy theme.css, which _LayoutV2 does not load, so
   the images rendered at natural size. Re-declared here, scoped to this page. */
.bracket-v2-page .popup-match .acc-50,
.bracket-v2-page .popup-match .acc-35 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    text-align: left;
}

.bracket-v2-page .popup-match .acc-50 .avatar,
.bracket-v2-page .popup-match .acc-35 .avatar {
    flex: 0 0 auto;
    display: inline-block;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
}

.bracket-v2-page .popup-match .acc-50 .avatar {
    width: 50px;
    height: 50px;
}

.bracket-v2-page .popup-match .acc-35 .avatar {
    width: 35px;
    height: 35px;
}

/* verified-member tick (legacy .acc-35.check:before) */
.bracket-v2-page .popup-match .acc-50.check::before,
.bracket-v2-page .popup-match .acc-35.check::before {
    content: "";
    position: absolute;
    left: 36px;
    bottom: 0;
    width: 12px;
    height: 12px;
    background: url(../../images/icon-check.svg) no-repeat center center #fff;
    background-size: contain;
    border-radius: 50%;
}

.bracket-v2-page .popup-match .acc-35.check::before {
    left: 23px;
}

/* ---- Match-update popup: bigger teams / scores + per-team "Huy" button ---- */
.bracket-v2-page .popup-match .bk-mu-table td {
    vertical-align: middle;
}

.bracket-v2-page .popup-match .bk-mu-team {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.bracket-v2-page .popup-match .bk-mu-team p {
    justify-content: center;
}

.bracket-v2-page .popup-match input.bk-mu-score {
    height: 72px;
    min-width: 72px;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    padding: 0 4px;
}

.bracket-v2-page .popup-match .bk-mu-cancel {
    display: block;
    width: 100%;
    margin-top: 8px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .bracket-v2-page .popup-match input.bk-mu-score {
        height: 60px;
        min-width: 56px;
        font-size: 28px;
    }

    .bracket-v2-page .popup-match .bk-mu-team {
        font-size: 15px;
    }
}

/* ---- Cancelled matches (status 5): grayed but fully legible ----------------
   Names, scores and the match label stay readable - grayscale + slight fade only, no blur or
   strike-through. Set by Bracket.cshtml (fixBracketNodes) from ContractMatch.ClassByStatus. */
.bracket-v2-page .bk-cancelled {
    position: relative;
    filter: grayscale(1);
    opacity: 0.78;
}

.bracket-v2-page .bk-cancelled .participant.win,
.bracket-v2-page .bk-cancelled .participant.loss {
    background: transparent;
    box-shadow: none;
    opacity: 1;
}

.bracket-v2-page .bk-cancelled[data-cancel-label]::after {
    content: attr(data-cancel-label);
    position: absolute;
    top: -8px;
    right: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: var(--bk-predict);
    color: #fff;
    pointer-events: none;
}

/* Group match card: the badge sits inside the card (the card clips overflow). */
.bracket-v2-page .gm-match.bk-cancelled[data-cancel-label]::after {
    top: 6px;
    right: 8px;
}

/* Winner is not bold: brackets-viewer.css bolds `.participant.win .name` (and brackets-viewer-v2.css
   makes it 800). The win tint / green score already mark the winner. */
.bracket-v2-page .brackets-viewer .participant.win .name,
.bracket-v2-page .brackets-viewer .participant.win .result {
    font-weight: 400;
}

/* ---- Match-update popup placement + phone sizing -------------------------- */
/* Sit 100px below the top so the (fixed) site header never crops the title/teams. */
.bracket-v2-page #matchUpdatePopup .modal-dialog {
    /* top clearance now comes from the global .modal-dialog padding-top (components-v2.css) */
    margin-bottom: 20px;
}

/* Phones: everything inside the popup at roughly half size (scores, avatars, buttons, inputs,
   spacing) so the whole match - teams, scores, date/time/field/referee, status buttons - fits. */
@media (max-width: 640px) {
    .bracket-v2-page #matchUpdatePopup .modal-dialog {
        width: calc(100vw - 16px);
        margin-left: 8px;
        margin-right: 8px;
    }

    .bracket-v2-page .popup-match .content-p {
        padding: 8px;
        padding-top: 12px;
    }

    .bracket-v2-page .popup-match .title {
        margin-bottom: 10px;
        font-size: 13px;
    }

    .bracket-v2-page .popup-match .table {
        margin-bottom: 6px;
    }

    .bracket-v2-page .popup-match .table td {
        padding: 4px;
        font-size: 11px;
    }

    .bracket-v2-page .popup-match .bk-mu-team {
        font-size: 11px;
    }

    .bracket-v2-page .popup-match input.bk-mu-score {
        height: 36px;
        min-width: 32px;
        font-size: 18px;
    }

    .bracket-v2-page .popup-match .bk-mu-cancel {
        margin-top: 4px;
        padding: 2px 6px;
        font-size: 10px;
    }

    .bracket-v2-page .popup-match .acc-50,
    .bracket-v2-page .popup-match .acc-35 {
        gap: 4px;
        margin-bottom: 3px;
    }

    .bracket-v2-page .popup-match .acc-50 .avatar,
    .bracket-v2-page .popup-match .acc-35 .avatar {
        width: 25px;
        height: 25px;
    }

    .bracket-v2-page .popup-match .acc-50.check::before,
    .bracket-v2-page .popup-match .acc-35.check::before {
        left: 15px;
        width: 7px;
        height: 7px;
    }

    .bracket-v2-page .popup-match .row {
        margin-left: -3px;
        margin-right: -3px;
    }

    .bracket-v2-page .popup-match .row > [class*="col-"] {
        padding-left: 3px;
        padding-right: 3px;
        font-size: 10px;
        margin-bottom: 4px;
    }

    .bracket-v2-page .popup-match input.form-control {
        height: 24px;
        padding: 2px 4px;
        font-size: 11px;
    }

    .bracket-v2-page .popup-match .box-bottom {
        gap: 6px;
        margin-top: 6px;
    }

    .bracket-v2-page .popup-match .box-bottom a {
        font-size: 10px;
    }

    .bracket-v2-page .popup-match hr {
        margin: 6px 0;
    }

    .bracket-v2-page .popup-match .btn-md {
        margin: 2px 2px 0 0;
    }
}

/* ---- Sponsor "running" modal (Views/Tournament/_SponsorRunningModal.cshtml) -----------------
   ONE wide centred card. It pops up, then each sponsor banner RUNS IN from the right of the
   screen and settles side by side; when the last one is in, the script adds .is-counting (5 s
   progress bar + countdown) and finally .is-leaving (whole card runs out to the left).
   All durations/delays are set inline by the script (single source of truth) - CSS only has the
   keyframes. NOT gated on prefers-reduced-motion (dev machines report it; it is the feature).
   The card must stay overflow: visible so banners can fly in from outside it. */
.spr {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1055;
    width: min(960px, calc(100vw - 24px));
    display: none;
    background: var(--color-surface, #1a1f2e);
    color: var(--color-text-primary, #e5e7eb);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
}

.spr.is-on {
    display: block;
    animation: spr-pop 300ms ease-out both;
}

.spr.is-on.is-leaving {
    animation: spr-out var(--spr-out, 700ms) ease-in forwards;
}

@keyframes spr-pop {
    from { transform: translate(-50%, -50%) scale(0.94); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}

@keyframes spr-out {
    from { transform: translate(-50%, -50%);                 opacity: 1; }
    to   { transform: translate(calc(-50% - 100vw), -50%);   opacity: 0; }
}

.spr-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 14px;
    font-size: 13px;
}

.spr-count {
    color: var(--color-text-secondary, #9ca3af);
    font-weight: 600;
}

.spr-close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(127, 127, 127, 0.25);
    color: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.spr-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 12px 12px;
}

.spr-item {
    flex: 1 1 0;
    min-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #fff;
    border-radius: var(--radius-md, 10px);
    line-height: 0;
}

/* Run in from the right edge of the screen into the reserved flex slot. Duration + delay come
   from inline styles; fill-mode "backwards" keeps it parked off-screen during its delay and
   leaves normal (hover) transforms alone afterwards. */
.spr.is-on .spr-item {
    animation-name: spr-item-in;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: backwards;
}

@keyframes spr-item-in {
    from { transform: translateX(100vw); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

a.spr-item {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.spr-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.spr-item img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: contain;
}

.spr-bar {
    height: 3px;
    background: rgba(127, 127, 127, 0.25);
    border-radius: 0 0 var(--radius-lg, 14px) var(--radius-lg, 14px);
    overflow: hidden;
}

.spr-bar-fill {
    display: block;
    height: 100%;
    background: var(--color-primary, #9eff00);
    transform-origin: left center;
}

.spr.is-counting .spr-bar-fill {
    animation: spr-bar 5s linear both;
}

.spr:hover .spr-bar-fill {
    animation-play-state: paused;
}

@keyframes spr-bar {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@media (max-width: 640px) {
    .spr-head {
        padding: 6px 8px 6px 10px;
        font-size: 11px;
    }

    .spr-close {
        width: 22px;
        height: 22px;
        font-size: 15px;
    }

    .spr-list {
        gap: 6px;
        padding: 0 8px 8px;
    }

    .spr-item {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        padding: 4px;
    }

    .spr-item img {
        height: 80px;
    }
}