/* ============================================================================
   MOBILE SPACING FIX: Reduce vertical gaps between option groups
   Targets both game-based and needs-based builder preference sections
   ============================================================================ */
@media (max-width: 767.98px) {

    /* Reduce Bootstrap column gutter stacking for preference button rows */
    .game-based-controls .row > [class*="col-"],
    .needs-based-controls .row > [class*="col-"] {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Compact the selection group padding so stacked columns don't gap heavily */
    .game-based-controls .demo-selection-group,
    .needs-based-controls .demo-selection-group {
        padding: 0.5rem 0.5rem !important;
        margin-bottom: 0 !important;
    }

    /* Tighten the title above each button group */
    .game-based-controls h6.text-white,
    .needs-based-controls h6.text-white {
        margin-bottom: 0.4rem !important;
        margin-top: 0 !important;
    }

    /* Remove extra margin on the slider/preference rows */
    .needs-based-controls .row.mt-4 {
        margin-top: 0.75rem !important;
    }

    .needs-sliders-grid .demo-selection-group {
        padding: 0.1rem 0.5rem !important;
        margin-bottom: 0 !important;
    }
}

/* ============================================================================
   GAME CAROUSEL FIX: Show 2 cards per row, larger, with horizontal paging
   ============================================================================ */
@media (max-width: 767.98px) {

    /* Reset the existing tiny grid layout */
    .carousel-content-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        gap: 0.5rem !important;
        padding: 0.25rem 0.25rem !important;
        max-height: none !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        flex: 1 !important; /* Take only remaining space after arrows */
    }

    /* Two rows of 2 cards */
    .carousel-content-wrapper {
        flex-wrap: wrap !important;
        max-height: 260px !important;
        align-content: flex-start !important;
    }

    /* Each row holds 2 cards */
    .game-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
        flex-shrink: 0;
        width: 100%;
        justify-content: center !important;
    }

    /* Cards sized for 2 per row — relative to viewport */
    .game-row .enhanced-neon-game-card {
        width: calc((100vw - 160px) / 2) !important; /* 160px = 2 arrows + padding + gaps */
        max-width: 120px !important;
        height: 115px !important;
        flex-shrink: 0;
    }

    /* Keep the arrow navigation visible and vertically centered */
    .enhanced-game-carousel-container {
        flex-direction: row !important;
        align-items: center !important;
        min-height: 260px !important;
        padding: 0.75rem 0.5rem !important;
        gap: 0.25rem !important;
    }

    .enhanced-carousel-nav {
        display: flex !important; /* Override any hide rules */
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex-shrink: 0;
    }

    .enhanced-game-title {
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
    }
}