/* Экран — с одного взгляда: на ноутбуке 1366×768 главное помещается без прокрутки.
   Правила уплотняют основной стиль и подключаются последними. */

main { padding-top: 22px; padding-bottom: 32px; }

/* ─────────────── главный экран тренажёра ─────────────── */

.приветствие { margin-bottom: 18px; gap: 20px; }
.приветствие h1 { font-size: clamp(26px, 2.4vw, 34px); margin: 0 0 6px; }
.приветствие p { font-size: 15px; }
.приветствие-действия { margin-top: 10px; }
.сводка-прогресса { padding: 12px 18px 12px 12px; gap: 16px; }

.путь { margin-bottom: 18px; gap: 12px; }
.шаг { padding: 16px 18px 14px; gap: 8px; }
.шаг p { font-size: 13.5px; line-height: 1.5; }
/* Когда открыто обучение, путь сворачивается в полосу: главное — персонажи. */
.путь.компакт .шаг { flex-direction: row; align-items: center; flex-wrap: wrap; padding: 12px 16px; }
.путь.компакт .шаг > p { display: none; }
.путь.компакт .шаг-номер { width: 36px; height: 36px; font-size: 15px; }
.путь.компакт::before { top: 30px; }
.путь.компакт .шаг-действия { margin: 0 0 0 auto; padding: 0; }
.путь.компакт .шаг-действия button { height: 34px; padding: 0 14px; font-size: 13.5px; }
.путь.компакт .шаг-факт { flex-basis: 100%; padding: 6px 10px; font-size: 12.5px; }

.вкладки { margin-bottom: 12px; }
.компетенция-заголовок { margin: 0 0 10px; }
.компетенция-заголовок h2 { font-size: 17px; }
.компетенция-группа + .компетенция-группа { margin-top: 20px; }

/* Карточка персонажа — горизонтальная: портрет слева, блоки справа. */
.сетка-персонажей { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.персонаж-карточка { display: grid; grid-template-columns: 128px minmax(0, 1fr); grid-template-rows: auto 1fr; }
.персонаж-сцена { grid-row: 1 / span 2; height: auto; min-height: 220px; }
.персонаж-сцена::after { display: none; }
.персонаж-сцена .метка { display: none; }
/* Схематичная фигура и утверждённый образ занимают одно и то же место — всю сцену карточки. */
.персонаж-сцена .портрет:not(.с-образом) { position: absolute; inset: 10px 8px 4px; width: auto; height: auto; }
.персонаж-инфо { grid-column: 2; padding: 12px 14px 2px; }
.персонаж-инфо h3 { font-size: 16px; margin: 0 0 2px; }
.персонаж-инфо p { font-size: 13px; line-height: 1.4; -webkit-line-clamp: 2; }
.персонаж-блоки { grid-column: 2; padding: 8px 14px 12px; gap: 6px; }
.блок-строка { padding: 8px 10px; gap: 6px; border-radius: 6px; }
.блок-строка button { height: 30px; padding: 0 12px; font-size: 13px; }

/* ─────────────── экран кейса ─────────────── */

.кейс-панель { margin-bottom: 14px; }
.кейс-сетка { grid-template-columns: 380px minmax(0, 1fr); gap: 20px; }
.сцена { top: 16px; }
/* Персонаж — в полный рост (Акт № 5, п. 7; ТЗ художника): сцена вертикальная, на ноутбуке 1366×768 — около 500 px. */
.сцена-образ { height: clamp(420px, calc(100vh - 250px), 640px); }
.сцена-образ .персонаж-рамка { width: auto; height: calc(100% - 24px); aspect-ratio: 5 / 12; }
.сцена-подпись { padding: 12px 18px 14px; }
.сцена-подпись h3 { font-size: 18px; }
.сцена-состояние { margin-top: 8px; }

.кейс-содержание { gap: 10px; }
.кейс-лист { padding: 16px 20px; }
.кейс-контекст { font-size: 15.5px; line-height: 1.6; }
.кейс-задача { font-size: 19px; }
.кейс-иллюстрация { aspect-ratio: 5 / 2; }

.варианты { gap: 8px; }
button.вариант { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 10px 14px; line-height: 1.45; }
.вариант .буква { width: 32px; height: 32px; border-radius: 6px; font-size: 14px; }
.вариант .текст { padding-top: 5px; }

/* Кнопка ответа всегда на виду, даже если вариантов много. */
.кейс-содержание > .кейс-действия {
  position: sticky; bottom: 0; z-index: 2; padding: 10px 0 8px;
  background: linear-gradient(to top, var(--фон) 72%, transparent);
}

/* ─────────────── реакция и обратная связь ─────────────── */

.реплика { padding: 16px 20px 14px; }
.реплика-кто { margin-bottom: 6px; }
.реплика-текст { font-size: 19px; line-height: 1.45; }
.реплика-поведение { margin-top: 6px; font-size: 13.5px; }

.ос { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ос > .ос-шкала, .ос > .ос-текст, .ос > .ос-цитата { grid-column: 1 / -1; }
.ос-шкала { padding: 12px 16px; }
.ос-шкала-подпись { margin-bottom: 8px; }
.ос-шкала-края { margin-top: 4px; }
.ос-текст { padding: 14px 18px; font-size: 15px; line-height: 1.55; }
.ос-раздел { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 12px 14px; }
.ос-раздел .иконка { width: 32px; height: 32px; border-radius: 6px; }
.ос-раздел p { font-size: 14px; line-height: 1.5; }
.ос-цитата { padding: 14px 18px 14px 50px; font-size: 15.5px; }
.ос-цитата .иконка { left: 16px; top: 14px; }
.достижение { padding: 10px 14px; }

@media (max-width: 900px) {
  .ос { grid-template-columns: 1fr; }
  .персонаж-карточка { grid-template-columns: 96px minmax(0, 1fr); }
}

/* В свёрнутом пути факты уровней — только когда есть решение о переходе;
   «К персонажам» у обучения не нужен: персонажи ниже на этом же экране. */
.путь.компакт .шаг-факт:not(.успех):not(.предупр) { display: none; }
.путь.компакт .шаг:nth-child(2) .шаг-действия { display: none; }
.путь.компакт .шаг-заголовок { flex-direction: row; align-items: center; gap: 10px; }
/* Во время обучения приветствие короче: подсказку заменяют сами персонажи. */
.режим-обучения .приветствие { margin-bottom: 12px; }
.режим-обучения .приветствие p { display: none; }
.режим-обучения .сводка-прогресса { padding: 6px 14px 6px 6px; }
.режим-обучения .сводка-прогресса .кольцо { transform: scale(.78); margin: -10px; }

/* Примеры заданий: все формы на одном экране — четыре в ряд, без пересказа ситуации. */
.демо-шапка { margin-bottom: 16px; }
.демо-шапка h1 { font-size: 28px; margin-bottom: 6px; }
.демо-шапка p { font-size: 15px; }
.демо-сетка { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.демо-карточка { padding: 14px 16px; gap: 6px; }
.демо-задача { font-size: 16px; }
.демо-контекст { display: none; }
@media (max-width: 1100px) { .демо-сетка { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .демо-сетка { grid-template-columns: 1fr; } }

/* Образ игрового аватара вместо значка. */
.эмблема-круг.с-образом { padding: 0; overflow: hidden; background: none; }
.эмблема-круг.с-образом img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; }

/* Иллюстрация кейса — рядом с описанием ситуации, а не над ним: варианты ответа
   остаются на экране. */
.кейс-содержание:has(> .кейс-иллюстрация) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.кейс-содержание:has(> .кейс-иллюстрация) > * { grid-column: 1 / -1; }
.кейс-содержание:has(> .кейс-иллюстрация) > .кейс-иллюстрация {
  grid-column: 2; grid-row: 1; aspect-ratio: auto; width: 100%; height: 100%; min-height: 170px; object-position: 50% 60%;
}
.кейс-содержание:has(> .кейс-иллюстрация) > :nth-child(2) { grid-column: 1; grid-row: 1; }
@media (max-width: 900px) {
  .кейс-содержание:has(> .кейс-иллюстрация) { grid-template-columns: 1fr; }
  .кейс-содержание:has(> .кейс-иллюстрация) > .кейс-иллюстрация,
  .кейс-содержание:has(> .кейс-иллюстрация) > :nth-child(2) { grid-column: 1; grid-row: auto; }
  .кейс-содержание:has(> .кейс-иллюстрация) > .кейс-иллюстрация { aspect-ratio: 5 / 2; height: auto; }
}

/* Не начатый блок — одна строка: название и кнопка «Начать». */
.блок-строка { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.блок-строка > div:first-child { grid-column: 1; }
.блок-строка .блок-низ { display: contents; }
.блок-строка .полоса { grid-column: 1; grid-row: 2; }
.блок-строка button { grid-column: 2; grid-row: 1 / span 2; }
.блок-строка.не-начат .блок-подпись, .блок-строка.не-начат .полоса { display: none; }
main:has(.режим-обучения) { padding-top: 16px; }
.режим-обучения .вкладки { margin-bottom: 8px; }
.режим-обучения .компетенция-заголовок { margin-bottom: 6px; }
.режим-обучения .сетка-персонажей { gap: 10px; }
.персонаж-сцена { min-height: 124px; }

/* Текст ситуации шире иллюстрации — меньше строк; задача — строкой без подписи. */
.кейс-содержание:has(> .кейс-иллюстрация) { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.кейс-лист:has(.кейс-задача) { padding: 12px 20px; }
.кейс-лист:has(.кейс-задача) .подпись-раздела { display: none; }
.кейс-лист .подпись-раздела { margin-bottom: 2px; }

main:has(.экран-кейса) { padding-bottom: 8px; }
/* Витрина: слева готовый блок крупно, справа все персонажи тренажёра по темам —
   готовый цветной и нажимается, остальные приглушены, с замком, ждут кейсов. */
main:has(.витрина) { padding-top: 24px; padding-bottom: 16px; }
.витрина .приветствие { margin-bottom: 12px; }
.витрина .приветствие h1 { margin-bottom: 4px; }
.витрина .приветствие p { max-width: 80ch; }
.витрина-раскладка { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 22px; align-items: start; }
.витрина-главный {
  background: var(--поверхность); border-radius: var(--р-б); box-shadow: 0 0 0 1px var(--линия);
  padding: 12px 12px 16px; display: grid; gap: 12px;
}
.витрина-образ { border-radius: var(--р); overflow: hidden; background: var(--тон-студент); height: clamp(190px, 14vw, 280px); }
.витрина-образ video, .витрина-образ img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.витрина-текст { padding: 0 8px; }
.витрина-текст h2 { font-size: 21px; margin: 8px 0 2px; }
.витрина-описание { color: var(--приглушён); font-size: 13px; margin: 0 0 8px; }
.витрина-текст p { font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.витрина-все { display: grid; gap: 12px; }
.витрина-легенда { display: flex; align-items: baseline; gap: 14px; font-size: 13px; color: var(--тихий); }
.витрина-легенда b { font-size: 16px; color: var(--текст); }
.витрина-легенда span { display: inline-flex; align-items: center; gap: 5px; }
.витрина-тема-имя { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--тихий); margin: 0 0 6px; }
.витрина-лица { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
/* Готовый персонаж — кнопка: снимаем общий вид кнопок (высота 40, рамка, тень,
   сдвиг при наведении), иначе имя наезжает на портрет. */
.витрина-лицо, .витрина-лицо:hover, .витрина-лицо:active, .витрина-лицо:focus {
  display: grid; justify-items: center; align-content: start; gap: 4px;
  height: auto; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none;
  box-shadow: none; transform: none; filter: none;
  font: inherit; line-height: normal; white-space: normal; color: var(--тихий); cursor: default; text-align: center;
}
.витрина-лицо:focus-visible { outline: none; }
.витрина-лицо.готов:focus-visible .витрина-портрет { outline: 2px solid var(--бренд); outline-offset: 3px; }
.витрина-портрет { position: relative; width: clamp(52px, 3.9vw, 72px); height: clamp(52px, 3.9vw, 72px); border-radius: 50%; overflow: hidden; background: var(--холст); display: block; }
.витрина-портрет img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) blur(.6px); opacity: .5; }
.витрина-замок {
  position: absolute; right: 2px; bottom: 2px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--поверхность); color: var(--тихий); box-shadow: 0 0 0 1px var(--линия);
}
.витрина-имя { font-size: 12px; line-height: 1.25; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.витрина-лицо.готов { cursor: pointer; color: var(--текст); font-weight: 650; }
.витрина-лицо.готов .витрина-портрет { box-shadow: 0 0 0 3px var(--бренд); }
.витрина-лицо.готов .витрина-портрет img { filter: none; opacity: 1; }
.витрина-лицо.готов:hover .витрина-портрет { box-shadow: 0 0 0 3px var(--бренд), var(--тень-бренда); }
@media (max-width: 1000px) { .витрина-раскладка { grid-template-columns: 1fr; } .витрина-лица { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Диалог со второго шага: задачу заменяет надпись шага, ситуация — в две строки. */
.диалог-идёт .кейс-лист:has(.кейс-задача) { display: none; }
.диалог-идёт .кейс-контекст { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* …и иллюстрация — невысокой полосой: место на экране отдано разговору. */
.кейс-содержание.диалог-идёт > .кейс-иллюстрация { height: 104px; min-height: 0; object-position: 50% 36%; }

/* Конструирование ответа: запас фраз в две колонки, пустая строка сборки ниже —
   иначе шесть фраз столбиком уводят кнопку «Ответить» за край экрана. */
.форма-конструирование .сборка { gap: 8px; }
.форма-конструирование .сборка-подпись { display: none; }
.форма-конструирование .сборка-строка { min-height: 50px; padding: 6px; }
.форма-конструирование .сборка-строка .сорт-строка { padding: 2px 6px; min-height: 0; gap: 8px; }
.форма-конструирование button.сборка-текст { min-height: 30px; padding: 3px 8px; font-size: 14px; line-height: 1.35; }
.форма-конструирование .сборка-запас { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.форма-конструирование button.сборка-карточка { min-height: 40px; padding: 8px 12px; font-size: 14px; line-height: 1.35; }
@media (max-width: 900px) { .форма-конструирование .сборка-запас { grid-template-columns: 1fr; } }
/* Ответ одним нажатием: пока он уходит на сервер, варианты не нажимаются. */
.форма-ответа.отправляется, .варианты.отправляется { pointer-events: none; }
/* «Послушать» первую реплику персонажа — справа в подписи «Ситуация». */
.кейс-лист .подпись-раздела .послушать {
  margin-left: auto; height: 26px; padding: 0 10px; gap: 6px;
  font-size: 12.5px; letter-spacing: 0; text-transform: none; font-weight: 600;
}
/* Девять и больше примеров — по пять в ряд, чтобы уместились в два ряда. */
.демо-сетка { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
.демо-действия button { height: 34px; padding: 0 14px; font-size: 13.5px; }
.демо-шапка { max-width: none; }
.демо-задача { font-size: 15px; line-height: 1.35; }
.демо-карточка { gap: 4px; }

/* ── Демонстрационный вид главного экрана по структуре ТЗ (01.10.2026) ──
   Персонажи по направлениям — карточками с образом, ролью и кратким описанием;
   портреты не размыты: образы показываются как есть. */
.витрина .путь.компакт { margin: 14px 0 6px; }
.витрина-главный-компакт { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 4px; }
.витрина-главный-компакт .витрина-образ { height: 180px; }
.витрина-сетка { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.витрина-карточка {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px; border: 1px solid var(--линия); border-radius: var(--р-б); background: var(--поверхность);
}
.витрина-карточка .витрина-портрет { width: 64px; height: 64px; }
.витрина-карточка .витрина-портрет img { filter: none; opacity: 1; }
.витрина-карточка.готов { border-color: var(--бренд); box-shadow: 0 0 0 1px var(--бренд); }
.витрина-карточка h3 { font-size: 15px; margin: 0; }
.витрина-роль { font-size: 12.5px; color: var(--тихий); margin: 2px 0 6px; }
.витрина-карточка p { font-size: 13px; line-height: 1.45; color: var(--приглушён); margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.витрина-карточка .метка { display: inline-flex; align-items: center; gap: 4px; }
.витрина-карточка button { height: 32px; padding: 0 12px; font-size: 13.5px; }
@media (max-width: 760px) { .витрина-главный-компакт { grid-template-columns: 1fr; } }

/* Вкладка «Рейтинг». */
.рейтинг-вкладка { display: grid; gap: 14px; max-width: 760px; }
.рейтинг-строка { padding: 14px 16px; border: 1px solid var(--линия); border-radius: var(--р-б); background: var(--поверхность); display: grid; gap: 8px; }
.рейтинг-имя { font-weight: 650; }
.рейтинг-итог { font-size: 14px; color: var(--приглушён); }

/* Регистрация: необязательные сведения о педагоге. */
.регистрация-категории { margin: 4px 0 16px; }
.регистрация-согласие { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--текст-2, inherit); margin: 0 0 16px; cursor: pointer; }
.регистрация-согласие input { margin-top: 2px; flex: none; }
.регистрация-категории summary { cursor: pointer; color: var(--бренд); font-size: 14px; margin-bottom: 10px; }