/*
 * Page-specific: home
 * Currently only mobile sizing fixes for the "Popular Slots" + "Players Choose"
 * card grids — the legacy `.col-4` (= 3 cards per row on mobile) was producing
 * cramped 110-120px tiles on a 360px viewport. Force 2-per-row at ≤600px
 * (and keep the desktop col-sm-3+ breakpoints intact).
 */

@media (max-width: 600px) {
    /* Popular Slots — 3 per row × 2 rows = 6 visible. Bootstrap col-4 is
       33.333% (3 columns); we lock it explicitly so it doesn't get
       overridden by other breakpoints. */
    .wrap-box-card .col-4,
    .wrap-box-card [class*="col-4"] {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 10px !important;
    }
    .wrap-box-card {
        margin-left: -4px !important;
        margin-right: -4px !important;
        justify-content: flex-start !important;
    }
    .wrap-box-card > [class*="col-"]:nth-child(n+7) {
        display: none !important;
    }

    /* Players Choose (own games carousel) — bigger thumbnails. */
    .swiper-slide.col-6,
    .featured .swiper-slide[class*="col-6"] {
        flex: 0 0 62% !important;
        max-width: 62% !important;
    }
}

/* Touch-device tweaks: hide the floating "Play" button (image navigates
   on tap). The :hover lift from core.css is intentionally left intact —
   iOS sticky-hover gives the user the same animation feedback. */
@media (hover: none) {
    .tf-card-box.style-1 {
        cursor: pointer;
        touch-action: manipulation;
    }
    .tf-card-box.style-1 .button-place-bid {
        display: none !important;
    }
    /* Popular Slots / Players Choose category buttons (above each grid)
       — sticky-hover after tap left them visually "active" on mobile.
       Suppress the legacy `core.css .popular-slots__buttonLi:hover` and the
       `.liq-effect__button:hover` effect from components/card.css. The JS
       pointer-events flush in jp-patches.js handles the cleanup on lift. */
    .theme--dark .popular-slots__buttonLi:hover,
    .popular-slots__buttonLi:hover,
    .popular-slots__button:hover {
        background-color: transparent !important;
        border-color: rgba(var(--color-accent-rgb, 184, 58, 58), 0.5) !important;
    }
    .popular-slots__button.liq-effect__button:hover::before,
    .liq-effect__button:hover::before {
        background-position: 0% 50%, 0% 0% !important;
    }
    .popular-slots__button.liq-effect__button:hover::after,
    .liq-effect__button:hover::after {
        --angle-1: 0deg !important;
    }
}