/* Студия (демо-доска): стили обоих окон и сцены. ТЗ: Tasks/WBChess_TZ_demo_board.md.

   Часть 1 - сцена #studio-stage 1920x1080 (одна и та же в окне управления и в окне вывода).
   Часть 2 - окно управления (studio.php).
   Часть 3 - окно вывода (studio_output.php). */

/* ── 1. Сцена ─────────────────────────────────────────────────────────────── */

.studio-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1920px;
    height: 1080px;
    transform-origin: center center;
    overflow: hidden;
    background: #1e293b;
    color: #f8fafc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    user-select: none;
}

.studio-stage [hidden] {
    display: none !important;
}

/* Размеры блоков - с полями (в окне управления так задаёт .st-page, окну вывода - здесь же) */
.studio-stage *, .studio-stage *::before, .studio-stage *::after {
    box-sizing: border-box;
}

/* Фон - слой под доской */
.studio-stage .st-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.studio-stage .st-bg-image {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
}

.studio-stage .st-bg-dim {
    position: absolute;
    inset: 0;
}

/* Сетка пресетов. Область camera зарезервирована под этап записи и скрыта. */
.studio-stage .st-layout {
    position: absolute;
    inset: 0;
    padding: 40px;
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "header"
        "board"
        "caption"
        "strip";
}

.studio-stage .st-header { grid-area: header; }
.studio-stage .st-board-area { grid-area: board; min-height: 0; display: flex; align-items: center; justify-content: center; }
.studio-stage .st-side { grid-area: side; display: none; }
.studio-stage .st-camera { grid-area: camera; display: none; }
.studio-stage .st-caption { grid-area: caption; }
.studio-stage .st-notation-strip { grid-area: strip; }

/* Доска слева, справа боковая колонка (нотация, плашка партии, комментарий) */
.studio-stage.preset-board_notation .st-layout,
.studio-stage.preset-board_info .st-layout {
    grid-template-columns: 1000px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
        "board side"
        "caption caption";
}

.studio-stage.preset-board_notation .st-header { position: absolute; left: 1072px; top: 40px; right: 40px; }
.studio-stage.preset-board_notation .st-board-area,
.studio-stage.preset-board_info .st-board-area { justify-content: flex-start; }

.studio-stage.preset-board_notation .st-side,
.studio-stage.preset-board_info .st-side {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-height: 0;
    padding-top: 8px;
}

/* Своя раскладка: блоки стоят по координатам из настроек (left/top/width/height задаёт studio-stage.js) */
.studio-stage.preset-custom .st-layout { display: block; padding: 0; }
.studio-stage.preset-custom .st-header,
.studio-stage.preset-custom .st-board-area,
.studio-stage .st-free { position: absolute; overflow: hidden; }
/* Свои блоки (картинки, тексты, часы) - самый верхний слой сцены */
.studio-stage .st-items { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.studio-stage .st-item { position: absolute; overflow: hidden; }
.studio-stage .st-item-image img { display: block; width: 100%; height: 100%; }
.studio-stage .st-item-text {
    display: flex;
    align-items: center;
    line-height: 1.2;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.studio-stage .st-item-text.has-bg { padding: 0.15em 0.4em; border-radius: 16px; }
.studio-stage .st-item-text:not([data-type="text"]) { white-space: nowrap; }

/* Доска - нижний слой: положенные на неё блоки видны поверх */
.studio-stage.preset-custom .st-header,
.studio-stage .st-free { z-index: 1; }
.studio-stage .st-comment.st-free { max-height: none; display: block; -webkit-line-clamp: unset; }

/* Предпросмотр «Параметров сцены» (только окно управления): выключенные блоки бледные с подписью, блок без текста - с образцом,
   открытый в настройках - с рамкой; клик по блоку открывает его настройки */
.studio-stage.is-params-preview .st-header,
.studio-stage.is-params-preview .st-notation,
.studio-stage.is-params-preview .st-notation-strip,
.studio-stage.is-params-preview .st-comment,
.studio-stage.is-params-preview .st-caption { cursor: pointer; outline: 3px dashed rgba(148, 163, 184, 0.55); outline-offset: -3px; }
/* Подпись блока кладётся в его угол: блоку нужна своя система координат, но только если он не позиционирован
   (блоки своей раскладки и плашка в колонке уже absolute - их не трогаем; класс ставит studio-stage.js) */
.studio-stage.is-params-preview .needs-rel { position: relative; }
.studio-stage.is-params-preview .is-off { opacity: 0.38; }
.studio-stage.is-params-preview .is-sample:not(.is-off) { opacity: 0.8; }
.studio-stage.is-params-preview .is-editing { outline: 4px solid #facc15; opacity: 1; }
/* Подписи блоков: отдельный слой над сценой, их ставит studio-stage.js */
.studio-stage .st-preview-labels { position: absolute; inset: 0; z-index: 11; pointer-events: none; }
.studio-stage .st-preview-labels[hidden] { display: none; }
.studio-stage .st-preview-label {
    position: absolute;
    padding: 2px 12px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.5);
    color: #e2e8f0;
    font: 600 26px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    white-space: nowrap;
}
.studio-stage .st-preview-label.is-off { color: #94a3b8; }
.studio-stage .st-preview-label.is-editing { background: #facc15; border-color: #facc15; color: #1e293b; }

/* Расстановка блоков (только окно управления): рамки поверх сцены, размеры в пикселях сцены */
.studio-stage .st-layout-editor { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.st-wrap.is-show .st-layout-editor { display: none; }
.st-layout-frame {
    position: absolute;
    pointer-events: auto;
    cursor: move;
    border: 4px dashed rgba(96, 165, 250, 0.95);
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.12);
    touch-action: none;
}
.st-layout-frame:hover, .st-layout-frame.is-dragging { border-style: solid; background: rgba(37, 99, 235, 0.22); }
.st-layout-frame.is-dragging { z-index: 1; }
/* Выбранная рамка - поверх остальных: блок, накрытый другими, выбирают в списке и тянут */
.st-layout-frame.is-selected { z-index: 1; border-style: solid; border-color: #facc15; }
.st-layout-frame.is-selected .st-layout-label, .st-layout-frame.is-selected .st-layout-resize { background: #ca8a04; }
.st-layout-label {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 4px 14px;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    pointer-events: none;
}
.st-layout-resize {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 44px;
    height: 44px;
    border-radius: 8px 0 8px 0;
    background: #2563eb;
    cursor: nwse-resize;
}
.st-layout-guide { position: absolute; background: #f472b6; pointer-events: none; }
.st-layout-guide.is-x { top: 0; bottom: 0; width: 3px; margin-left: -1px; }
.st-layout-guide.is-y { left: 0; right: 0; height: 3px; margin-top: -1px; }

/* Доска квадратная и занимает область по меньшей стороне */
.studio-stage .st-board-box {
    position: relative;
    height: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    max-width: 100%;
}

.studio-stage .st-board,
.studio-stage .st-board-inner {
    position: absolute;
    inset: 0;
}

.studio-stage .st-texts {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.studio-stage .st-text {
    position: absolute;
    transform: translate(-50%, -50%);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

/* Оформление текста плашки, нотации и комментария: переменные --st-t-* задаёт studio-stage.js по настройкам
   (ТЗ studio_public §8.8); значения после запятой - прежний вид, он же при настройках по умолчанию */
.studio-stage .st-header,
.studio-stage .st-notation,
.studio-stage .st-notation-strip,
.studio-stage .st-comment,
.studio-stage .st-caption {
    font-family: var(--st-t-font, inherit);
    color: var(--st-t-color, inherit);
    font-style: var(--st-t-style, normal);
}

/* Крупные шрифты - читаемость на ТВ с расстояния, без мелких элементов */
.studio-stage .st-header { text-align: var(--st-t-align, start); background: var(--st-t-bg, transparent); }
.studio-stage .st-header.has-plate { padding: 14px 24px; border-radius: 18px; }

.studio-stage .st-header-players {
    font-size: var(--st-t-size, 54px);
    font-weight: var(--st-t-weight, 700);
    line-height: 1.15;
    text-shadow: var(--st-t-shadow, 0 2px 8px rgba(0, 0, 0, 0.55));
}

.studio-stage .st-header-sub {
    margin-top: 6px;
    font-size: calc(var(--st-t-size, 54px) * 0.667);
    opacity: 0.85;
    text-shadow: var(--st-t-shadow, 0 2px 8px rgba(0, 0, 0, 0.55));
}

.studio-stage .st-notation {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: var(--st-t-justify, normal);
    gap: 4px 14px;
    font-size: var(--st-t-size, 52px);
    line-height: 1.3;
    font-weight: var(--st-t-weight, 600);
    text-shadow: var(--st-t-shadow, 0 2px 8px rgba(0, 0, 0, 0.55));
    background: var(--st-t-bg, transparent);
}

.studio-stage .st-notation-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--st-t-justify, center);
    gap: 4px 12px;
    font-size: var(--st-t-size, 40px);
    font-weight: var(--st-t-weight, 600);
    max-height: 100px;
    overflow: hidden;
    text-shadow: var(--st-t-shadow, 0 2px 8px rgba(0, 0, 0, 0.55));
    background: var(--st-t-bg, transparent);
}

.studio-stage .st-notation.has-plate,
.studio-stage .st-notation-strip.has-plate { padding: 12px 20px; border-radius: 18px; }

.studio-stage .st-move {
    padding: 0 8px;
    border-radius: 8px;
}

.studio-stage .st-move.is-current {
    background: var(--st-t-current-bg, rgba(250, 204, 21, 0.92));
    color: var(--st-t-current-color, #1e293b);
    text-shadow: none;
}

.studio-stage .st-comment {
    flex: 0 0 auto;
    max-height: 300px;
    overflow: hidden;
    font-size: var(--st-t-size, 44px);
    font-weight: var(--st-t-weight, 400);
    text-align: var(--st-t-align, start);
    text-shadow: var(--st-t-shadow, none);
    line-height: 1.3;
    padding: 20px 26px;
    border-radius: 18px;
    background: var(--st-t-bg, rgba(15, 23, 42, 0.62));
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

/* Субтитр-комментарий: полоса под доской, до 3 строк, дальше многоточие */
.studio-stage .st-caption {
    justify-self: center;
    max-width: 1700px;
    font-size: var(--st-t-size, 44px);
    font-weight: var(--st-t-weight, 400);
    line-height: 1.3;
    text-align: var(--st-t-align, center);
    text-shadow: var(--st-t-shadow, none);
    padding: 14px 30px;
    border-radius: 16px;
    background: var(--st-t-bg, rgba(15, 23, 42, 0.62));
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── 2. Окно управления ───────────────────────────────────────────────────── */

/* Публичная страница (этап 1.1): своя обёртка вместо раскладки админки */
.st-page {
    max-width: 1800px;
    margin: 0 auto;
    padding: 16px 20px 32px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

.st-page *, .st-page *::before, .st-page *::after,
.st-dialog *, .st-dialog *::before, .st-dialog *::after {
    box-sizing: border-box;
}

.st-page p, .st-dialog p { margin: 0; }

/* Студия рассчитана на компьютер (§4.4): на узком экране вместо неё сообщение */
.st-row .st-spacer { flex: 1 1 auto; }

/* Цвета нужны и диалогам, которые живут вне .st-app (в body) */
:root {
    --st-accent: #2563eb;
    --st-accent-soft: #dbeafe;
    --st-rec: #d97706;
    --st-line: #dde3ea;
    --st-muted: #6b7280;
}

.st-narrow { display: none; padding: 40px 0; text-align: center; }
.st-narrow p { margin-bottom: 16px; font-size: 1.1rem; }

@media (max-width: 899px) {
    .st-page .st-app { display: none !important; }
    .st-page .st-narrow { display: block; }
}

/* Текущий сценарий */
.st-scenario-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    background: #f8fafc;
}

.st-scenario-title {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    text-align: left;
}

.st-scenario-title:hover { text-decoration: underline; }
/* Название (переносится, если длинное) слева, кнопка списка справа; строка состояния резервирует место, чтобы панель не прыгала */
.st-scenario-head { flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; }
.st-scenario-head .st-scenario-title { flex: 1 1 auto; min-width: 0; }
.st-scenario-head .st-btn { flex: 0 0 auto; white-space: nowrap; }
.st-scenario-bar[data-account="1"] #scenarioStatus { min-height: 1.3em; line-height: 1.3; }
#scenarioStatus[data-status="error"], #scenarioStatus[data-status="conflict"], #scenarioStatus[data-status="limit"] { color: #b91c1c; }
.st-scenario-conflict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #b91c1c; }
.st-scenario-row { display: flex; align-items: center; gap: 8px; }
.st-scenario-row.is-current .st-scenario-open { border-color: #2563eb; }
.st-scenario-open { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px; border: 1px solid #dde3ea; border-radius: 7px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.st-scenario-open:hover { border-color: #2563eb; }

.st-app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 20px;
    align-items: start;
}

/* Атрибут hidden должен побеждать display из правил ниже (иначе окна «всегда открыты») */
.st-app[hidden], .st-app [hidden], .st-lock[hidden], .st-output-body [hidden] { display: none !important; }

.st-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.st-wrap {
    position: relative;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.st-wrap-fit {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.st-wrap:fullscreen {
    border-radius: 0;
    display: block;
}

.st-wrap:fullscreen .st-wrap-fit {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
}

.st-showbar {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.86);
}

.st-showbar .st-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
    font-size: 1.1rem;
}

/* Кнопки под сценой: две группы (навигация и правка / показ), по центру; не поместились - группы встают друг под другом, тоже по центру */
.st-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 22px;
}

.st-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.st-toolbar-group svg { display: block; }

.st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--st-line);
    border-radius: 7px;
    background: #fff;
    color: #1f2937;
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.2;
    cursor: pointer;
}

.st-btn:hover:not(:disabled) { border-color: var(--st-accent); color: var(--st-accent); }
.st-btn:disabled { opacity: 0.4; cursor: default; }
.st-btn-icon { min-width: 38px; padding: 7px 8px; font-size: 1.05rem; }
.st-btn-primary { background: var(--st-accent); border-color: var(--st-accent); color: #fff; }
.st-btn-primary:hover:not(:disabled) { color: #fff; filter: brightness(1.08); }
.st-btn.is-active { background: var(--st-accent-soft); border-color: var(--st-accent); color: var(--st-accent); }

.st-status {
    min-height: 1.4em;
    font-size: 0.9rem;
    color: #b45309;
}

/* p.* - иначе побеждает p:not(.u-text-variant) { font-size: 1.125rem } из nicepage.css */
.st-muted, p.st-muted { color: var(--st-muted); font-size: 0.85rem; }
.st-error, p.st-error { color: #b91c1c; font-size: 0.88rem; margin: 4px 0; }
.st-hint, p.st-hint { color: var(--st-muted); font-size: 0.82rem; margin: 6px 0; }

/* Режим «Запоминать изменения»: REC-индикатор другого цвета, чем будущая запись видео */
.st-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--st-line);
    border-radius: 8px;
    background: #fff;
}

/* Правый край строки «Запоминать»: метка записи и кнопка «?» */
.st-remember-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* Кнопка «?»: пояснение открывается окошком поверх, а не строкой текста в панели */
.st-help-end { margin-left: auto; }
.st-help {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--st-muted);
}
/* Окошко пояснения у кнопки «?» (позиция задаётся из JS) */
.st-popover {
    position: fixed;
    z-index: 5200;
    width: max-content;
    max-width: min(340px, calc(100vw - 16px));
    padding: 10px 12px;
    border: 1px solid var(--st-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.22);
    font-size: 0.92rem;
    line-height: 1.5;
    color: #1f2937;
}

.st-remember-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--st-rec);
}

.st-remember-badge::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--st-rec);
    animation: st-blink 1.2s infinite;
}

@keyframes st-blink { 50% { opacity: 0.25; } }

.st-app.is-remembering .st-remember {
    border-color: var(--st-rec);
    background: #fffbeb;
}

/* Правая колонка: вкладки и панели */
.st-panel {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    min-width: 0;
}

/* Вкладки - одной строкой, активная подчёркнута; на длинных переводах строка прокручивается */
.st-tabs {
    display: flex;
    padding: 0 6px;
    border-bottom: 1px solid var(--st-line);
    /* overflow-y: hidden - иначе рядом с горизонтальной прокруткой браузер рисует ещё и вертикальную */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.st-tab {
    flex: 1 0 auto;
    padding: 10px 6px 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font: inherit;
    font-size: 0.82rem;
    white-space: nowrap;
    color: var(--st-muted);
    cursor: pointer;
}

.st-tab:hover { color: #1f2937; }
.st-tab.is-active { color: var(--st-accent); border-bottom-color: var(--st-accent); }

.st-section {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.st-group { display: flex; flex-direction: column; gap: 6px; }
.st-group-title, .st-field-title { font-size: 0.8rem; font-weight: 600; color: var(--st-muted); text-transform: none; }
.st-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.st-field { display: flex; flex-direction: column; gap: 3px; font-size: 0.88rem; }
.st-input {
    padding: 6px 8px;
    border: 1px solid var(--st-line);
    border-radius: 6px;
    font: inherit;
    font-size: 0.92rem;
    background: #fff;
    min-width: 0;
}
.st-input-narrow { width: 82px; }
.st-color { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--st-line); border-radius: 6px; background: #fff; }
textarea.st-input { resize: vertical; min-height: 90px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; }

.st-check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }

.st-segment { display: inline-flex; border: 1px solid var(--st-line); border-radius: 7px; overflow: hidden; align-self: flex-start; }
.st-seg-btn { padding: 6px 12px; border: 0; background: #fff; font: inherit; font-size: 0.86rem; cursor: pointer; }
.st-seg-btn + .st-seg-btn { border-left: 1px solid var(--st-line); }
.st-seg-btn.is-active { background: var(--st-accent-soft); color: var(--st-accent); font-weight: 600; }

/* Список ходов: в панели партии, занимает всё место между шапкой и кнопками сохранения */
.st-moves {
    flex: 1 1 300px;
    min-height: 300px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--st-line);
    border-radius: 8px;
    background: #fff;
    font-size: 1rem;
    line-height: 1.5;
    color: #111827;
}

/* Партия: пиктограммы загрузки сверху, список ходов тянется, сохранение внизу */
.st-game-actions { gap: 6px; }
.st-game-actions .st-btn-icon { min-width: 40px; height: 38px; }
.st-game-actions .st-btn-icon svg { display: block; }
.st-section-game { flex: 1 1 auto; min-height: 0; }
textarea.st-pgn-text { width: 100%; min-height: 320px; }
.st-text-section { padding-top: 12px; border-top: 1px solid var(--st-line); }
.st-text-place { align-self: flex-start; }

.st-moves-title { font-weight: 600; margin-bottom: 8px; color: #1f2937; }
/* Колонки ходов узкие (по содержимому), всё свободное место уходит в четвёртую; варианты идут на всю ширину */
.st-moves-grid { display: grid; grid-template-columns: 2.6em repeat(2, minmax(5.5em, max-content)) 1fr; gap: 2px 8px; align-items: baseline; }
.st-moves-num { color: #4b5563; text-align: right; }
/* Начало следующей партии (две партии подряд): строка на всю ширину с установкой позиции и тегами новой партии */
.st-moves-game { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--st-line); }
.st-moves-game-title { font-weight: 600; color: #1f2937; }
/* Вариант: отдельный блок с цветной полосой слева (цвет зависит от глубины), чтобы ветку было видно сразу */
.st-moves-var {
    grid-column: 1 / -1;
    margin: 3px 0;
    padding: 4px 8px;
    border-left: 4px solid #3b82f6;
    border-radius: 0 6px 6px 0;
    background: #eff6ff;
    color: #111827;
    font-size: 0.97rem;
    line-height: 1.75;
}
.st-moves-var[data-depth="2"] { border-left-color: #8b5cf6; background: #f5f3ff; }
.st-moves-var[data-depth="3"] { border-left-color: #0d9488; background: #f0fdfa; }
.st-moves-var[data-depth="4"], .st-moves-var[data-depth="5"], .st-moves-var[data-depth="6"] { border-left-color: #d97706; background: #fffbeb; }
.st-mv { padding: 1px 6px; border-radius: 5px; cursor: pointer; }
.st-mv:hover { background: #dbeafe; }
/* Текущий ход: сплошной акцентный цвет и белый текст, виден с любого места списка */
.st-mv.is-current, .st-mv.is-current:hover { background: var(--st-accent); color: #fff; font-weight: 700; }
.st-mv.is-temp { font-style: italic; color: #b45309; }
.st-mv.is-temp.is-current { color: #fff; }
/* «Параметры сцены»: кнопка в начале вкладки «Сцена» и экран с кнопкой «назад» */
.st-scene-params-btn { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 12px; padding: 9px 12px; font-weight: 600; }
.st-scene-params-btn svg { flex: 0 0 auto; color: var(--st-accent); }
.st-subhead { align-items: center; margin-bottom: 10px; }
.st-arrange-link { align-self: flex-start; margin-top: 6px; }
#sceneParams[hidden] { display: none; }

/* Настройки текста блока («Параметры сцены» и расстановка блоков, ⚙ рядом с переключателем блока) */
.st-param-row { display: flex; align-items: center; gap: 6px; }
.st-param-row .st-check { flex: 1 1 auto; }
.st-gear { font-size: 1rem; line-height: 1; }
.st-gear.is-active { border-color: var(--st-accent); background: var(--st-accent-soft); color: var(--st-accent); }
.st-text-style { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px; border: 1px solid #fde68a; border-radius: 8px; background: #fffbeb; }
.st-text-style[hidden] { display: none; }
.st-text-style-head { align-items: center; }
.st-header-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }

/* Шаги после хода: «▸1», «▸2» - мельче хода, но кликаются так же */
/* Кадры хода: каждый на своей строке под ходом, с отступом (в сетке - от колонки самого хода) */
.st-steps { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: 1px 0 4px; }
.st-mv.st-step { padding: 1px 8px; font-size: 0.93em; color: #6d28d9; }
.st-mv.st-step.is-temp { color: #b45309; }
.st-mv.st-step.is-current { color: #fff; }
.st-moves-root-steps { margin-bottom: 4px; }
/* Значки изменений справа от хода или кадра: «▸» - стрелки / пометки, пешка - другой набор фигур, круговые стрелки - разворот доски */
.st-step-row { display: flex; align-items: center; gap: 2px; }
.st-ind { display: inline-flex; vertical-align: middle; align-items: center; margin-left: 3px; cursor: pointer; }
.st-ind svg { display: block; width: 14px; height: 14px; }
.st-ind-markup { color: #6d28d9; }
.st-ind-pieces { color: #0f766e; }
.st-ind-flip { color: #2563eb; }
.st-ind-markup svg { width: 12px; height: 12px; }

/* Меню по правому клику в списке ходов */
.st-context-menu {
    position: fixed;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 4px;
    border: 1px solid var(--st-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
}
.st-context-item { padding: 7px 12px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer; }
.st-context-item:hover, .st-context-item:focus { background: var(--st-accent-soft); outline: none; }

/* Установка позиции из редактора: начало ветки с заданной позиции */
.st-mv.is-setup { color: #0f766e; }
.st-mv.is-setup.is-current { color: #fff; }
.st-mv.is-setup::before { content: "\270E\00a0"; }

/* Палитры меток и стрелок */
.st-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.st-swatch { width: 34px; height: 34px; padding: 0; border: 2px solid transparent; border-radius: 6px; background: #fff; cursor: pointer; overflow: hidden; }
.st-swatch svg { width: 100%; height: 100%; display: block; }
.st-swatch.is-active { border-color: var(--st-accent); }
.st-swatches-arrow .st-swatch { width: 52px; height: 30px; }
.st-counters { display: flex; gap: 8px; flex-wrap: wrap; }
.st-counter { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--st-line); border-radius: 7px; background: #fff; font: inherit; font-size: 0.85rem; cursor: pointer; }
.st-counter:hover { border-color: #b91c1c; }
.st-counter-count { font-weight: 700; }

/* Плитки вида */
.st-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.st-tile { padding: 4px; border: 2px solid var(--st-line); border-radius: 8px; background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.st-tile.is-active { border-color: var(--st-accent); background: var(--st-accent-soft); }
.st-tile-icon { display: block; width: 44px; height: 44px; }
.st-tile-icon svg { width: 100%; height: 100%; }
.st-tile-captioned .st-tile-icon { width: 120px; height: 24px; }
.st-tile-caption { font-size: 0.7rem; color: var(--st-muted); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-tile-group { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.st-tile-group-title { font-size: 0.75rem; color: var(--st-muted); }
.st-tile-group-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
/* Набор фигур: в панели - текущий и кнопка «Выбрать», полный список - в диалоге плитками крупнее */
.st-set-current { display: flex; align-items: center; gap: 8px; }
.st-set-grid { margin: 4px 0; }
.st-set-grid .st-tile-captioned .st-tile-icon { width: 186px; height: 31px; }
.st-set-grid .st-tile-caption { max-width: 186px; font-size: 0.78rem; }
.st-tile:hover { border-color: var(--st-accent); }

/* Надписи */
.st-text-list { display: flex; flex-direction: column; gap: 4px; }
.st-text-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--st-line); border-radius: 6px; background: #0f172a; }
.st-text-item-label { flex: 1 1 auto; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Тёмный фон - чтобы были видны светлые надписи (цвет подписи задаёт код); клетку осветляем */
.st-text-item .st-muted { color: #94a3b8; }

/* Редактор позиции сайта (chesseditor/board_editor.css даёт z-index 1000): на странице Студии есть шапка сайта
   (.u-header - 9999, выбор языка - 99999), и её меню ложилось поверх окна редактора */
.chess-editor-overlay { z-index: 100000; }

/* «Призрак» метки при перетаскивании из палитры разметки: размер - клетка доски на экране, задаётся из кода */
.st-drag-ghost { position: fixed; z-index: 3000; pointer-events: none; opacity: 0.9; }
.st-drag-ghost svg { width: 100%; height: 100%; display: block; }
/* Значки меток тянутся пальцем / мышью, а не прокручивают страницу */
.st-swatch { touch-action: none; user-select: none; -webkit-user-select: none; }

/* Фигура, которую тащат по доске, создаётся библиотекой в body размером клетки в разметке сцены (1920x1080), без учёта
   масштаба, в который сцена вписана в окно. --st-scale (задаётся из кода) приводит её к размеру клетки на экране;
   центр остаётся под указателем, потому что масштаб считается от центра элемента */
.cm-chessboard-draggable-piece { transform: scale(var(--st-scale, 1)); }

/* Сцена и фон */
.st-presets { display: flex; gap: 8px; }
.st-preset { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 2px solid var(--st-line); border-radius: 8px; background: #fff; font: inherit; font-size: 0.78rem; cursor: pointer; }
.st-preset.is-active { border-color: var(--st-accent); background: var(--st-accent-soft); }
.st-preset-icon { display: block; width: 64px; height: 36px; border-radius: 4px; background: #334155; position: relative; }
.st-preset-icon::before { content: ""; position: absolute; top: 4px; bottom: 4px; width: 28px; background: #cbd5e1; border-radius: 2px; left: 18px; }
.st-preset-board_notation::before, .st-preset-board_info::before { left: 4px; }
.st-preset-board_notation::after, .st-preset-board_info::after { content: ""; position: absolute; right: 4px; top: 6px; width: 24px; height: 4px; background: #facc15; box-shadow: 0 8px 0 #94a3b8, 0 16px 0 #94a3b8; }
/* «Своя»: несколько свободных блоков пунктиром */
.st-preset-custom::before { left: 4px; top: 4px; bottom: 4px; width: 26px; background: transparent; border: 1.5px dashed #cbd5e1; }
.st-preset-custom::after { content: ""; position: absolute; right: 4px; top: 4px; width: 26px; height: 10px; border: 1.5px dashed #facc15; border-radius: 2px; }
.st-preset:disabled { opacity: 0.45; cursor: default; }
.st-arrange-btn { align-self: flex-start; margin-top: 4px; }
.st-arrange { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--st-line); border-radius: 8px; background: #f8fafc; }

/* Свои блоки: добавить, список (сверху - верхний слой), свойства выбранного */
.st-btn-small { padding: 4px 8px; font-size: 0.8rem; }
.st-btn-icon.st-btn-small { min-width: 28px; padding: 3px 6px; }
.st-items-panel { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--st-line); }
.st-items-add { gap: 4px; }
.st-items-list { display: flex; flex-direction: column; gap: 3px; max-height: 180px; overflow-y: auto; }
.st-items-row { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border: 1px solid var(--st-line); border-radius: 6px; background: #fff; }
.st-items-row.is-selected { border-color: #ca8a04; background: #fefce8; }
.st-items-name { flex: 1 1 auto; min-width: 0; padding: 3px 4px; border: 0; background: none; font: inherit; font-size: 0.85rem; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.st-item-editor { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid #fde68a; border-radius: 8px; background: #fff; }
.st-item-editor .st-row { align-items: flex-end; }
textarea.st-item-textarea { min-height: 60px; font-family: inherit; font-size: 0.9rem; }
.st-item-images { max-height: 200px; overflow-y: auto; }
.st-bg-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.st-bg-thumb { position: relative; border: 2px solid var(--st-line); border-radius: 7px; overflow: hidden; background: #000; }
.st-bg-thumb.is-active { border-color: var(--st-accent); }
.st-bg-pick { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.st-bg-pick img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.st-bg-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 4px; font-size: 0.68rem; color: #fff; background: rgba(0, 0, 0, 0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-bg-delete { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }
.st-image-box, .st-image-options { display: flex; flex-direction: column; gap: 8px; }
.st-range input { width: 100%; }

/* Диалоги */
.st-dialog { border: 0; border-radius: 12px; padding: 18px 20px; max-width: 92vw; max-height: 88vh; overflow: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
.st-dialog::backdrop { background: rgba(15, 23, 42, 0.55); }
.st-dialog-wide { width: 720px; }
.st-dialog h3 { margin: 0 0 12px; font-size: 1.2rem; font-weight: 600; line-height: 1.3; }
.st-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.st-games-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; margin: 10px 0; }
.st-games-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; margin: 8px 0; }
.st-games-row { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: 1px solid var(--st-line); border-radius: 7px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.st-games-row:hover { border-color: var(--st-accent); background: #f8fafc; }
.st-games-players { font-weight: 600; }

/* Блокировка второго окна управления (§10.5) */
.st-lock {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(15, 23, 42, 0.88);
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    padding: 24px;
}

.st-plan-block { max-width: 560px; margin: 60px auto; padding: 32px; background: #fff; border-radius: 12px; text-align: center; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); }
.st-plan-block h2 { margin-bottom: 12px; }
.st-plan-block a.st-btn { margin-top: 16px; text-decoration: none; }

@media (max-width: 1100px) {
    .st-app { grid-template-columns: 1fr; }
}

/* ── 3. Окно вывода ───────────────────────────────────────────────────────── */

body.st-output-body {
    margin: 0;
    background: #000;
    overflow: hidden;
    height: 100vh;
}

body.st-output-body.is-idle { cursor: none; }

.st-output-fit { position: fixed; inset: 0; }

.st-output-lost {
    position: fixed;
    left: 8px;
    bottom: 6px;
    z-index: 30;
    font: 12px/1.2 sans-serif;
    color: rgba(255, 255, 255, 0.55);
}

.st-output-waiting {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    font: 22px/1.3 sans-serif;
    text-align: center;
    padding: 24px;
    pointer-events: none;
}

.st-output-fullscreen {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 40;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.8);
    color: #fff;
    font: 14px sans-serif;
    cursor: pointer;
}