/* Стили турнирной сетки: коробки, линии, подписи, панорама. Общие для публичной страницы
   (Pages/Events/_EventBracket.cshtml) и редактора в админке — раньше жили инлайном в партиале,
   и редактор мог получить их только копией, которая разъехалась бы при первой же правке. */
    .bracket-frame {
        position: relative;
        border: 1px solid var(--ink-06);
        border-radius: 12px;
        overflow: hidden;
        background: var(--ink-02);
    }

    .bracket-viewport {
        position: relative;
        overflow: hidden;
        /* Жесты внутри окна — наши: браузер не должен ни скроллить страницу, ни зумить её.
           Окно не выше 70vh, так что страницу всегда есть чем прокрутить рядом с сеткой. */
        touch-action: none;
        cursor: grab;
        /* Сетка — поверхность для перетаскивания, а не текст: без этого протяжка мышью
           выделяла названия команд синим вместо панорамы. */
        -webkit-user-select: none;
        user-select: none;
    }

    .bracket-viewport.is-dragging { cursor: grabbing; }

    .bracket-canvas {
        position: relative;
        transform-origin: 0 0;
        will-change: transform;
    }

    /* Полноэкранный режим — родная браузерная полноэкранка на рамке сетки. Без него
       холст в 1576px ужимался под ширину колонки, и названия команд читались с трудом. */
    .bracket-frame:fullscreen {
        border-radius: 0;
        border: 0;
        background: var(--bg);
    }

    /* Высоту окна ставит скрипт инлайном (fit), поэтому здесь нужен !important —
       иначе в полный экран растянулась бы рамка, а сетка внутри осталась бы полоской. */
    .bracket-frame:fullscreen .bracket-viewport { height: 100% !important; }

    .bracket-zoom-ui {
        position: absolute;
        right: 10px;
        bottom: 10px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .bracket-zoom-ui button {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        line-height: 1;
        border-radius: 8px;
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        box-shadow: var(--card-shadow);
        color: var(--ink-55);
        cursor: pointer;
        transition: color 0.15s ease, border-color 0.15s ease;
    }

    .bracket-zoom-ui button:hover {
        color: var(--accent);
        border-color: rgba(var(--c-cyan), calc(0.3 * var(--tint-boost)));
    }

    .bracket-hint {
        margin-top: 8px;
        font-size: 11px;
        color: var(--ink-20);
    }

    .bracket-links {
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
        overflow: visible;
    }

    .bracket-links path {
        fill: none;
        stroke: var(--ink-12);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        /* Тот же переход, что у боксов: без него при выборе пути боксы плавно гасли,
           а линии и подписи колонок моргали в тот же момент — читалось как сбой. */
        transition: opacity 0.15s ease;
    }

    .bracket-box-caption {
        position: absolute;
        font-size: 10px;
        line-height: 13px;
        color: var(--ink-18);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
        transition: opacity 0.15s ease;
    }

    .bracket-col-title {
        position: absolute;
        transition: opacity 0.15s ease;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink-25);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bracket-box {
        position: absolute;
        display: flex;
        flex-direction: column;
        border-radius: 8px;
        overflow: hidden;
        /* Те же переменные, что и у .card — чтобы боксы сетки жили в обеих темах сами собой. */
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        box-shadow: var(--card-shadow);
        transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
    }

    .bracket-box:hover {
        border-color: rgba(var(--c-cyan), calc(0.28 * var(--tint-boost)));
    }

    .bracket-box.is-final {
        border-color: rgba(var(--c-amber), calc(0.35 * var(--tint-boost)));
        background: rgba(var(--c-amber), calc(0.04 * var(--tint-boost)));
    }

    .bracket-row {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 0 10px;
        min-width: 0;
    }

    .bracket-row + .bracket-row {
        border-top: 1px solid var(--ink-06);
    }

    /* У коробки с кнопкой ↗ разделитель строк рисуем псевдоэлементом и не доводим до кнопки.
       Соединитель сетки выходит из правого края коробки на той же высоте, и сплошной border
       читался как одна линия, проходящая сквозь стрелку. Цвет самого border гасим, а не
       ширину: иначе строки съедут на пиксель. 22px — ширина .bracket-open. */
    .bracket-box.has-match .bracket-row + .bracket-row {
        position: relative;
        border-top-color: transparent;
    }

    .bracket-box.has-match .bracket-row + .bracket-row::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        right: 22px;
        border-top: 1px solid var(--ink-06);
    }

    /* Полоска во всю высоту справа: строки с командами при этом ужимаются, чтобы длинное
       название не заезжало под кнопку. */
    .bracket-open {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        line-height: 1;
        text-decoration: none;
        color: var(--ink-20);
        border-left: 1px solid var(--ink-06);
        transition: color 0.15s ease, background 0.15s ease;
    }

    .bracket-open:hover {
        color: var(--accent);
        background: rgba(var(--c-cyan), calc(0.08 * var(--tint-boost)));
    }

    .bracket-box.has-match .bracket-row { padding-right: 30px; }

    .bracket-team {
        font-size: 12px;
        color: var(--ink-55);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bracket-score {
        font-size: 12px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        color: var(--ink-30);
        flex-shrink: 0;
    }

    /* Победитель — светлее и жирнее, проигравший в сыгранном матче приглушается. */
    .bracket-row.is-winner .bracket-team { color: var(--ink-95); font-weight: 600; }
    .bracket-row.is-winner .bracket-score { color: var(--accent); font-weight: 600; }
    .bracket-box.is-done .bracket-row:not(.is-winner) .bracket-team { color: var(--ink-30); }
    .bracket-row.is-pending .bracket-team { color: var(--ink-18); font-style: italic; }

    /* Выбран путь команды — всё лишнее гаснет, как в графане при клике по серии. */
    .bracket-canvas.has-picks .bracket-box,
    .bracket-canvas.has-picks .bracket-box-caption,
    .bracket-canvas.has-picks .bracket-links path,
    .bracket-canvas.has-picks .bracket-col-title { opacity: 0.2; }

    .bracket-canvas.has-picks .bracket-box-caption.is-path { opacity: 1; }

    .bracket-canvas.has-picks .bracket-box.is-path {
        opacity: 1;
        border-color: rgba(var(--c-cyan), calc(0.45 * var(--tint-boost)));
    }

    /* Точка встречи выбранных команд. */
    .bracket-canvas.has-picks .bracket-box.is-meet {
        border-color: rgba(var(--c-amber), calc(0.7 * var(--tint-boost)));
        background: rgba(var(--c-amber), calc(0.08 * var(--tint-boost)));
    }

    .bracket-box .bracket-row[data-team-id] { cursor: pointer; }
    /* Подсветка пути включается по click, но откликнуться надо на нажатии — иначе
       на медленном клике строка секунду выглядит мёртвой. */
    .bracket-box .bracket-row[data-team-id]:active { background: var(--ink-06); }
    .bracket-box .bracket-row[data-team-id]:active .bracket-team { color: var(--accent); }
    .bracket-row.is-picked .bracket-team { color: var(--accent); font-weight: 600; }

    .bracket-tab {
        background: var(--ink-03);
        color: var(--ink-35);
        border-color: var(--ink-07);
    }

    .bracket-tab.active {
        background: rgba(var(--c-cyan), calc(0.1 * var(--tint-boost)));
        color: var(--accent);
        border-color: rgba(var(--c-cyan), calc(0.3 * var(--tint-boost)));
    }