/* ==========================================================================
   Марго Квиз — Design System v2 «Неон-сцена»
   captain-scenes.css — ПУЛЬТЫ СЦЕН ВЕЧЕРА на телефоне капитана.

   Требует: tokens.css (блок .mk-captain — шкала, --tap), motion.css,
   components.css (14 кнопка отправки, 18 бейдж таймера, 19 шапка,
   23 плашка отказа, 34 кнопка действия, 37 ачивка, 38 разбор очков),
   captain.css (каркас .mk-captain, строка тура).

   ЧТО ЗДЕСЬ. Шесть пультов на один каркас: сейфы, радар, метка,
   тотализатор, магазин, «Сцепка». Всё, что нажимают, не меньше --tap;
   всё, что должно быть понято, написано видимым текстом — подсказок по
   наведению на телефоне не существует. Цвет, кегль, отступ, радиус,
   тень — только токены. Движение — только transform / opacity.
   ========================================================================== */

/* ---------- Общее для всех пультов ---------- */

/* Кошелёк в шапке — золотом, как колонка монет на табло зала: одна
   валюта, один цвет на всех поверхностях. */
.mk-captain-bar__coins {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
    flex: none;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-dim);
}

.mk-captain-bar__coins b {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-h3);
    letter-spacing: 0;
    color: var(--gold);
}

.mk-captain-bar__coins--bump b { animation: mk-pop var(--dur-sm) var(--ease-spring) 1; }

/* Строка под действием: единственное место, где написано, что делать
   и почему пульт молчит. Место держится всегда — иначе появление
   текста дёргает кнопку под пальцем. */
.mk-scene-foot {
    min-height: calc(var(--fs-small) * 2.6);
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    line-height: 1.35;
    color: var(--text-dim);
}

.mk-scene-line { font-size: var(--fs-small); color: var(--text-mid); }

.mk-scene-task {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h3);
    color: var(--text-hi);
}

.mk-scene-rule { font-size: var(--fs-small); color: var(--text-mid); text-align: center; }
.mk-scene-rule b { color: var(--text-hi); }

/* Место модуля сцены внутри единственной зоны действия экрана: тот же
   столбец с тем же шагом, что у .mk-captain__act, но без второго
   такого же предмета в дереве. */
.mk-scene-act {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.mk-scene-acts { display: flex; gap: var(--sp-3); }
.mk-scene-acts .mk-send { flex: 1 1 auto; }
.mk-scene-acts .mk-act { flex: none; }

/* Чей ход — тот же покой, что экран ожидания: капитан 90 % «Сцепки»
   смотрит на поле, а телефон говорит, чей ход, крупно и один раз. */
.mk-scene-wait {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
}

.mk-scene-wait__what {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: 1.2;
    color: var(--text-hi);
}

.mk-scene-wait__where { font-size: var(--fs-body); color: var(--text-mid); }

/* Кошелёк внутри тела (магазин): крупно и золотом — это единственное
   число, по которому решают, что купить. */
.mk-scene-wallet {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-small);
    color: var(--text-dim);
}

.mk-scene-coins {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: 1.05;
    color: var(--gold);
}

.mk-scene-coins span {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-dim);
}

.mk-scene-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mk-scene-chips .mk-chip svg { width: 1.1em; height: 1.1em; flex: none; }
.mk-chip--used { opacity: 0.55; }

/* Сводка после сцены: изменение кошелька — герой, разбор словами — под ним. */
.mk-scene-delta {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    font-size: var(--fs-small);
    color: var(--text-mid);
}

.mk-scene-delta b {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-h1);
    line-height: 1;
    color: var(--text-hi);
}

.mk-scene-delta--plus { border-color: var(--ok); }
.mk-scene-delta--plus b { color: var(--ok); }
.mk-scene-delta--minus { border-color: var(--err); }
.mk-scene-delta--minus b { color: var(--err); }

.mk-scene-story {
    padding: var(--sp-4);
    border-radius: var(--r-md);
    border-left: 3px solid var(--emotion);
    background: var(--glass-bg);
    font-size: var(--fs-body);
    line-height: 1.45;
    color: var(--text-hi);
}

.mk-scene-story b { color: var(--emotion-soft); }
.mk-scene-story i { font-style: normal; color: var(--emotion-soft); }
.mk-scene-story u { text-decoration: none; color: var(--err); }

.mk-scene-ach { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ---------- Кнопка выбора: сейф, цель метки, нога ставки ---------- */

.mk-picks {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.mk-pick {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: var(--tap);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: transform var(--dur-xs) var(--ease-out),
                border-color var(--dur-xs) var(--ease-out);
}

.mk-pick:active { transform: scale(0.98); }
.mk-pick span { flex: 1 1 auto; min-width: 0; }
.mk-pick i {
    --mk-pick-dot: 10px;
    flex: none;
    width: var(--mk-pick-dot);
    height: var(--mk-pick-dot);
    border-radius: var(--r-full);
    background: var(--glass-border);
}

.mk-pick u {
    flex: none;
    text-decoration: none;
    font-family: var(--font-num);
    font-size: var(--fs-label);
    color: var(--emotion-soft);
}

.mk-pick--on {
    border-color: var(--emotion);
    background: var(--emotion-faint);
    box-shadow: var(--glow-emotion-soft);
}
.mk-pick--on i { background: var(--emotion-soft); box-shadow: var(--glow-emotion-soft); }

.mk-pick:disabled { opacity: 0.45; cursor: not-allowed; }
.mk-pick--on:disabled { opacity: 0.8; }
.mk-pick:disabled:active { transform: none; }

/* ---------- Радар: сетка одинаковых клеток ---------- */

.mk-cells {
    display: grid;
    grid-template-columns: repeat(var(--mk-cols, 3), 1fr);
    gap: var(--sp-2);
}

.mk-cell {
    min-height: var(--tap);
    aspect-ratio: 1 / 1;
    border-radius: var(--r-md);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    cursor: pointer;
    transition: transform var(--dur-xs) var(--ease-out),
                border-color var(--dur-xs) var(--ease-out);
}

.mk-cell:active { transform: scale(0.96); }

.mk-cell--on {
    border-color: var(--emotion);
    background: var(--emotion-faint);
    box-shadow: var(--glow-emotion-soft);
}

.mk-cell:disabled { opacity: 0.45; cursor: not-allowed; }
.mk-cell--on:disabled { opacity: 0.85; }

/* ---------- Чёрная метка: карта роли ---------- */

.mk-role {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    text-align: center;
}

.mk-role__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: 1.1;
    color: var(--mk-role-c, var(--text-hi));
}

.mk-role__sub { font-size: var(--fs-small); line-height: 1.35; color: var(--text-mid); }
.mk-role__sub i { font-style: normal; font-weight: 700; color: var(--err); }
.mk-role__safe { font-size: var(--fs-label); color: var(--text-dim); }

.mk-role[data-role="peace"] { --mk-role-c: var(--ok); border-color: var(--ok); }
.mk-role[data-role="thief"],
.mk-role[data-role="partner"] { --mk-role-c: var(--err); border-color: var(--err); box-shadow: var(--glow-err-soft); }

/* ---------- Тотализатор: степпер ставки ---------- */

.mk-stake {
    display: grid;
    grid-template-columns: var(--tap) 1fr var(--tap);
    align-items: center;
    gap: var(--sp-3);
}

.mk-stake__btn {
    height: var(--tap);
    border-radius: var(--r-md);
    border: 1px solid var(--emotion-border);
    background: var(--glass-bg);
    color: var(--text-hi);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 1;
    cursor: pointer;
    transition: transform var(--dur-xs) var(--ease-out);
}

.mk-stake__btn:active { transform: scale(0.94); }
.mk-stake__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.mk-stake__btn:disabled:active { transform: none; }

.mk-stake__num {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: var(--fs-h1);
    line-height: 1;
    color: var(--gold);
}

.mk-stake__num small {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-dim);
}

/* ---------- Магазин: полка ---------- */

.mk-goods { display: flex; flex-direction: column; gap: var(--sp-2); }

.mk-good {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: var(--tap);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-hi);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: transform var(--dur-xs) var(--ease-out),
                border-color var(--dur-xs) var(--ease-out);
}

.mk-good:active { transform: scale(0.98); }
.mk-good__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-good__body b { font-size: var(--fs-body); font-weight: 600; }
.mk-good__body small { font-size: var(--fs-small); color: var(--text-mid); }
/* Причина, по которой кнопка погашена, — словами, прямо на ней. */
.mk-good__body em { font-style: normal; font-size: var(--fs-label); color: var(--warn); }
.mk-good--own .mk-good__body em { color: var(--ok); }

.mk-good u {
    flex: none;
    text-decoration: none;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--gold);
}

.mk-good:disabled { cursor: not-allowed; }
.mk-good:disabled:not(.mk-good--own) { opacity: 0.5; }
.mk-good:disabled:not(.mk-good--own) u { color: var(--text-dim); }
.mk-good:disabled:active { transform: none; }
.mk-good--own { border-color: var(--ok); background: var(--glass-bg-heavy); }

/* ---------- «Сцепка»: решение перед ходом ---------- */

.mk-opts { display: flex; flex-direction: column; gap: var(--sp-2); }

.mk-opt {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: var(--tap);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-hi);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: transform var(--dur-xs) var(--ease-out),
                border-color var(--dur-xs) var(--ease-out);
}

.mk-opt:active { transform: scale(0.98); }

.mk-opt__mark {
    flex: none;
    width: calc(var(--tap) * 0.62);
    height: calc(var(--tap) * 0.62);
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--bg-1);
    color: var(--text-mid);
}

.mk-opt__mark svg { width: 60%; height: 60%; }
.mk-opt__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-opt__body b { font-size: var(--fs-body); font-weight: 600; }
.mk-opt__body small { font-size: var(--fs-small); color: var(--text-mid); }

.mk-opt[aria-pressed="true"] {
    border-color: var(--emotion);
    background: var(--emotion-faint);
    box-shadow: var(--glow-emotion-soft);
}
.mk-opt[aria-pressed="true"] .mk-opt__mark { background: var(--emotion-soft); color: var(--emotion-ink); }

.mk-opt--vabank { border-color: var(--gold); }
.mk-opt--vabank .mk-opt__body b { color: var(--gold); }
.mk-opt--vabank[aria-pressed="true"] { border-color: var(--gold); background: var(--glass-bg-heavy); box-shadow: 0 0 16px var(--gold); }
.mk-opt:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--glass-border); }
.mk-opt:disabled:active { transform: none; }

/* ---------- «Сцепка»: 24 плитки координат ---------- */

/* Шесть колонок на 342 px содержимого — это 53 px на плитку при зазоре 4:
   по ширине чуть ниже --tap, по высоте (3:4 и пол --tap) заметно выше.
   Бьют в центр плитки, и центры стоят через 57 px — промах по соседке
   при таком шаге редок, а сетку шире телефона не сделать. */
.mk-pad {
    display: grid;
    grid-template-columns: repeat(var(--mk-cols, 6), 1fr);
    gap: var(--sp-1);
}

.mk-tile {
    min-height: var(--tap);
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--r-sm);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-mid);
    font-family: var(--font-num);
    font-size: var(--fs-body);
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--dur-xs) var(--ease-spring),
                border-color var(--dur-xs) var(--ease-out);
}

.mk-tile:active { transform: scale(0.94); }
.mk-tile:disabled { opacity: 0.35; cursor: not-allowed; }
.mk-tile:disabled:active { transform: none; }

/* Пустая клетка — карт больше нет: не кнопка, а место, где она была. */
.mk-tile--empty { border-style: dashed; background: transparent; }
.mk-tile--empty:disabled { opacity: 0.25; }

/* Открытая карта на поле — плитка подсвечена, нажать нельзя. */
.mk-tile--open { background: var(--emotion-soft); color: var(--emotion-ink); border-color: transparent; }
.mk-tile--open:disabled { opacity: 0.9; }

.mk-tile--sent { border-color: var(--emotion); box-shadow: var(--glow-emotion-soft); }

/* Единственный момент, когда плитка показывает не координату, а карту:
   приватная подсказка фонаря или рентгена. Секунды — и снова координата.
   Цвет — данные пары с поля (--pc), не акцент. */
.mk-tile--peek {
    border-color: var(--pc, var(--emotion));
    color: var(--pc, var(--emotion));
    box-shadow: 0 0 18px var(--pc, var(--emotion));
    animation: mk-enter-scale var(--dur-sm) var(--ease-spring) both;
}
.mk-tile--peek:disabled { opacity: 1; }
.mk-tile--peek svg { width: 72%; height: 72%; }

/* Во время показа остальные плитки гаснут, а не подсказка — ради неё
   пульт и открывали. */
.mk-pad[data-peek="1"] .mk-tile:not(.mk-tile--peek) { opacity: 0.35; }

/* ---------- «Сцепка»: в кого летит бомба ---------- */

.mk-bomb-head {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: 1.15;
    color: var(--err);
}

.mk-bombs { display: flex; flex-direction: column; gap: var(--sp-2); }

.mk-bomb {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: var(--tap);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--err);
    background: var(--glass-bg);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: transform var(--dur-xs) var(--ease-out);
}

.mk-bomb:active { transform: scale(0.98); }
.mk-bomb i {
    --mk-bomb-dot: 10px;
    flex: none;
    width: var(--mk-bomb-dot);
    height: var(--mk-bomb-dot);
    border-radius: var(--r-full);
    background: var(--err);
    box-shadow: var(--glow-err-soft);
}
.mk-bomb span { flex: 1 1 auto; min-width: 0; }
.mk-bomb em { flex: none; font-style: normal; font-size: var(--fs-small); color: var(--text-mid); }

/* Лидер помечен прямо в списке: молчание отправляет бомбу именно ему,
   и знать об этом надо ДО того, как истекут пятнадцать секунд. */
.mk-bomb--lead { box-shadow: var(--glow-err); }
.mk-bomb--lead em { color: var(--err); }
.mk-bomb--sent { background: var(--err-glow); }
.mk-bomb:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- «Сцепка»: статистика команды и сводка ---------- */

.mk-ps { display: flex; flex-direction: column; gap: var(--sp-4); }

.mk-ps__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--glass-border);
}

.mk-ps__place {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h1);
    line-height: 1;
    color: var(--emotion-soft);
}

.mk-ps__place small,
.mk-ps__who small {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-dim);
}

.mk-ps__who { min-width: 0; }
.mk-ps__who b {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-body);
    color: var(--text-hi);
    overflow-wrap: break-word;
}

.mk-ps__score {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: var(--fs-h1);
    line-height: 1;
    color: var(--text-hi);
}

.mk-ps__gap { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-small); color: var(--text-mid); }
.mk-ps__gap span { display: flex; justify-content: space-between; gap: var(--sp-3); }
.mk-ps__gap b { font-family: var(--font-num); color: var(--text-hi); }

.mk-ps__sec { display: flex; flex-direction: column; gap: var(--sp-2); }

.mk-ps__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.mk-pchip {
    --mk-pchip: 34px;
    width: var(--mk-pchip);
    height: var(--mk-pchip);
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--pc, var(--glass-border));
    background: var(--glass-bg);
    color: var(--pc, var(--text-mid));
}

.mk-pchip svg { width: 68%; height: 68%; }

.mk-ps__vb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--text-mid); }
.mk-ps__vb i {
    --mk-vb-dot: 12px;
    width: var(--mk-vb-dot);
    height: var(--mk-vb-dot);
    border-radius: var(--r-full);
    border: 1px solid var(--gold);
    background: transparent;
}
.mk-ps__vb i[data-on="1"] { background: var(--gold); box-shadow: 0 0 10px var(--gold); }