/*
 * Сцена задания и полноэкранный режим.
 *
 * Файл общий для всех типов заданий: разметку сцены печатает
 * views/common/_task-stage.php, поведение — web/js/task-shell.js.
 *
 * Полноэкранных режима два, и это не прихоть. Настоящий (:fullscreen) умеют
 * десктопы и айпад. Сафари на айфоне не разворачивает <div> вообще — там
 * работает только видео, — поэтому для него сцена растягивается на окно классом
 * .task-stage-faux: адресная строка остаётся, но задание занимает весь экран.
 */

.task-stage {
    position: relative;
}

/*
 * Кнопка «на весь экран» стоит в правом верхнем углу сцены, а заголовок
 * задания набран по центру во всю ширину: на телефоне длинная инструкция
 * уходила под кнопку (замер на бою 15.09.2026, choose-the-correct-option-6).
 * Поля с обеих сторон — чтобы центр заголовка не сместился.
 */
.task-stage .task-title {
    padding-left: 46px;
    padding-right: 46px;
}

/* Кнопка «на весь экран» */
.task-stage-fs {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 6;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 17px;
    line-height: 1;
    color: #2E3A59;
    background: rgba(255, 255, 255, .82);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s ease, background-color .15s ease;
}

.task-stage-fs:hover,
.task-stage-fs:focus-visible {
    opacity: 1;
    background: #fff;
}

.task-stage-fs:focus-visible {
    outline: 2px solid #396BB4;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .task-stage-fs {
        transition: none;
    }
}

/*
 * Развёрнутая сцена.
 *
 * Задание свёрстано под колонку страницы, а не под весь экран: без ограничения
 * ширины картинки и варианты расползаются на всю ширину монитора и читаются
 * хуже, чем были. Поэтому содержимое остаётся в колонке и просто ставится по
 * центру, а выигрыш даёт высота — на телефоне в горизонтальном положении это и
 * есть весь смысл режима.
 */
.task-stage:fullscreen,
.task-stage.task-stage-faux {
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.task-stage.task-stage-faux {
    position: fixed;
    inset: 0;
    z-index: 9990;
    margin: 0;
}

.task-stage:fullscreen .task-stage-body,
.task-stage.task-stage-faux .task-stage-body {
    max-width: 1100px;
    min-height: 100%;
    margin: 0 auto;
    padding: 52px 16px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Пока задание развёрнуто, страница под ним не должна прокручиваться */
body.task-stage-locked {
    overflow: hidden;
}

/*
 * Подсказка, как выйти. У настоящего полноэкранного режима это Escape, и
 * браузер говорит об этом сам; у режима-обманки на айфоне не говорит никто,
 * поэтому кнопка меняет вид на «свернуть» и остаётся на виду.
 */
.task-stage:fullscreen .task-stage-fs,
.task-stage.task-stage-faux .task-stage-fs {
    position: fixed;
    top: 10px;
    right: 10px;
    opacity: .9;
}

@media (max-width: 575.98px) {
    .task-stage-fs {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .task-stage:fullscreen .task-stage-body,
    .task-stage.task-stage-faux .task-stage-body {
        padding: 46px 10px 16px;
    }
}