/**
 * Flux Playground — mobile tweaks (narrow viewports).
 */

@media (max-width: 640px) {
    #hud.hud-bar {
        padding: 8px 10px;
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
        gap: 8px 12px;
        justify-content: flex-start;
    }

    .theme-buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 2px;
    }

    .hud-hint {
        max-width: 100%;
        flex: 1 1 100%;
        text-align: center;
    }

    .hud-section--themes {
        flex: 1 1 100%;
        justify-content: center;
    }
}