/* =============================================================
   DARK GOLD / POPULAR GAMES - RESPONSIVE V2
   Scoped to .popular-games; do not change original desktop CSS.
   Loaded after layout-sync-fix.css.
   ============================================================= */

/* Safe defaults: large decorative/provider images must not enlarge
   their parent flex item. */
.popular-games,
.popular-games > [data-section="left"],
.popular-games > [data-section="right"],
.popular-games .tab-content,
.popular-games .tab-pane,
.popular-games .popular-game-list {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

/* The first provider/pane is already marked active in the HTML.
   This also makes the first six games visible until Bootstrap Tabs
   and scrollingTabs finish their initialization. */
.popular-games > [data-section="right"] > .nav-tabs > li.active > a {
    border-color: #b88416;
}

@media (max-width: 1199px) {
    .popular-games {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        padding: 0;
        margin-bottom: 24px;
        overflow: visible;
        background-image: none;
        background-color: #0c0b09;
        border: 1px solid rgba(210, 172, 77, .32);
        border-radius: 12px;
    }

    .popular-games > [data-section="left"],
    .popular-games > [data-section="right"] {
        display: block;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
    }

    /* LEFT: title, winners ticker and Arcade promo. */
    .popular-games > [data-section="left"] > .section-title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 49px;
        height: auto;
        padding: 10px 12px;
        font-size: clamp(15px, 2.8vw, 19px);
        text-align: center;
        background: linear-gradient(135deg, #332710, #17140c);
        border-bottom: 1px solid rgba(215, 181, 101, .32);
        border-radius: 11px 11px 0 0;
    }

    .popular-games .jackpot-winners {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        border-radius: 8px;
    }

    .popular-games .jackpot-winners .winners-ticker-container {
        width: calc(100% - 10px);
        max-width: calc(100% - 10px);
        min-width: 0;
        overflow: hidden;
    }

    .popular-games .winners-ticker ul,
    .popular-games .winners-ticker ul li {
        max-width: 100%;
        min-width: 0;
    }
    .popular-games .winners-ticker ul li img {
        flex: 0 0 50px;
        width: 50px;
        height: 50px;
        object-fit: cover;
    }
    .popular-games .winners-ticker ul li .winner-info {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: anywhere;
        line-height: 1.5;
    }

    .popular-games > [data-section="left"] > a {
        display: block;
        width: min(232px, calc(100% - 24px));
        max-width: 100%;
        height: auto;
        margin: 12px auto;
        text-align: center;
    }
    .popular-games > [data-section="left"] > a picture,
    .popular-games > [data-section="left"] > a img {
        display: block;
        width: 100%;
        max-width: 232px;
        height: auto;
        margin: 0 auto;
    }

    /* RIGHT: scrollingTabs will wrap the UL when JS is available.
       These first rules are only for the untouched UL fallback. */
    .popular-games > [data-section="right"] > #popular_providers {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 5px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 7px 8px;
        margin: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        background-color: #211a0e;
        border-bottom: 1px solid #6d5529;
        -webkit-overflow-scrolling: touch;
    }
    .popular-games > [data-section="right"] > #popular_providers > li {
        display: block;
        float: none;
        flex: 0 0 auto;
        min-width: 96px;
        max-width: 124px;
        margin: 0;
        padding: 0;
        scroll-snap-align: start;
    }
    .popular-games > [data-section="right"] > #popular_providers > li > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 54px;
        margin: 0;
        padding: 4px 6px;
        background: #15120b;
        border: 1px solid rgba(209, 165, 78, .2);
        border-radius: 7px;
    }
    .popular-games > [data-section="right"] > #popular_providers > li.active > a {
        background: #34280f;
        border-color: #c4a353;
    }
    .popular-games > [data-section="right"] > #popular_providers img {
        display: block;
        width: 100%;
        max-width: 110px;
        height: 44px;
        object-fit: contain;
    }

    /* Compatible with the plugin's generated wrapper after initialization. */
    .popular-games .scrtabs-tab-container {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
        height: 58px;
        background-color: #211a0e;
        border-bottom: 1px solid #6d5529;
    }
    .popular-games .scrtabs-tabs-fixed-container,
    .popular-games .scrtabs-tabs-movable-container {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
    }
    .popular-games .scrtabs-tab-scroll-arrow {
        background: #2c220e;
        color: #e9cb76;
    }
    .popular-games .scrtabs-tab-scroll-arrow:hover {
        background: #4b3918;
    }
    .popular-games .scrtabs-tab-container .nav-tabs > li > a img {
        max-width: 110px;
        height: 45px;
        object-fit: contain;
    }

    .popular-games .tab-content {
        position: relative;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin-top: 0;
        padding: 8px;
        overflow: hidden;
        border: 0;
        background: #171511;
        border-radius: 0 0 11px 11px;
    }
    .popular-games .tab-content > .tab-pane {
        position: relative;
        min-width: 0;
        max-width: 100%;
    }
    /* Decorative image is desktop-sized (421x334) and overlays cards.
       Hide only on tablet/mobile, not on desktop. */
    .popular-games .tab-pane > picture > .animated-image,
    .popular-games .tab-pane > .animated-image {
        display: none !important;
    }

    .popular-games .popular-game-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        padding: 4px;
        margin: 0;
    }
    .popular-games .popular-game-list .game-item {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
        padding: 0;
        margin: 0;
        background: #0d0d0d;
        border: 1px solid rgba(211, 177, 102, .12);
        border-radius: 7px;
        overflow: hidden;
    }
    .popular-games .popular-game-list .game-wrapper {
        width: 100%;
        position: relative;
        padding-top: 100%;
        min-width: 0;
    }
    .popular-games .popular-game-list .game-wrapper img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: cover;
    }
    /* Touch devices have no reliable hover state, so keep action links visible. */
    .popular-games .popular-game-list .game-item .link-container {
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: column;
        gap: 4px;
        padding: 5px 3px;
        background: linear-gradient(to bottom, transparent 28%, rgba(0, 0, 0, .88) 100%);
    }
    .popular-games .popular-game-list .game-item .link-container a {
        box-sizing: border-box;
        display: block;
        width: min(96%, 145px);
        max-width: 100%;
        min-height: 0;
        margin: 0;
        padding: 5px 2px;
        font-size: clamp(10px, 1.5vw, 12px);
        line-height: 1.1;
        text-align: center;
        white-space: nowrap;
    }
}

/* Tablet: winners and Arcade share the row; 6 games fit evenly as 3 + 3. */
@media (min-width: 768px) and (max-width: 1199px) {
    .popular-games > [data-section="left"] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(210px, 34%);
        column-gap: 16px;
        align-items: center;
        padding-bottom: 10px;
    }
    .popular-games > [data-section="left"] > .section-title {
        grid-column: 1 / -1;
        margin-bottom: 10px;
    }
    .popular-games > [data-section="left"] > .jackpot-winners {
        grid-column: 1;
        width: 100%;
    }
    .popular-games > [data-section="left"] > a {
        grid-column: 2;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .popular-games {
        gap: 10px;
    }
    .popular-games .popular-game-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }
    .popular-games .jackpot-winners .winners-ticker-container {
        height: 110px;
    }
}

@media (max-width: 600px) {
    .popular-games .popular-game-list .game-item .link-container a {
        font-size: 11px;
        padding: 5px 3px;
    }
    .popular-games .tab-content {
        padding: 6px;
    }
    .popular-games > [data-section="right"] > #popular_providers > li {
        min-width: 94px;
    }
}

@media (max-width: 520px) {
    .popular-games .popular-game-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }
}

@media (max-width: 360px) {
    .popular-games .popular-game-list {
        gap: 5px;
        padding: 2px;
    }
    .popular-games .popular-game-list .game-item .link-container {
        gap: 2px;
        padding: 3px 2px;
    }
    .popular-games .popular-game-list .game-item .link-container a {
        font-size: 10px;
        padding: 4px 2px;
    }
}

/* Reduced-motion setting does not affect functionality. */
@media (prefers-reduced-motion: reduce) {
    .popular-games .popular-game-list .link-container {
        transition: none;
    }
}