/*
 * 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) {

    /* History block compacting */
    .word-history-footer-container {
        min-height: auto !important;
        padding: 2px 5px !important;
    }

    .previous-word-box,
    .next-word-box {
        font-size: 0.75rem !important;
        padding-top: 1.1em !important;
        min-height: 40px !important;
        line-height: 1.1 !important;
    }

    html[data-initial-view="levels"] body,
    html[data-initial-view="stages"] body,
    body.view-levels-active,
    body.view-stages-active,
    body.view-selection-active,
    body:has(#view-levels.spa-view.active),
    body:has(#view-stages.spa-view.active),
    body:has(#view-selection.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.view-selection-active .wrap,
    body:has(#view-levels.spa-view.active) .wrap,
    body:has(#view-stages.spa-view.active) .wrap,
    body:has(#view-selection.spa-view.active) .wrap {
        width: 100% !important;
        min-height: 100dvh !important;
        margin: 0 auto !important;
        padding: max(4px, 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.view-selection-active .wrap>.container,
    body:has(#view-levels.spa-view.active) .wrap>.container,
    body:has(#view-stages.spa-view.active) .wrap>.container,
    body:has(#view-selection.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.view-selection-active .top-bar,
    body:has(#view-levels.spa-view.active) .top-bar,
    body:has(#view-stages.spa-view.active) .top-bar,
    body:has(#view-selection.spa-view.active) .top-bar {
        display: flex !important;
        min-height: 34px !important;
        margin: 0 0 4px !important;
        padding: 2px 6px !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.view-selection-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:has(#view-selection.spa-view.active) .top-bar .btn-label,
body.view-levels-active .user-name-container,
body.view-stages-active .user-name-container,
body.view-selection-active .user-name-container,
body:has(#view-levels.spa-view.active) .user-name-container,
body:has(#view-stages.spa-view.active) .user-name-container,
body:has(#view-selection.spa-view.active) .user-name-container {
    display: none !important;
}

body.view-levels-active .user-block-wrapper,
body.view-stages-active .user-block-wrapper,
body.view-selection-active .user-block-wrapper,
body:has(#view-levels.spa-view.active) .user-block-wrapper,
body:has(#view-stages.spa-view.active) .user-block-wrapper,
body:has(#view-selection.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.view-selection-active .user-pedestal,
body:has(#view-levels.spa-view.active) .user-pedestal,
body:has(#view-stages.spa-view.active) .user-pedestal,
body:has(#view-selection.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.view-selection-active .exit-btn-power,
body:has(#view-levels.spa-view.active) .exit-btn-power,
body:has(#view-stages.spa-view.active) .exit-btn-power,
body:has(#view-selection.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) {

    /* History block compacting */
    .word-history-footer-container {
        min-height: auto !important;
        padding: 2px 5px !important;
    }

    .previous-word-box,
    .next-word-box {
        font-size: 0.75rem !important;
        padding-top: 1.1em !important;
        min-height: 40px !important;
        line-height: 1.1 !important;
    }

    html[data-initial-view="levels"] body,
    html[data-initial-view="stages"] body,
    body.view-levels-active,
    body.view-stages-active,
    body.view-selection-active,
    body:has(#view-levels.spa-view.active),
    body:has(#view-stages.spa-view.active),
    body:has(#view-selection.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.view-selection-active .wrap,
    body:has(#view-levels.spa-view.active) .wrap,
    body:has(#view-stages.spa-view.active) .wrap,
    body:has(#view-selection.spa-view.active) .wrap {
        width: 100% !important;
        min-height: 100dvh !important;
        padding: max(4px, 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.view-selection-active .wrap>.container,
    body:has(#view-levels.spa-view.active) .wrap>.container,
    body:has(#view-stages.spa-view.active) .wrap>.container,
    body:has(#view-selection.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.view-selection-active .top-bar,
    body:has(#view-levels.spa-view.active) .top-bar,
    body:has(#view-stages.spa-view.active) .top-bar,
    body:has(#view-selection.spa-view.active) .top-bar {
        min-height: 34px !important;
        margin: 0 0 4px !important;
        padding: 2px 6px !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.view-selection-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:has(#view-selection.spa-view.active) .top-bar .btn-label,
body.view-levels-active .user-name-container,
body.view-stages-active .user-name-container,
body.view-selection-active .user-name-container,
body:has(#view-levels.spa-view.active) .user-name-container,
body:has(#view-stages.spa-view.active) .user-name-container,
body:has(#view-selection.spa-view.active) .user-name-container {
    display: none !important;
}

body.view-levels-active .user-block-wrapper,
body.view-stages-active .user-block-wrapper,
body.view-selection-active .user-block-wrapper,
body:has(#view-levels.spa-view.active) .user-block-wrapper,
body:has(#view-stages.spa-view.active) .user-block-wrapper,
body:has(#view-selection.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.view-selection-active .user-pedestal,
body:has(#view-levels.spa-view.active) .user-pedestal,
body:has(#view-stages.spa-view.active) .user-pedestal,
body:has(#view-selection.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.view-selection-active .exit-btn-power,
body:has(#view-levels.spa-view.active) .exit-btn-power,
body:has(#view-stages.spa-view.active) .exit-btn-power,
body:has(#view-selection.spa-view.active) .exit-btn-power {
    margin-left: 0 !important;
}

/* Word Selection / Tabs and Controls Compaction */
.tabs-and-controls {
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    padding-bottom: 5px !important;
    margin-bottom: 5px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.tabs-and-controls::-webkit-scrollbar {
    display: none !important;
}

.tabs-and-controls .tabs {
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
}

.tabs-and-controls .button.small {
    padding: 4px 8px !important;
    font-size: 0.8em !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Remove the text from 50/50 / Reset / Select All buttons, keep only emojis on narrow screens */
.tabs-and-controls>div[style*="display:flex"]>.button {
    font-size: 0 !important;
    padding: 4px 6px !important;
}

.tabs-and-controls>div[style*="display:flex"]>.button::first-letter {
    font-size: 14px !important;
    /* The emoji */
}

#expand-toggle-btn {
    padding: 4px 8px !important;
    font-size: 0.75em !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) {

    /* History block compacting */
    .word-history-footer-container {
        min-height: auto !important;
        padding: 2px 5px !important;
    }

    .previous-word-box,
    .next-word-box {
        font-size: 0.75rem !important;
        padding-top: 1.1em !important;
        min-height: 40px !important;
        line-height: 1.1 !important;
    }

    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], .hybrid-input[readonly], .full-word-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) {

    /* History block compacting */
    .word-history-footer-container {
        min-height: auto !important;
        padding: 2px 5px !important;
    }

    .previous-word-box,
    .next-word-box {
        font-size: 0.75rem !important;
        padding-top: 1.1em !important;
        min-height: 40px !important;
        line-height: 1.1 !important;
    }

    /*
     * .wrap уже имеет min-height:100vh + flex-column из десктопных стилей (index.html стр. 583).
     * На мобильных сохраняем отступ сверху побольше, чтобы шапка не упиралась в край экрана.
     */
    .wrap {
        padding: 4px 6px 20px !important;
        /* сверху 4px — место для шапки */
        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: 28px !important;
        height: 28px !important;
        min-width: 28px !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: 28px !important;
        height: 28px !important;
        min-width: 28px !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: 28px !important;
        height: 28px !important;
        min-width: 28px !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) {

    /* History block compacting */
    .word-history-footer-container {
        min-height: auto !important;
        padding: 2px 5px !important;
    }

    .previous-word-box,
    .next-word-box {
        font-size: 0.75rem !important;
        padding-top: 1.1em !important;
        min-height: 40px !important;
        line-height: 1.1 !important;
    }

    /* ── Заголовок «Выберите уровень» — всё в одну строку ── */
    .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 0 !important;
        /* убираем боковой padding — переносим на детей */
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        /* чтобы дети не вылезали за border-radius */
    }

    /* Боковой padding на каждый дочерний элемент КРОМЕ stats */
    .stage-card>.status-badge,
    .stage-card>h2,
    .stage-card>.stage-card-buttons,
    .stage-card>.reset-session-btn {
        margin-left: 14px !important;
        margin-right: 14px !important;
    }

    .stage-card h2 {
        font-size: 1.0em !important;
        /* уменьшили с 1.3rem */
        margin: 4px 14px 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;
        overflow: visible !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .stage-card-buttons {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Расширяем тикер и блок пакета во всю ширину карточки (768px) */
    .stage-card-stats .spoiler-container,
    .stage-card-stats .session-info-compact,
    .stage-card-stats .word-ticker-container,
    .stage-card-stats .batch-container,
    .stage-card-stats .stats-ticker-placeholder .word-ticker-container {
        margin-left: -14px !important;
        margin-right: -14px !important;
        width: calc(100% + 28px) !important;
        max-width: none !important;
        display: block !important;
        box-sizing: border-box !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !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 {
        display: none !important;
    }

    #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) {

    /* History block compacting */
    .word-history-footer-container {
        min-height: auto !important;
        padding: 2px 5px !important;
    }

    .previous-word-box,
    .next-word-box {
        font-size: 0.75rem !important;
        padding-top: 1.1em !important;
        min-height: 40px !important;
        line-height: 1.1 !important;
    }

    /* На телефоне минимальные отступы 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 0 !important;
        /* нулевой боковой — как в 768px блоке */
        border-radius: 14px !important;
    }

    .stage-card h2 {
        font-size: 1.05em !important;
        margin: 4px 14px 8px !important;
    }

    .stage-card-stats {
        font-size: 0.8em !important;
        margin-bottom: 10px !important;
        overflow: visible !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .stage-card-buttons .btn {
        min-height: 40px !important;
        font-size: 0.9em !important;
        padding: 8px !important;
    }

    /* Тикер и блок пакета — во всю ширину карточки */
    .stage-card-stats .session-info-compact,
    .stage-card-stats .word-ticker-container,
    .stage-card-stats .spoiler-container,
    .stage-card-stats .batch-container,
    .stage-card-stats .stats-ticker-placeholder .word-ticker-container {
        margin-left: -14px !important;
        margin-right: -14px !important;
        width: calc(100% + 28px) !important;
        max-width: none !important;
        display: block !important;
        box-sizing: border-box !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    .spoiler-container {
        overflow: hidden !important;
    }

}

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

@media (max-width: 600px) {

    /* History block compacting */
    .word-history-footer-container {
        min-height: auto !important;
        padding: 2px 5px !important;
    }

    .previous-word-box,
    .next-word-box {
        font-size: 0.75rem !important;
        padding-top: 1.1em !important;
        min-height: 40px !important;
        line-height: 1.1 !important;
    }

    /*
     * ── Сокращение текста вкладок: «Этап 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: attr(data-mobile-text);
        font-size: 13px;
        font-weight: 600;
    }

    #tab-stage-2::before {
        content: attr(data-mobile-text);
        font-size: 13px;
        font-weight: 600;
    }

    #tab-stage-3::before {
        content: attr(data-mobile-text);
        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 - 75px) !important;
        /* dvh — динамический vh, учитывает панель браузера */
        min-height: 400px !important;
    }
}

@media (max-width: 600px) {

    /* History block compacting */
    .word-history-footer-container {
        min-height: auto !important;
        padding: 2px 5px !important;
    }

    .previous-word-box,
    .next-word-box {
        font-size: 0.75rem !important;
        padding-top: 1.1em !important;
        min-height: 40px !important;
        line-height: 1.1 !important;
    }

    /* Шапка раздела выбора слов */
    .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;
    }

    [data-theme="dark"] .bottom-controls-bar,
    body.theme-dark .bottom-controls-bar {
        background: rgba(15, 23, 42, 0.95) !important;
        border-top-color: rgba(196, 181, 253, 0.24) !important;
        box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.3) !important;
    }

    [data-theme="dark"] #selection-counter,
    [data-theme="dark"] .bottom-controls-bar label,
    [data-theme="dark"] .bottom-controls-bar p,
    body.theme-dark #selection-counter,
    body.theme-dark .bottom-controls-bar label,
    body.theme-dark .bottom-controls-bar p {
        color: #f8fafc !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: 36px !important;
        font-size: 0.85em !important;
        padding: 6px !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 {
        gap: 4px !important;
        padding: 2px 8px !important;
        min-height: 28px !important;
    }

    .hearts-simple-btn {
        font-size: 1.1rem !important;
    }

    .hint-gold-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.75rem !important;
        padding: 0 !important;
    }

    .favorite-toggle {
        width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
    }

    .favorite-toggle svg {
        width: 14px !important;
        height: 14px !important;
    }

    .hearts-simple-btn {
        font-size: 0.85rem !important;
        padding: 0 4px !important;
        min-width: 70px !important;
    }

    .hint-cost-text {
        font-size: 0.75rem !important;
        min-width: auto !important;
    }

    .hint-separator {
        height: 16px !important;
    }

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

    [data-theme="dark"] .unified-hint-container,
    body.theme-dark .unified-hint-container {
        gap: 4px !important;
        padding: 2px 8px !important;
        min-height: 28px !important;
    }

    .hearts-simple-btn {
        font-size: 1.1rem !important;
    }

    .hint-gold-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.75rem !important;
        padding: 0 !important;
    }

    .favorite-toggle {
        width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
    }

    .favorite-toggle svg {
        width: 14px !important;
        height: 14px !important;
    }

    [data-theme="dark"] .favorite-toggle.is-favorite,
    body.theme-dark .favorite-toggle.is-favorite {
        background: rgba(251, 191, 36, 0.18) !important;
        color: #facc15 !important;
    }
}

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

@media (max-width: 600px) {

    /* History block compacting */
    .word-history-footer-container {
        min-height: auto !important;
        padding: 2px 5px !important;
    }

    .previous-word-box,
    .next-word-box {
        font-size: 0.75rem !important;
        padding-top: 1.1em !important;
        min-height: 40px !important;
        line-height: 1.1 !important;
    }

    /* Фреймы статистики и редактора — полноэкранные */
    #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: 12px !important;
        gap: 6px !important;
    }

    #confirmation-modal .modal-title {
        font-size: 1.3em !important;
        margin-bottom: 8px !important;
        margin-top: 5px !important;
    }

    #confirmation-modal .modal-search-bar {
        margin-bottom: 8px !important;
    }

    #confirmation-modal #modal-search-input {
        padding: 8px 10px 8px 35px !important;
        height: 36px !important;
        font-size: 0.9em !important;
    }

    #confirmation-modal .selection-counter {
        margin-bottom: 8px !important;
        font-size: 0.85em !important;
        padding: 2px !important;
    }

    #confirmation-modal .conf-item {
        padding: 6px 8px !important;
    }

    #confirmation-modal .dictionary-item-main strong {
        font-size: 0.9em !important;
    }

    #confirmation-modal .item-translations span {
        font-size: 0.8em !important;
    }

    #confirmation-modal .delete-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 12px !important;
    }

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

    .modal-buttons-row button {
        min-height: 38px !important;
        font-size: 0.85em !important;
        padding: 0 10px !important;
        flex: 1 !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;
        font-size: clamp(16px, 5vw, 20px) !important;
    }

    .letter-input.full-word-input {
        width: 100% !important; /* Stage 2 */
        max-width: 350px !important;
        height: 45px !important;
        padding: 5px 10px !important;
        font-size: clamp(16px, 5vw, 20px) !important;
    }

    .hybrid-input.full-word-input {
        min-width: 40px !important; /* Override min-width: 80px */
        max-width: 350px !important;
        height: 45px !important;
        padding: 5px 10px !important;
        font-size: clamp(16px, 5vw, 20px) !important;
    }

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

/* Final mobile shell fixes for non-game SPA screens. */
@media (max-width: 600px) {

    /* History block compacting */
    .word-history-footer-container {
        min-height: auto !important;
        padding: 2px 5px !important;
    }

    .previous-word-box,
    .next-word-box {
        font-size: 0.75rem !important;
        padding-top: 1.1em !important;
        min-height: 40px !important;
        line-height: 1.1 !important;
    }

    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 {
        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;
    }

    /* override removed to keep global 36px */

    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(0.9);
        transform-origin: center;
    }

    /* user block gap override removed */

    /* pedestal padding override removed */

    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,
    body.view-selection-active .header-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !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;
    }

    /* exit btn size override removed */

    /* exit btn svg override removed */
}

/* Ultimate mobile layout lock for levels and stages. Keep this block last. */
@media (max-width: 600px) {

    /* History block compacting */
    .word-history-footer-container {
        min-height: auto !important;
        padding: 2px 5px !important;
    }

    .previous-word-box,
    .next-word-box {
        font-size: 0.75rem !important;
        padding-top: 1.1em !important;
        min-height: 40px !important;
        line-height: 1.1 !important;
    }

    html[data-initial-view="levels"] body,
    html[data-initial-view="stages"] body,
    body.view-levels-active,
    body.view-stages-active,
    body.view-selection-active,
    body:has(#view-levels.spa-view.active),
    body:has(#view-stages.spa-view.active),
    body:has(#view-selection.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.view-selection-active .wrap,
    body:has(#view-levels.spa-view.active) .wrap,
    body:has(#view-stages.spa-view.active) .wrap,
    body:has(#view-selection.spa-view.active) .wrap {
        width: 100% !important;
        min-height: 100dvh !important;
        margin: 0 auto !important;
        padding: max(4px, 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.view-selection-active .wrap>.container,
    body:has(#view-levels.spa-view.active) .wrap>.container,
    body:has(#view-stages.spa-view.active) .wrap>.container,
    body:has(#view-selection.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.view-selection-active .top-bar,
    body:has(#view-levels.spa-view.active) .top-bar,
    body:has(#view-stages.spa-view.active) .top-bar,
    body:has(#view-selection.spa-view.active) .top-bar {
        display: flex !important;
        min-height: 34px !important;
        margin: 0 0 4px !important;
        padding: 2px 6px !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.view-selection-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:has(#view-selection.spa-view.active) .top-bar .btn-label,
    body.view-levels-active .user-name-container,
    body.view-stages-active .user-name-container,
    body.view-selection-active .user-name-container,
    body:has(#view-levels.spa-view.active) .user-name-container,
    body:has(#view-stages.spa-view.active) .user-name-container,
    body:has(#view-selection.spa-view.active) .user-name-container {
        display: none !important;
    }

    body.view-levels-active .user-block-wrapper,
    body.view-stages-active .user-block-wrapper,
    body.view-selection-active .user-block-wrapper,
    body:has(#view-levels.spa-view.active) .user-block-wrapper,
    body:has(#view-stages.spa-view.active) .user-block-wrapper,
    body:has(#view-selection.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.view-selection-active .user-pedestal,
    body:has(#view-levels.spa-view.active) .user-pedestal,
    body:has(#view-stages.spa-view.active) .user-pedestal,
    body:has(#view-selection.spa-view.active) .user-pedestal {
        width: auto !important;
        padding: 0 !important;
    }

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

/* =====================================================================
   7. МАКЕТЫ ДЛЯ НОВОЙ КНОПКИ ВЫБОРА СЛОВ (МОБИЛЬНАЯ ВЕРСИЯ)
   ===================================================================== */
.mobile-only-action-container {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only-action-container {
        display: block;
        margin: 8px 0 0 0;
        padding: 0 4px;
        box-sizing: border-box;
    }

    .stage-cards-container {
        margin-top: 8px !important;
    }

    #view-stages .stage-cards,
    .stage-cards {
        margin-top: 6px !important;
    }

    .mobile-change-words-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.7));
        border: 1px solid rgba(93, 64, 55, 0.15);
        border-radius: 16px;
        padding: 12px 16px;
        color: var(--accent-color, #5d4037);
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(93, 64, 55, 0.05), inset 0 1px 1px #fff;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-change-words-btn:active {
        background: rgba(255, 255, 255, 0.9);
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(93, 64, 55, 0.08);
        border-color: rgba(93, 64, 55, 0.25);
    }

    .mobile-change-words-btn-icon {
        font-size: 1.1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.4s ease;
    }

    .mobile-change-words-btn:active .mobile-change-words-btn-icon {
        transform: rotate(-180deg);
    }

    .mobile-change-words-btn-text {
        letter-spacing: 0.2px;
    }

    [data-theme="dark"] .mobile-change-words-btn,
    body.theme-dark .mobile-change-words-btn {
        background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(51, 65, 85, 0.94));
        border-color: rgba(196, 181, 253, 0.34);
        color: #ddd6fe;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
    }

    [data-theme="dark"] .mobile-change-words-btn:active,
    body.theme-dark .mobile-change-words-btn:active {
        background: rgba(51, 65, 85, 0.98);
        border-color: rgba(221, 214, 254, 0.44);
    }
}





.selection-header {
    flex-shrink: 0 !important;
}






@media (max-width: 600px) {

    /* Top bar visibility is now managed along with levels view */
    
    /* FORCE HIDE TOP BAR IN GAME VIEW */
    body.view-game-active .top-bar,
    body:has(#view-game.spa-view.active) .top-bar {
        display: none !important;
    }

    /* FIX TRAINER STATS OVERFLOW AND SIZE */
    .score-display-inline {
        font-size: 0.75em !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        text-align: center !important;
        display: block !important;
        padding: 0 4px !important;
    }
}