/*
 * TriLingva Circular Trainer — Mobile Adaptation
 * Файл: css/mobile.css
 * Подключается ПОСЛЕДНИМ в index.html, чтобы переопределять десктопные стили.
 *
 * Структура медиа-запросов:
 *   max-width: 768px — Планшеты и смартфоны (ландшафт)
 *   max-width: 600px — Смартфоны (портрет)
 *   max-width: 400px — Узкие смартфоны
 */

/* =====================================================================
   1. ГЛОБАЛЬНЫЕ ФИКСЫ ДЛЯ iOS / ANDROID
   ===================================================================== */

/*
 * КРИТИЧНО: Предотвращение авто-зума при фокусе на любое поле ввода на iOS.
 * iOS Safari принудительно зумит страницу, если font-size инпута < 16px.
 */
input[type="text"],
input[type="search"],
input[type="password"],
textarea,
.letter-input,
.hybrid-input,
#hidden-keyboard-input {
    font-size: 16px !important;
}

/* Ultimate mobile layout lock for levels and stages. Keep this block last. */
@media (max-width: 600px) {
    html[data-initial-view="levels"] body,
    html[data-initial-view="stages"] body,
    body.view-levels-active,
    body.view-stages-active,
    body:has(#view-levels.spa-view.active),
    body:has(#view-stages.spa-view.active) {
        min-height: 100dvh !important;
        padding: 0 !important;
        background: var(--paper-color, #faf3e0) !important;
        overflow-x: hidden !important;
    }

    html[data-initial-view="levels"] body .wrap,
    html[data-initial-view="stages"] body .wrap,
    body.view-levels-active .wrap,
    body.view-stages-active .wrap,
    body:has(#view-levels.spa-view.active) .wrap,
    body:has(#view-stages.spa-view.active) .wrap {
        width: 100% !important;
        min-height: 100dvh !important;
        margin: 0 auto !important;
        padding: max(14px, env(safe-area-inset-top)) 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        background: var(--paper-color, #faf3e0) !important;
        box-sizing: border-box !important;
    }

    html[data-initial-view="levels"] body .wrap > .container,
    html[data-initial-view="stages"] body .wrap > .container,
    body.view-levels-active .wrap > .container,
    body.view-stages-active .wrap > .container,
    body:has(#view-levels.spa-view.active) .wrap > .container,
    body:has(#view-stages.spa-view.active) .wrap > .container {
        flex: 1 0 auto !important;
        width: 100% !important;
        min-height: calc(100dvh - clamp(68px, 17vw, 90px)) !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
        background: var(--paper-color, #faf3e0) !important;
        box-shadow: none !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        box-sizing: border-box !important;
    }

    #view-levels.spa-view.active,
    #view-stages.spa-view.active,
    #levels-grid-container,
    #view-stages .level-header-row,
    #view-stages .tabs,
    #view-stages .stage-cards-container,
    #view-stages .stage-panel,
    #view-stages .tactical-menu-bar {
        background: var(--paper-color, #faf3e0) !important;
    }

    #view-levels.spa-view.active,
    #view-stages.spa-view.active {
        min-height: 100% !important;
    }

    body.view-levels-active .top-bar,
    body.view-stages-active .top-bar,
    body:has(#view-levels.spa-view.active) .top-bar,
    body:has(#view-stages.spa-view.active) .top-bar {
        display: flex !important;
        min-height: clamp(58px, 15vw, 76px) !important;
        margin: 0 0 10px !important;
        padding: clamp(8px, 2.4vw, 12px) clamp(8px, 2.6vw, 14px) !important;
        border-radius: 0 0 16px 16px !important;
        align-items: center !important;
        gap: clamp(4px, 1.4vw, 8px) !important;
        overflow: visible !important;
    }

    body.view-levels-active .top-bar .btn-label,
    body.view-stages-active .top-bar .btn-label,
    body:has(#view-levels.spa-view.active) .top-bar .btn-label,
    body:has(#view-stages.spa-view.active) .top-bar .btn-label,
    body.view-levels-active .user-name-container,
    body.view-stages-active .user-name-container,
    body:has(#view-levels.spa-view.active) .user-name-container,
    body:has(#view-stages.spa-view.active) .user-name-container {
        display: none !important;
    }

    body.view-levels-active .user-block-wrapper,
    body.view-stages-active .user-block-wrapper,
    body:has(#view-levels.spa-view.active) .user-block-wrapper,
    body:has(#view-stages.spa-view.active) .user-block-wrapper {
        gap: 4px !important;
        flex-shrink: 0 !important;
    }

    body.view-levels-active .user-pedestal,
    body.view-stages-active .user-pedestal,
    body:has(#view-levels.spa-view.active) .user-pedestal,
    body:has(#view-stages.spa-view.active) .user-pedestal {
        width: auto !important;
        padding: 3px 5px !important;
    }

    body.view-levels-active .exit-btn-power,
    body.view-stages-active .exit-btn-power,
    body:has(#view-levels.spa-view.active) .exit-btn-power,
    body:has(#view-stages.spa-view.active) .exit-btn-power {
        margin-left: 0 !important;
    }
}

/* Hard mobile fill for level/stage screens, including first paint before the SPA router marks body classes. */
@media (max-width: 600px) {
    html[data-initial-view="levels"] body,
    html[data-initial-view="stages"] body,
    body.view-levels-active,
    body.view-stages-active,
    body:has(#view-levels.spa-view.active),
    body:has(#view-stages.spa-view.active) {
        min-height: 100dvh !important;
        padding: 0 !important;
        background: var(--paper-color, #faf3e0) !important;
        overflow-x: hidden !important;
    }

    html[data-initial-view="levels"] body .wrap,
    html[data-initial-view="stages"] body .wrap,
    body.view-levels-active .wrap,
    body.view-stages-active .wrap,
    body:has(#view-levels.spa-view.active) .wrap,
    body:has(#view-stages.spa-view.active) .wrap {
        width: 100% !important;
        min-height: 100dvh !important;
        padding: max(14px, env(safe-area-inset-top)) 0 0 !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        background: var(--paper-color, #faf3e0) !important;
        box-sizing: border-box !important;
    }

    html[data-initial-view="levels"] body .wrap > .container,
    html[data-initial-view="stages"] body .wrap > .container,
    body.view-levels-active .wrap > .container,
    body.view-stages-active .wrap > .container,
    body:has(#view-levels.spa-view.active) .wrap > .container,
    body:has(#view-stages.spa-view.active) .wrap > .container {
        flex: 1 0 auto !important;
        width: 100% !important;
        min-height: calc(100dvh - clamp(66px, 17vw, 88px)) !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: var(--paper-color, #faf3e0) !important;
        box-shadow: none !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
    }

    #view-levels.spa-view.active,
    #view-stages.spa-view.active,
    #levels-grid-container,
    #view-stages .level-header-row,
    #view-stages .tabs,
    #view-stages .stage-cards-container,
    #view-stages .tactical-menu-bar {
        background: var(--paper-color, #faf3e0) !important;
    }

    #view-stages.spa-view.active {
        min-height: 100% !important;
        padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    }

    body.view-levels-active .top-bar,
    body.view-stages-active .top-bar,
    body:has(#view-levels.spa-view.active) .top-bar,
    body:has(#view-stages.spa-view.active) .top-bar {
        min-height: clamp(58px, 15vw, 76px) !important;
        margin: 0 0 10px !important;
        padding: clamp(8px, 2.4vw, 12px) clamp(8px, 2.6vw, 14px) !important;
        border-radius: 0 0 16px 16px !important;
        align-items: center !important;
        gap: clamp(4px, 1.4vw, 8px) !important;
    }

    body.view-levels-active .top-bar .btn-label,
    body.view-stages-active .top-bar .btn-label,
    body:has(#view-levels.spa-view.active) .top-bar .btn-label,
    body:has(#view-stages.spa-view.active) .top-bar .btn-label,
    body.view-levels-active .user-name-container,
    body.view-stages-active .user-name-container,
    body:has(#view-levels.spa-view.active) .user-name-container,
    body:has(#view-stages.spa-view.active) .user-name-container {
        display: none !important;
    }

    body.view-levels-active .user-block-wrapper,
    body.view-stages-active .user-block-wrapper,
    body:has(#view-levels.spa-view.active) .user-block-wrapper,
    body:has(#view-stages.spa-view.active) .user-block-wrapper {
        gap: 4px !important;
        flex-shrink: 0 !important;
    }

    body.view-levels-active .user-pedestal,
    body.view-stages-active .user-pedestal,
    body:has(#view-levels.spa-view.active) .user-pedestal,
    body:has(#view-stages.spa-view.active) .user-pedestal {
        width: auto !important;
        padding: 3px 5px !important;
    }

    body.view-levels-active .exit-btn-power,
    body.view-stages-active .exit-btn-power,
    body:has(#view-levels.spa-view.active) .exit-btn-power,
    body:has(#view-stages.spa-view.active) .exit-btn-power {
        margin-left: 0 !important;
    }
}

/* Fullscreen cabinet opened from the trainer SPA. */
.trainer-cabinet-fullscreen {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
}

.trainer-cabinet-fullscreen .cabinet-container {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    padding: clamp(12px, 2.2vw, 28px) !important;
    box-sizing: border-box !important;
}

.trainer-cabinet-fullscreen .cab-main-content-wrapper {
    min-height: calc(100dvh - 120px);
    box-sizing: border-box;
}

@media (max-width: 768px) {
    body.view-stages-active .wrap {
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    body.view-stages-active .wrap > .container {
        flex: 1 1 auto !important;
        min-height: calc(100dvh - 28px) !important;
        margin: 0 !important;
    }

    body:has(#view-stages.spa-view.active) .wrap {
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    body:has(#view-stages.spa-view.active) .wrap > .container {
        flex: 1 1 auto !important;
        min-height: calc(100dvh - 28px) !important;
        margin: 0 !important;
    }

    #view-stages.spa-view.active {
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #view-stages.spa-view.active .container {
        flex: 1 1 auto !important;
        min-height: calc(100dvh - 28px) !important;
        margin: 0 !important;
    }
}

@media (max-width: 600px) {
    body.view-stages-active .wrap {
        width: 100% !important;
        min-height: 100dvh !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    body.view-stages-active .wrap > .container {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
        padding: 10px 12px max(12px, env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
    }

    body:has(#view-stages.spa-view.active) .wrap {
        width: 100% !important;
        min-height: 100dvh !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    body:has(#view-stages.spa-view.active) .wrap > .container {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
        padding: 10px 12px max(12px, env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
    }

    #view-stages.spa-view.active {
        min-height: 100dvh !important;
    }

    #view-stages.spa-view.active .wrap {
        width: 100% !important;
        min-height: 100dvh !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    #view-stages.spa-view.active .container {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
        padding: 10px 12px max(12px, env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
    }
}

/*
 * КРИТИЧНО: Скрытый технический инпут #hidden-keyboard-input.
 *
 * На десктопе он уже спрятан инлайновым CSS (top: -1000px).
 * На мобильных устройствах при программном focus() браузер всё равно
 * пытается скроллить к элементу и показывать системную клавиатуру.
 *
 * Решение:
 * 1. Позиционируем элемент за пределами viewport (top: -9999px)
 *    чтобы скролл до него был незаметен.
 * 2. inputmode="none" запрещает системную клавиатуру (применяется через JS).
 * 3. VirtualKeyboard.disableNativeKeyboard() ставит readonly на .letter-input,
 *    поэтому системная клавиатура не открывается при тапе на ячейки слова.
 */
@media (max-width: 768px) {
    #hidden-keyboard-input {
        position: fixed !important;
        top: -9999px !important;
        left: -9999px !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        pointer-events: none !important;
        /* Подсказка браузеру: не показывай клавиатуру */
        /* (атрибут inputmode="none" устанавливается JS-инициализатором) */
    }

    /*
     * Поля ввода букв (.letter-input) в режиме виртуальной клавиатуры
     * получают readonly через VirtualKeyboard.disableNativeKeyboard().
     * Дополнительно убираем outline чтобы не было синей рамки при тапе.
     */
    .letter-input[readonly] {
        outline: none !important;
        caret-color: transparent !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
}

/* Плавный скролл для сенсорных экранов */
* {
    -webkit-tap-highlight-color: transparent; /* Убираем синюю вспышку при тапе на iOS */
}

/* =====================================================================
   2. АДАПТАЦИЯ ОБЩЕЙ СТРУКТУРЫ — ШАПКА (`.top-bar`)
   ===================================================================== */

@media (max-width: 768px) {
    .wrap {
        padding: 14px 10px !important;
    }
    .container {
        padding: 18px !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 600px) {
    /*
     * .wrap уже имеет min-height:100vh + flex-column из десктопных стилей (index.html стр. 583).
     * На мобильных сохраняем отступ сверху побольше, чтобы шапка не упиралась в край экрана.
     */
    .wrap {
        padding: 14px 6px 20px !important;   /* сверху 14px — место для шапки */
        min-height: 100dvh !important;
        box-sizing: border-box !important;
    }
    /*
     * .container растягивается через flex:1, занимая всё остаток высоты после шапки.
     * Без фиксированного min-height — контент сам растягивает подложку.
     */
    .container {
        flex: 1 !important;       /* занимает всю оставшуюся высоту */
        width: 100% !important;
        padding: 14px !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
    }

    /* ============================================================
       ШАГ 1: Вся шапка — ОДНА горизонтальная строка
       display:flex + nowrap + выравнивание по центру
    ============================================================ */
    .top-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 5px 6px !important;
        border-radius: 12px !important;
        gap: 3px !important;
        min-height: 46px !important;
        overflow: hidden !important;
    }

    /* Обёртка кнопки «←» — не растягивается */
    .top-bar > div:first-child {
        flex: 0 0 auto !important;
    }

    /* Кнопка «← В Меню»: только стрелка, квадратная */
    #back-to-profiles-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    #back-text {
        display: none !important;
    }
    .back-icon {
        font-size: 1.3em !important;
        line-height: 1 !important;
    }

    /* ============================================================
       ШАГ 2: Центральная группа — иконки Редактор/Прогресс + Аудио
       flex:1 → занимает всё место между кнопками, выровнена по центру
    ============================================================ */
    .top-bar-center {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        gap: 2px !important;
        overflow: hidden !important;
        min-width: 0 !important;
    }

    /* Кнопки «📝» и «📊» — только иконка, квадратные */
    .header-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.15em !important;
        flex-shrink: 0 !important;
        gap: 0 !important;
    }
    .btn-label {
        display: none !important;
    }
    .score-label {
        display: none !important;
    }

    /* Аудио-виджет: только кнопки, без попапа трека */
    #audio-widget-place {
        width: auto !important;
        flex-shrink: 0 !important;
    }
    #track-name-popup {
        display: none !important;
    }
    .audio-integrated-wrapper {
        gap: 1px !important;
        display: flex !important;
        align-items: center !important;
    }
    .audio-group {
        gap: 1px !important;
    }
    .audio-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 1em !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    /* ============================================================
       ШАГ 3: Блок пользователя — только аватар
       Имя/email скрыты, показываются в попапе по тапу
    ============================================================ */
    .user-block-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        flex: 0 0 auto !important;
    }

    .user-pedestal {
        position: relative !important;
        cursor: pointer !important;
        padding: 0 !important;
        min-width: auto !important;
        border-radius: 10px !important;
    }

    /* Прячем блок с именем — на мобиле только аватар */
    .user-name-container {
        display: none !important;
    }
    #user-email-full {
        display: none !important;
    }
    #sync-indicator,
    #dict-sync-indicator {
        display: none !important;
    }

    /* ── Попап с именем и email ── */
    .user-info-popup {
        display: none;
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        background: white !important;
        border-radius: 14px !important;
        padding: 12px 16px !important;
        box-shadow: 0 8px 32px rgba(93, 64, 55, 0.22) !important;
        min-width: 180px !important;
        z-index: 2000 !important;
        white-space: nowrap !important;
        border: 1px solid rgba(93, 64, 55, 0.1) !important;
        animation: popupFadeIn 0.18s ease !important;
    }
    @keyframes popupFadeIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .user-pedestal.popup-open .user-info-popup {
        display: block !important;
    }
    .popup-name {
        font-weight: 700 !important;
        font-size: 0.95em !important;
        color: var(--accent-color) !important;
        margin-bottom: 3px !important;
    }
    .popup-email {
        font-size: 0.78em !important;
        color: #888 !important;
        line-height: 1.3 !important;
    }

    /* Кнопка питания */
    .exit-btn-power {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        margin-left: 1px !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
    }
    .exit-btn-power svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* =====================================================================
   3. ЭКРАН ВЫБОРА УРОВНЯ (`#view-levels` / `.levels-grid`)
   ===================================================================== */

@media (max-width: 600px) {
    /* ── Заголовок «Выберите уровень» — всё в одну строку ── */
    .level-header-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        min-height: auto !important;
        margin-bottom: 10px !important;
    }
    .level-header-row h1 {
        font-size: 1.1em !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Кнопка «📊 Отчёт прогресса» — только иконка */
    .progress-report-trigger {
        min-width: 34px !important;
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.15em !important;
        flex-shrink: 0 !important;
        border-radius: 10px !important;
    }
    .progress-report-trigger > span:last-child {
        display: none !important;
    }

    /* Блок очков — компактный бейдж */
    .global-score-container {
        padding: 4px 10px !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
        border-radius: 20px !important;
    }
    .score-value {
        font-size: 1em !important;
        font-weight: 700 !important;
    }

    /* ── Сетка уровней — 2 колонки вместо 1 ── */
    /*
     * Переопределяем инлайновый медиазапрос из index.html (строка 642),
     * который задаёт 1fr на < 600px.
     */
    .levels-grid,
    #levels-grid-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        align-items: start !important; /* карточки не растягиваются по соседь в строке */
    }

    /* Карточки уровней — flex-column, чтобы кнопка всегда была внизу */
    .profile-card {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
        padding: 10px 10px !important;
        box-sizing: border-box !important;
    }
    .profile-card-header {
        margin-bottom: 6px !important;
        gap: 6px !important;
    }
    .profile-card-icon {
        font-size: 1.4em !important;
    }
    .profile-card h2 {
        font-size: 0.82em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Блок статистики — только ключевые цифры, компактно */
    .stats-box {
        min-height: auto !important;
        padding: 5px 6px !important;
        font-size: 0.73em !important;
        margin-bottom: 8px !important;
        line-height: 1.4 !important;
    }

    /*
     * Кнопка — margin-top: auto толкает её вниз внутри flex-column карточки.
     * Так все кнопки визуально находятся на одном уровне, даже если карточки разной высоты.
     */
    .card-btn {
        margin-top: auto !important;
        min-height: 38px !important;
        font-size: 0.82em !important;
        border-radius: 10px !important;
        padding: 7px 6px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* =====================================================================
   4. ЭКРАН ЭТАПОВ (`#view-stages`) — КРИТИЧЕСКИЙ БЛОК
   ===================================================================== */

/*
 * СТРАНИЦА ЭТАПОВ использует stage_selection.css, а не index.html-стили.
 * В stage_selection.css:
 *   .wrap  — max-width: 900px (без flex!)
 *   body   — min-height: 100vh
 *   .container — padding: 10px 20px
 *
 * Поэтому КОНТЕЙНЕР растягивается по высоте КОНТЕНТА, а фон тянется
 * через body min-height:100vh.
 * Нам нужно только: правильно настроить wrap + container на мобиле.
 */

@media (max-width: 768px) {
    /*
     * ИСПРАВЛЕНИЕ: Убираем .wrap и .container отсюда — они конфликтуют
     * с секцией 2, которая идёт РАНЬШЕ в файле.
     * Секция 4 (768px) идёт ПОСЛЕ секции 2 (600px) и перебивает её через !important.
     * Оставляем только body padding — он нейтрален.
     */
    body {
        padding-top: 10px !important;
        padding-bottom: 20px !important;
        min-height: 100dvh !important;
        box-sizing: border-box !important;
    }

    /*
     * ── Шапка уровня (app-header-grid) ──
     * stage_selection.css использует grid: 1fr auto 1fr
     * На мобиле заголовок «Уровень A1» вытесняется блоком очков.
     * Меняем на flex чтобы h1 брал всё свободное место.
     */
    .app-header-grid {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    /* Заголовок — занимает свободное место, обрезается при нехватке */
    .app-header-grid h1 {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 1.15em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: left !important;
        margin: 0 !important;
    }
    /* Правый блок (❤️ + 💎) — не сжимается */
    .header-right-group {
        flex-shrink: 0 !important;
    }
    /* Левый блок (кнопка «←») — не сжимается */
    .app-header-grid > *:first-child {
        flex-shrink: 0 !important;
    }

    /* ── ВКЛАДКИ ЭТАПОВ: все три в одну строку ──
     * Убираем flex-wrap: wrap (из stage_selection.css строка 90)
     * и разрешаем горизонтальный скролл если кнопки не влезают.
     */
    .tabs,
    #stage-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 2px !important;
        justify-content: flex-start !important;
        padding-bottom: 4px !important;
    }
    .tabs::-webkit-scrollbar,
    #stage-tabs::-webkit-scrollbar {
        display: none !important;
    }

    /* Кнопки этапов — равномерно заполняют строку */
    .stage-tab-btn {
        flex: 1 1 0 !important;
        white-space: nowrap !important;
        padding: 9px 10px !important;
        font-size: 0.8em !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    /*
     * Неактивные вкладки этапов — заметный цвет + окантовка.
     * Десктопный стиль: color: var(--muted) — очень светлый, на мобиле не читаемо.
     * Меняем: цвет акцента с пониженной прозрачностью + окантовка снизу.
     */
    .stage-tab-btn:not(.active):not(:disabled):not(.disabled) {
        color: var(--accent-color, #5d4037) !important;
        opacity: 0.65 !important;
        border: 1.5px solid var(--accent-color, #5d4037) !important;
        border-bottom: none !important;
        border-radius: 10px 10px 0 0 !important;
        background: rgba(255, 255, 255, 0.35) !important;
    }
    /* Активная вкладка — полная непрозрачность, без рамки */
    .stage-tab-btn.active {
        opacity: 1 !important;
        border: none !important;
        border-bottom: none !important;
        color: var(--accent-color, #5d4037) !important;
        background: white !important;
    }

    /*
     * ГЛАВНЫЙ ФИX: Убираем жёсткие 3 колонки из stage_selection.css.
     * Карточки языков — в 1 колонку (единственная возможная на телефоне).
     */
    #view-stages .stage-cards,
    .stage-cards {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 14px !important;
    }

    /* ── Карточки языков — компактные ── */
    .stage-card {
        min-height: auto !important;
        padding: 12px 14px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .stage-card h2 {
        font-size: 1.0em !important;    /* уменьшили с 1.3rem */
        margin: 4px 0 8px !important;
    }
    .stage-card-stats {
        font-size: 0.78em !important;   /* уменьшили с 0.9em */
        margin-bottom: 10px !important;
        min-height: auto !important;
        line-height: 1.4 !important;
    }

    /* Кнопки в карточках — полная ширина, высота под палец */
    .stage-card-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        margin-top: auto !important;
    }
    .stage-card-buttons .btn {
        width: 100% !important;
        min-height: 40px !important;    /* уменьшили с 46px */
        font-size: 0.88em !important;   /* уменьшили с 1em */
        box-sizing: border-box !important;
        padding: 8px !important;
    }

    /* Заголовок уровня */
    .level-header-row h1 {
        font-size: 1.3em !important;
    }

    /* ── Нижние кнопки управления — вертикальный стек ── */
    .bottom-controls {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
        margin-top: 14px !important;
        padding-top: 14px !important;
    }
    #change-words-btn,
    #reset-progress-btn {
        width: 100% !important;
        min-height: 46px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* ── Тактическое меню ── */
    .tactical-menu-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .tactical-menu-bar .menu-btn {
        flex: 1 1 auto !important;
        min-height: 44px !important;
        justify-content: center !important;
    }
}

@media (max-width: 600px) {
    /* На телефоне минимальные отступы wrap */
    .wrap {
        padding: 2px 4px !important;
    }
    .container {
        padding: 10px 12px !important;
        border-radius: 16px !important;
    }

    /* Вкладки: ещё компактнее */
    .stage-tab-btn {
        padding: 8px 8px !important;
        font-size: 0.76em !important;
    }

    /* Карточки — минимальный padding */
    .stage-card {
        padding: 12px 14px !important;
        border-radius: 14px !important;
    }
    .stage-card h2 {
        font-size: 1.05em !important;
        margin: 4px 0 8px !important;
    }
    .stage-card-stats {
        font-size: 0.8em !important;
        margin-bottom: 10px !important;
    }
    .stage-card-buttons .btn {
        min-height: 40px !important;
        font-size: 0.9em !important;
        padding: 8px !important;
    }

    /* Строка споилера со словами — обрезаем */
    .spoiler-container {
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* =====================================================================
   4б. ДОПОЛНИТЕЛЬНЫЕ МОБИЛЬНЫЕ ФИКСЫ ЭТАПОВ (≤ 600px)
   ===================================================================== */

@media (max-width: 600px) {
    /*
     * ── Сокращение текста вкладок: «Этап 1: Изучение» → «Этап 1» ──
     * Трюк: обнуляем font-size на родителе (текст невидим),
     * возвращаем размер только через ::before с коротким текстом.
     * Не нужно менять HTML или JS.
     */
    #tab-stage-1,
    #tab-stage-2,
    #tab-stage-3 {
        font-size: 0 !important; /* скрываем длинный текст */
    }
    #tab-stage-1::before { content: 'Этап 1'; font-size: 13px; font-weight: 600; }
    #tab-stage-2::before { content: 'Этап 2'; font-size: 13px; font-weight: 600; }
    #tab-stage-3::before { content: 'Этап 3'; font-size: 13px; font-weight: 600; }
}

/*
 * ── Тактическое модальное окно: batch-list элементы ──
 * На узких экранах элемент «дата + бейдж + лупа + счётчик + стрелки»
 * не помещается и обрезается. Решение: уменьшаем font-size контейнера,
 * padding ячеек и размеры кнопок пропорционально.
 */
@media (max-width: 480px) {
    /* Шапка модалки */
    #tactical-modal .modal-header {
        padding: 10px 14px !important;
        font-size: 0.9em !important;
    }

    /* Табы языков (Чешский / Английский / Билингва) */
    .lang-tab-btn {
        padding: 6px 8px !important;
        font-size: 0.78em !important;
        gap: 4px !important;
    }

    /*
     * Таблица статистики (Слова: | В работе | Очередь | Пройдено).
     * На телефоне она вытесняет языковые вкладки вправо.
     * Скрываем её — данные те же самые есть в кнопках-вкладках ниже.
     */
    .tactical-stats-table {
        display: none !important;
    }

    /* Контейнер языковых табов — на всю ширину */
    #tactical-lang-tabs {
        flex-wrap: nowrap !important;
        gap: 4px !important;
        width: 100% !important;
    }
    #tactical-lang-tabs > div:first-child {
        width: 100% !important;
        gap: 4px !important;
    }
    .lang-tab-btn {
        flex: 1 1 0 !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Batch-items: пропорциональное уменьшение */
    .batch-container {
        font-size: 0.82em !important;
    }
    .batch-container .batch-header {
        padding: 8px 10px !important;
        gap: 6px !important;
    }
    /* Дата — меньше */
    .batch-date {
        font-size: 0.9em !important;
        min-width: 0 !important;
    }
    /* Бейдж (EN / CZ) */
    .badge-en, .badge-cz, .badge-bil, .badge-all {
        font-size: 0.75em !important;
        padding: 1px 5px !important;
    }
    /* Счётчик «N сл.» */
    .batch-count {
        font-size: 0.8em !important;
        padding: 2px 6px !important;
        white-space: nowrap !important;
    }
    /* Кнопка «наверх» и стрелка */
    .batch-top-btn,
    .batch-expand-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75em !important;
        padding: 0 !important;
    }
    /* Иконка лупы (SVG или emoji) */
    .batch-search-btn,
    .batch-header button[title] {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8em !important;
    }
    /* Вкладки В работе / Очередь / Пройдено */
    #tactical-tabs-container .t-tab {
        font-size: 0.8em !important;
        padding: 8px 6px !important;
    }
}


/* =====================================================================
   5. ЭКРАН ВЫБОРА СЛОВ (`#view-selection`)
   ===================================================================== */

@media (max-width: 768px) {
    /* Высота вью подстраивается под мобильный экран */
    #view-selection {
        height: calc(100dvh - 120px) !important; /* dvh — динамический vh, учитывает панель браузера */
        min-height: 400px !important;
    }
}

@media (max-width: 600px) {
    /* Шапка раздела выбора слов */
    .selection-prepaint .app-header-title {
        font-size: 20px !important;
    }

    /* Кнопки вкладок "Слова / Фразы" */
    .selection-prepaint .tabs {
        gap: 6px !important;
    }

    .selection-prepaint .button.small {
        font-size: 0.82em !important;
        padding: 6px 10px !important;
        min-height: 36px !important;
    }

    /* Строка поиска */
    #word-search-input {
        height: 40px !important;
        font-size: 15px !important;
    }

    /*
     * ВАЖНО: .bottom-controls-bar имеет инлайновый style="" из JS.
     * Все переопределения требуют !important, включая align-items / justify-content.
     */
    .bottom-controls-bar {
        position: sticky !important;
        bottom: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
        background: rgba(253, 245, 230, 0.92) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
        box-shadow: 0 -4px 20px rgba(93, 64, 55, 0.1) !important;
        z-index: 10 !important;
    }

    /* Ряд со счётчиком и слайдером — на всю ширину */
    .bottom-controls-bar > div:first-child {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        flex-shrink: unset !important;
        gap: 8px !important;
    }

    /* Слайдер — на всю ширину ряда */
    #new-words-slider {
        width: 100% !important;
        flex: 1 !important;
    }

    /* Кнопки "Выбрать" и "Сбросить" — горизонтальный ряд на всю ширину */
    .bottom-controls-bar > div:last-child {
        width: 100% !important;
        display: flex !important;
        flex-shrink: unset !important;
        gap: 8px !important;
    }

    #continue-training-btn,
    #start-training-btn {
        flex: 1 !important;
        min-height: 44px !important;
        font-size: 0.9em !important;
        padding: 8px !important;
    }

    /* Крупные чекбоксы для тапа пальцем */
    summary input[type="checkbox"],
    .category-content input[type="checkbox"],
    .word-item-checkbox {
        width: 20px !important;
        height: 20px !important;
        cursor: pointer !important;
    }

    /* Категории — удобнее разворачивать */
    summary {
        padding: 12px 15px 12px 35px !important;
        font-size: 0.95em !important;
    }
}

/* =====================================================================
   6. ИГРОВОЙ ПРОЦЕСС (`#view-game`)
   ===================================================================== */

@media (max-width: 768px) {
    /* Заголовок этапа — динамический размер шрифта для исключения обрезки */
    .main-header-bar h1 {
        font-size: clamp(9px, 3.4vw, 13px) !important; /* Улучшенный динамический размер */
        white-space: nowrap !important;
        text-overflow: clip !important; /* Предотвращаем преждевременное появление троеточия */
        overflow: visible !important; /* Позволяем тексту полностью раскрыться */
        text-align: center !important;
    }

    .main-header-bar {
        gap: 4px !important;
        padding: 4px 6px !important;
    }

    /* Универсальное исправление для шапки экранов выбора уровня/этапов (убираем жесткий Grid) */
    .level-header-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 6px !important;
        padding: 4px 6px !important;
        margin-bottom: 8px !important;
    }

    .header-side-spacer {
        display: none !important; /* Скрываем spacer, ломающий центровку */
    }

    .level-header-row h1 {
        text-align: left !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
        font-size: clamp(12px, 3.8vw, 15px) !important; /* Динамический шрифт, чтобы не наезжать на очки */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        grid-column: auto !important; /* Сбрасываем жесткий Grid */
    }

    .level-header-row .header-right {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    .level-header-row .player-status-container {
        transform: scale(0.9) !important; /* Слегка сжимаем очки, чтобы всё уместилось */
        transform-origin: right center !important;
        margin-right: 0 !important;
    }

    /* Переводимое слово — адаптивный размер шрифта и уменьшенный отступ сверху */
    .russian-word {
        font-size: clamp(1.2rem, 4.5vw, 1.8rem) !important;
        line-height: 1.3 !important;
        text-align: center !important;
        padding: 0 8px !important;
        margin-top: -8px !important; /* Слегка подтягиваем вверх */
        margin-bottom: 4px !important;
    }

    /* Контейнер игровой карточки — меньше отступов */
    .card-training {
        padding: 8px !important; /* Уменьшаем отступы для лучшей вместимости */
    }

    /* Прогресс-бар */
    .progress-indicator {
        padding: 0 6px !important;
    }

    /* Поля ввода букв */
    .letter-inputs {
        margin-bottom: 4px !important;
    }

    /* Управляем отображением панелей очков на мобильном/планшетах */
    .desktop-only-score {
        display: none !important;
    }

    .mobile-only-score {
        display: flex !important;
    }

    /* Уменьшение и центрирование панели подсказок */
    .training-layout-static-header {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        border-bottom: none !important; /* Убираем бордер для слияния панелей */
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        min-height: auto !important;
        height: auto !important;
    }

    .training-header-left {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    .unified-hint-container {
        margin: 0 auto !important;
        padding: 3px 8px !important; /* Уменьшенные отступы */
        gap: 6px !important; /* Меньшее расстояние */
        transform: scale(0.95) !important; /* Сжатие по масштабу */
        transform-origin: center !important;
    }

    /* Мобильный стиль для отдельной панели очков — прижимаем к подсказкам */
    .score-panel-row {
        background: rgba(255, 255, 255, 0.85) !important;
        border: 1px solid rgba(93, 64, 55, 0.15) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04), inset 0 1px 2px rgba(255, 255, 255, 0.8) !important;
        border-radius: 20px !important;
        padding: 4px 12px !important; /* Чуть компактнее по вертикали */
        margin: 0 auto 6px auto !important; /* ПОТОЛОК ПРИЖАТ К ПОЛУ ПОДСКАЗОК (0px сверху), снизу зазор 6px к слову */
        max-width: 96% !important; /* Больше пространства по горизонтали */
        width: fit-content !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .score-display-inline {
        font-size: clamp(10px, 2.6vw, 13px) !important; /* Динамический размер */
        color: var(--accent-color) !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: row !important; /* Строго в одну строку */
        flex-wrap: nowrap !important; /* Запрещаем перенос */
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important; /* Зазоры */
        line-height: 1.2 !important;
        width: 100% !important;
        border-bottom: none !important;
        white-space: nowrap !important; /* Без переносов */
    }

    /* Адаптивное, супер-компактное Описание и Контекст */
    #description-container.visible {
        padding: 4px 8px !important;
        margin-bottom: 2px !important;
    }

    .word-description {
        font-size: clamp(8px, 2.3vw, 10.5px) !important; /* Уменьшенный адаптивный размер шрифта */
        line-height: 1.2 !important;
    }

    .word-description .lang-switch-block {
        margin-bottom: 3px !important;
        padding-bottom: 3px !important;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.08) !important;
    }

    .word-description .lang-switch-title {
        font-size: clamp(8px, 2.3vw, 10.5px) !important;
    }

    /* Супер-компактная нижняя панель (прошлое и следующее слово) */
    .word-history-footer-container.visible {
        min-height: 44px !important; /* Существенно уменьшаем высоту, чтобы влезало до клавиатуры */
        max-height: 58px !important;
        padding: 2px 8px !important;
        margin-top: 3px !important;
    }

    .previous-word-box,
    .next-word-box {
        font-size: clamp(8px, 2.2vw, 9.5px) !important; /* Динамический размер шрифта */
        line-height: 1.15 !important;
        padding-top: 0.9em !important;
        min-height: 32px !important;
    }

    .history-label {
        font-size: clamp(7.5px, 2vw, 8.5px) !important;
    }
}

@media (max-width: 600px) {
    /* Полностью скрываем глобальную шапку с выбором музыки, настроек и выхода на мобильном */
    body.view-game-active header.top-bar,
    body.view-game-active .top-bar {
        display: none !important;
    }

    /* Возвращаем и настраиваем шапку основного контейнера (с кнопкой Домой и стрелками) */
    .main-header-bar {
        display: flex !important;
        padding: 6px 10px !important;
        min-height: 44px !important;
    }

    /* Подтягиваем основную панель ближе к верху экрана */
    #app {
        padding-top: 4px !important;
    }

    .card-training.training-layout {
        padding-top: 4px !important;
        margin-top: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Позиционирование прогресс-индикатора и кнопки настроек на одном уровне */
    .progress-indicator {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 45px 0 6px !important; /* освобождаем место справа под шестеренку */
        margin-bottom: 2px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    .progress-indicator .settings-button {
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 1.25em !important;
        color: var(--accent-color, #5d4037) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1000 !important;
    }

    .progress-indicator .training-settings-popover {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        right: 8px !important;
        z-index: 1001 !important;
    }

    /* Мобильный вид для модального окна после правильного ответа */
    .success-modal-overlay {
        align-items: flex-start !important;
        padding-top: 10px !important; /* Размещаем модальное окно выше */
    }

    .success-modal-content {
        margin-top: 0 !important;
        max-height: calc(100dvh - 240px) !important; /* Исключаем перекрытие с виртуальной клавиатурой (240px) */
        overflow-y: auto !important; /* Включаем вертикальный скролл при переполнении */
        padding: 16px !important;
        gap: 8px !important;
        width: 88% !important;
        border-radius: 18px !important;
        border: 2px solid var(--accent-color, #5d4037) !important;
    }

    /* Убираем кнопку "Продолжить" в мобильной версии */
    .sm-continue-btn {
        display: none !important;
    }

    /* Буквенные инпуты — пропорциональный размер */
    .letter-input {
        width: clamp(26px, 7.5vw, 40px) !important;
        min-width: 22px !important;
        height: clamp(36px, 11vw, 50px) !important;
    }

    /* Группы слов в гибридном режиме — разрешаем перенос */
    .hybrid-phrase-container {
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin: 16px 0 !important;
    }

    /* Инпут целого слова — на всю ширину */
    .letter-input.full-word-input {
        width: 90% !important;
        max-width: 100% !important;
    }

    /* Статичные части фразы в гибридном режиме */
    .hybrid-static {
        font-size: 1.2rem !important;
    }

    /* Кнопка-подсказка и жизни */
    .unified-hint-container {
        gap: 6px !important;
    }

    .hint-gold-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .hearts-simple-btn {
        font-size: 0.85em !important;
        padding: 4px 8px !important;
    }

    /* Кнопка "Следующее слово" (стрелка) */
    .next-arrow-button {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* =====================================================================
   7. МОДАЛЬНЫЕ ОКНА И IFRAME
   ===================================================================== */

@media (max-width: 600px) {
    /* Фреймы статистики и редактора — полноэкранные */
    #stats-popup .modal-content,
    #editor-popup .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
    }

    /* Кнопка закрытия — крупная, удобная для пальца */
    .modal-close-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 22px !important;
        top: 10px !important;
        right: 10px !important;
    }

    /* Confirmation-modal — чуть компактнее */
    #confirmation-modal .modal-content {
        max-height: 90dvh !important;
        padding: 18px !important;
    }

    /* Кнопки в confirmation-modal */
    .modal-buttons-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .modal-buttons-row button {
        min-height: 48px !important;
        font-size: 1em !important;
    }
}

/* =====================================================================
   8. ОЧЕНЬ УЗКИЕ ЭКРАНЫ (< 400px — старые/бюджетные смартфоны)
   ===================================================================== */

@media (max-width: 400px) {
    .wrap {
        padding: 6px 4px !important;
    }

    .container {
        padding: 10px !important;
    }

    .profile-card h2 {
        font-size: 0.9em !important;
    }

    .stage-tab-btn {
        font-size: 0.75em !important;
        padding: 8px 10px !important;
    }

    .letter-input {
        width: clamp(22px, 6.5vw, 32px) !important;
        height: clamp(32px, 10vw, 42px) !important;
    }

    .hybrid-static {
        font-size: 1.05rem !important;
    }
}

/* Final mobile shell fixes for non-game SPA screens. */
@media (max-width: 600px) {
    body.view-levels-active,
    body.view-stages-active {
        min-height: 100dvh !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        background: linear-gradient(135deg, var(--bg-grad-start, #d7c29e), var(--bg-grad-end, #b9a178)) !important;
    }

    body.view-levels-active .wrap,
    body.view-stages-active .wrap {
        min-height: 100dvh !important;
        padding: max(12px, env(safe-area-inset-top)) 4px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        background: var(--paper-color, #faf3e0) !important;
    }

    body.view-levels-active .top-bar,
    body.view-stages-active .top-bar {
        display: flex !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: clamp(56px, 14vw, 74px) !important;
        padding: clamp(7px, 2vw, 12px) clamp(8px, 2.8vw, 16px) !important;
        gap: clamp(4px, 1.8vw, 10px) !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }

    body.view-levels-active .wrap > .container,
    body.view-stages-active .wrap > .container {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: calc(100dvh - clamp(68px, 18vw, 92px)) !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
        background: var(--paper-color, #faf3e0) !important;
    }

    body.view-stages-active .wrap > .container {
        min-height: calc(100dvh - clamp(70px, 19vw, 96px)) !important;
    }

    body.view-levels-active .top-bar .header-btn,
    body.view-stages-active .top-bar .header-btn {
        height: clamp(38px, 10vw, 48px) !important;
        padding: 0 clamp(8px, 2.5vw, 14px) !important;
        font-size: clamp(0.78rem, 3.2vw, 0.95rem) !important;
        border-radius: clamp(10px, 3vw, 14px) !important;
    }

    body.view-levels-active .top-bar-center,
    body.view-stages-active .top-bar-center {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: clamp(3px, 1vw, 7px) !important;
        transform: none !important;
        left: auto !important;
        position: static !important;
    }

    body.view-levels-active #audio-widget-place,
    body.view-stages-active #audio-widget-place {
        width: auto !important;
        flex: 0 1 auto !important;
    }

    body.view-levels-active .audio-integrated-wrapper,
    body.view-stages-active .audio-integrated-wrapper {
        transform: scale(clamp(0.78, 2.8vw, 1));
        transform-origin: center;
    }

    body.view-levels-active .user-block-wrapper,
    body.view-stages-active .user-block-wrapper {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        gap: clamp(4px, 1.2vw, 8px) !important;
    }

    body.view-levels-active .user-pedestal,
    body.view-stages-active .user-pedestal {
        min-width: 0 !important;
        padding: 4px 6px !important;
    }

    body.view-levels-active .cab-header-user-block,
    body.view-stages-active .cab-header-user-block {
        gap: clamp(4px, 1.5vw, 8px) !important;
    }

    body.view-levels-active .header-avatar,
    body.view-stages-active .header-avatar {
        width: clamp(30px, 8vw, 38px) !important;
        height: clamp(30px, 8vw, 38px) !important;
        font-size: clamp(16px, 4.8vw, 20px) !important;
    }

    body.view-levels-active .user-name-container,
    body.view-stages-active .user-name-container {
        min-width: 0 !important;
        max-width: clamp(64px, 22vw, 124px) !important;
    }

    body.view-levels-active #user-name-display,
    body.view-stages-active #user-name-display,
    body.view-levels-active #user-email-full,
    body.view-stages-active #user-email-full {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.view-levels-active #user-name-display,
    body.view-stages-active #user-name-display {
        font-size: clamp(0.78rem, 3.2vw, 1rem) !important;
    }

    body.view-levels-active #user-email-full,
    body.view-stages-active #user-email-full {
        font-size: clamp(0.62rem, 2.4vw, 0.78rem) !important;
    }

    body.view-levels-active .exit-btn-power,
    body.view-stages-active .exit-btn-power {
        width: clamp(38px, 10vw, 50px) !important;
        height: clamp(38px, 10vw, 50px) !important;
        border-radius: clamp(10px, 3vw, 14px) !important;
        flex: 0 0 auto !important;
    }

    body.view-levels-active .exit-btn-power svg,
    body.view-stages-active .exit-btn-power svg {
        width: clamp(22px, 6vw, 28px) !important;
        height: clamp(22px, 6vw, 28px) !important;
    }
}

/* Ultimate mobile layout lock for levels and stages. Keep this block last. */
@media (max-width: 600px) {
    html[data-initial-view="levels"] body,
    html[data-initial-view="stages"] body,
    body.view-levels-active,
    body.view-stages-active,
    body:has(#view-levels.spa-view.active),
    body:has(#view-stages.spa-view.active) {
        min-height: 100dvh !important;
        padding: 0 !important;
        background: var(--paper-color, #faf3e0) !important;
        overflow-x: hidden !important;
    }

    html[data-initial-view="levels"] body .wrap,
    html[data-initial-view="stages"] body .wrap,
    body.view-levels-active .wrap,
    body.view-stages-active .wrap,
    body:has(#view-levels.spa-view.active) .wrap,
    body:has(#view-stages.spa-view.active) .wrap {
        width: 100% !important;
        min-height: 100dvh !important;
        margin: 0 auto !important;
        padding: max(14px, env(safe-area-inset-top)) 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        background: var(--paper-color, #faf3e0) !important;
        box-sizing: border-box !important;
    }

    html[data-initial-view="levels"] body .wrap > .container,
    html[data-initial-view="stages"] body .wrap > .container,
    body.view-levels-active .wrap > .container,
    body.view-stages-active .wrap > .container,
    body:has(#view-levels.spa-view.active) .wrap > .container,
    body:has(#view-stages.spa-view.active) .wrap > .container {
        flex: 1 0 auto !important;
        width: 100% !important;
        min-height: calc(100dvh - clamp(68px, 17vw, 90px)) !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
        background: var(--paper-color, #faf3e0) !important;
        box-shadow: none !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        box-sizing: border-box !important;
    }

    #view-levels.spa-view.active,
    #view-stages.spa-view.active,
    #levels-grid-container,
    #view-stages .level-header-row,
    #view-stages .tabs,
    #view-stages .stage-cards-container,
    #view-stages .stage-panel,
    #view-stages .tactical-menu-bar {
        background: var(--paper-color, #faf3e0) !important;
    }

    #view-levels.spa-view.active,
    #view-stages.spa-view.active {
        min-height: 100% !important;
    }

    body.view-levels-active .top-bar,
    body.view-stages-active .top-bar,
    body:has(#view-levels.spa-view.active) .top-bar,
    body:has(#view-stages.spa-view.active) .top-bar {
        display: flex !important;
        min-height: clamp(58px, 15vw, 76px) !important;
        margin: 0 0 10px !important;
        padding: clamp(8px, 2.4vw, 12px) clamp(8px, 2.6vw, 14px) !important;
        border-radius: 0 0 16px 16px !important;
        align-items: center !important;
        gap: clamp(4px, 1.4vw, 8px) !important;
        overflow: visible !important;
    }

    body.view-levels-active .top-bar .btn-label,
    body.view-stages-active .top-bar .btn-label,
    body:has(#view-levels.spa-view.active) .top-bar .btn-label,
    body:has(#view-stages.spa-view.active) .top-bar .btn-label,
    body.view-levels-active .user-name-container,
    body.view-stages-active .user-name-container,
    body:has(#view-levels.spa-view.active) .user-name-container,
    body:has(#view-stages.spa-view.active) .user-name-container {
        display: none !important;
    }

    body.view-levels-active .user-block-wrapper,
    body.view-stages-active .user-block-wrapper,
    body:has(#view-levels.spa-view.active) .user-block-wrapper,
    body:has(#view-stages.spa-view.active) .user-block-wrapper {
        gap: 4px !important;
        flex-shrink: 0 !important;
    }

    body.view-levels-active .user-pedestal,
    body.view-stages-active .user-pedestal,
    body:has(#view-levels.spa-view.active) .user-pedestal,
    body:has(#view-stages.spa-view.active) .user-pedestal {
        width: auto !important;
        padding: 3px 5px !important;
    }

    body.view-levels-active .exit-btn-power,
    body.view-stages-active .exit-btn-power,
    body:has(#view-levels.spa-view.active) .exit-btn-power,
    body:has(#view-stages.spa-view.active) .exit-btn-power {
        margin-left: 0 !important;
    }
}