/* ============================================
   СЧЁТ МАТЧА — окно ввода и подтверждения
   ============================================
   Своим файлом, а не внутри partners.css: окно нужно и на странице турнира,
   и в кабинете, а тот partners.css не грузит — стили просто не доезжали, и
   окно выходило без оформления, под боковым меню.

   Подложку и рамку берём общие с окнами приглашений, чтобы все окна сайта
   выглядели одинаково. */

.ms-overlay {
    position: fixed;
    inset: 0;
    background: var(--alpha-black-85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* В кабинете боковое меню поднято на 10000 и накрывало окно: нажать
       «отправить» было невозможно */
    z-index: 10050;
}

.ms-modal {
    background: var(--bg-elevated);
    border: var(--bw-hair) solid var(--alpha-lime-30);
    border-radius: var(--radius-lg);
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.ms-modal { max-width: 460px; }

.ms-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: var(--bw-hair) solid var(--border-subtle);
}

.ms-title {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--text-primary);
}

.ms-close {
    background: none;
    border: 0;
    color: var(--text-muted);
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
}

.ms-body { padding: 18px 20px 20px; }

.ms-loading {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.ms-trn {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* Пара соперников: лица по краям, имена внутри, VS посередине */
.ms-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    margin-bottom: 16px;
}

.ms-vs img,
.ms-vs .ms-noface {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 40px;
}

.ms-noface {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-style: normal;
    font-weight: 700;
    font-size: var(--fs-sm);
}

.ms-vs b {
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: break-word;
}

.ms-vs span {
    color: var(--accent);
    font-weight: 700;
    font-size: var(--fs-xs);
    flex: 0 0 auto;
}

.ms-when {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.ms-date {
    background: var(--bg-elevated);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 7px 10px;
    font-size: var(--fs-sm);
}

.ms-table { width: 100%; border-collapse: collapse; }

.ms-table th {
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
    padding: 0 0 8px;
    text-align: center;
}

.ms-table th:first-child { text-align: left; }
.ms-table td { padding: 7px 0; border-top: var(--bw-hair) solid var(--border-subtle); }

.ms-p {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.ms-p img,
.ms-p .ms-noface {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    font-size: var(--fs-2xs);
}

.ms-cell { width: 60px; text-align: center; }

.ms-in {
    width: 46px;
    height: 40px;
    text-align: center;
    font-size: var(--fs-base);
    font-weight: 700;
    background: var(--bg-elevated);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
}

.ms-in:focus { outline: none; border-color: var(--accent); }

/* ТАЙ-БРЕЙК (29.10). Два поля в одной клетке сета: очки обеих сторон, в
   порядке сторон — та же форма, что лежит в базе и что принимает
   серверная функция. Клетка показывается только при 7:6 и 6:7, прячет её
   атрибут `hidden` из js: решение живёт в своде `R.сетСТайБрейком`, одно
   на сайт и приложение. */
.ms-tb-row .ms-tb-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.ms-tb-cell {
    width: 60px;
    text-align: center;
}

.ms-tb-in {
    width: 22px;
    height: 32px;
    padding: 0;
    font-size: var(--fs-sm);
}

.ms-tb-in + .ms-tb-in { margin-left: 2px; }

/* Счёт, который прислал соперник: читается сразу, крупно */
.ms-score-big {
    text-align: center;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 1px;
    margin: 4px 0 14px;
}

.ms-hint {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin: 12px 0 16px;
    line-height: 1.5;
}

.ms-hint-center { text-align: center; }

.ms-send {
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    background: var(--accent);
    color: var(--neutral-950);
    font-size: var(--fs-base);
    font-weight: 700;
}

.ms-send:disabled { opacity: 0.6; cursor: default; }

.ms-ghost {
    background: var(--alpha-white-08);
    color: var(--text-secondary);
    border: var(--bw-hair) solid var(--border-subtle);
}

/* ЗАЗОР ПО ШКАЛЕ: было 10, стало 12 (30.10).
   ПРИЖИМАТЬ ВПРАВО НЕЧЕГО, И ЭТО ПОПРАВКА К МОЕЙ ЖЕ ЗАПИСИ: у `.ms-send`
   стоит `width: 100%`, две кнопки в ряду делят его пополам и заполняют
   целиком, так что `justify-content` здесь не меняет ничего. Неверным
   был только ПОРЯДОК. */
.ms-row2 { display: flex; gap: 12px; }

@media (max-width: 640px) {
    .ms-cell { width: 48px; }
    .ms-in { width: 40px; }
    .ms-vs b { font-size: var(--fs-sm); }

    /* СКЛАДЫВАЕМСЯ В СТОЛБЕЦ, ПЕРВИЧНАЯ СВЕРХУ — `Modal 26:143`: «Below
       480px the footer stacks and the primary goes on top». Ширина в
       медиа — 640: своих промежуточных точек останова в продукте нет. */
    .ms-row2 { flex-direction: column-reverse; }
}

/* Исход крупно над счётом: подтверждающий видит сразу, выиграл он или нет,
   а не считает в уме, где его геймы */
.ms-outcome {
    text-align: center;
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin: 6px 0 2px;
}

.ms-won { color: var(--accent); }
.ms-lost { color: var(--text-muted); }