/* Адаптив практики: одна точка перелома.
   Часть components/lesson-ui.css; порядок частей важен — см. static/README.md. */
@media (max-width: 640px) {

    #game-welcome .button-panel__actions {
        flex-direction: column;
        align-items: stretch;
    }

    #game-welcome .button-panel__actions .app-button {
        width: 100%;
    }

.game-page [data-learn-grid] {
        gap: 16px;
    }

    .learn-session-bar {
        --item-card-padding: 10px 12px;
        gap: 8px;
        align-items: stretch;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .learn-session-bar__progress {
        width: 100%;
    }

    .learn-session-bar__mode {
        font-size: 16px;
    }

    .learn-session-inline .button-panel__actions {
        flex-direction: column;
    }

    #game-path-recommendation {
        grid-template-columns: 1fr;
        --item-card-padding: 18px;
    }

    #game-path-recommendation .button-panel__actions {
        flex-direction: column;
        align-items: stretch;
    }

    [data-step-list] {
        grid-template-columns: 1fr;
    }

[data-game-card] {
        --item-card-padding: 16px;
    }

.game-page [data-game-card] {
        --item-card-padding: 18px;
        --item-card-radius: var(--surface-radius);
    }

    [data-study-media] [data-game-image] {
        max-height: 200px;
    }

[data-game-question] {
        font-size: 20px;
    }

    [data-game-card] .button-panel__actions {
        flex-direction: column;
    }

    [data-game-option].menu-button {
        --menu-button-padding: 10px var(--control-padding-x-wide);
    }

    .progress-value {
        font-size: 18px;
    }

    #gameSettingsModal .layout-grid-auto {
        --layout-grid-min: 100%;
    }

    #gameSettingsModal .field-stack {
        --field-control-height: 40px;
    }

    #game-history {
        max-height: 220px;
    }

}