/* ==========================================================
   DARK GOLD - CSS / JS SYNCHRONIZATION FIX
   Loaded AFTER Bootstrap, Home, Slick, theme and font settings.
   Keep original CSS files intact for easy rollback.
   ========================================================== */

/* CSS flex children should be allowed to shrink inside the viewport. */
.home-inner-container,
.home-inner-container [data-section="jackpot"],
.home-progressive-jackpot,
.home-progressive-jackpot .outer-container,
.home-progressive-jackpot .inner-container,
.home-progressive-jackpot .border-container,
.home-progressive-jackpot .jackpot-container,
.home-progressive-jackpot .jackpot-inner-container,
.home-progressive-jackpot .jackpot-border-container,
.popular-games,
.popular-games > [data-section="left"],
.popular-games > [data-section="right"] {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}
.home-inner-container [data-section="jackpot"] > a {
    display: block;
    max-width: 100%;
    min-width: 0;
}

/* Show the original APK contents even if the original scroll-trigger
   never runs; prevents a permanently invisible section. */
.download-apk > div {
    opacity: 1;
    transform: none;
    min-width: 0;
}
/* More specific than the legacy :nth-child rules, so both APK
   columns are visible even before the original scroll listener runs. */
.download-apk > div:nth-child(1),
.download-apk > div:nth-child(2) {
    opacity: 1;
    transform: none;
}
.download-apk img {
    max-width: 100%;
    height: auto;
}
.download-apk-qr-code img {
    display: block;
    width: min(94px, 100%);
    height: auto;
    margin: 0 auto;
}

/* Banner aspect ratio follows the actual image instead of forcing
   1920:613 onto a 1688:932 source. */
.banner {
    aspect-ratio: auto;
}
.banner .slick-slide img,
.banner-carousel > div:first-child img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1688 / 932;
}

/* Keep the gold theme if a legacy blue-magenta background asset is absent. */
.popular-games {
    background-color: #0a0a0a;
}

@media (max-width: 991px) {
    .home-inner-container {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-top: 12px;
        margin-bottom: 24px;
    }
    .home-inner-container [data-section="jackpot"],
    .home-inner-container [data-section="jackpot"] > a {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .home-progressive-jackpot {
        display: flex;
        width: 100%;
        min-width: 0;
        padding: 5px;
        border-radius: 18px;
    }
    .home-progressive-jackpot .outer-container,
    .home-progressive-jackpot .inner-container {
        display: flex;
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        padding: 5px;
        border-radius: 16px;
    }
    .home-progressive-jackpot .border-container {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        gap: 8px;
        width: 100%;
        min-width: 0;
        padding: 8px 6px;
        border-width: 2px;
        border-radius: 14px;
    }
    .home-progressive-jackpot .jackpot-play-section {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-left: 0;
        width: 100%;
        min-width: 0;
    }
    .home-progressive-jackpot .jackpot-play-section img {
        display: block;
        width: clamp(40px, 13vw, 64px);
        max-width: 100%;
        height: auto;
    }
    .home-progressive-jackpot .jackpot-play-section .jackpot-play-text {
        font-size: clamp(17px, 4vw, 23px);
        line-height: 1.2;
    }
    .home-progressive-jackpot .jackpot-container {
        display: flex;
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        padding: 4px;
        border-radius: 14px;
        font-size: clamp(15px, 4.5vw, 26px);
        letter-spacing: 1px;
    }
    .home-progressive-jackpot .jackpot-inner-container {
        display: flex;
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        padding: 4px;
        border-radius: 12px;
    }
    .home-progressive-jackpot .jackpot-border-container {
        display: flex;
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 6px 4px;
        border-radius: 10px;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
    }
    .home-progressive-jackpot .jackpot-currency {
        flex: 0 0 auto;
        margin-right: 0;
    }
    .home-progressive-jackpot #progressive_jackpot {
        display: inline-block;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: clip;
    }

    /* Popular Games becomes one column on tablet and mobile. */
    .popular-games {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    .popular-games > [data-section="left"],
    .popular-games > [data-section="right"] {
        display: block;
        flex: 0 1 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
    }
    .popular-games .popular-game-list {
        min-width: 0;
    }
    .popular-games .popular-game-list .game-item {
        width: 33.333333%;
    }
    .popular-games .animated-image {
        max-width: 100%;
        pointer-events: none;
    }

    /* Narrow screens should stack the APK illustration and text. */
    .download-apk {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        min-width: 0;
        align-items: center;
        padding: 14px 0;
    }
    .download-apk > div {
        width: 100%;
        max-width: 100%;
        flex: 0 1 auto;
        min-width: 0;
        transform: none;
        opacity: 1;
        text-align: center;
    }
    .download-apk > div:first-child img {
        display: block;
        width: min(100%, 480px);
        height: auto;
        margin: 0 auto;
    }
    .download-apk .h2 {
        font-size: clamp(20px, 4vw, 30px);
    }
    .download-apk .h3,
    .download-apk h3 {
        font-size: clamp(15px, 3vw, 21px);
    }
    .download-apk-info {
        justify-content: center;
    }
    .download-apk-section {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .announcement-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
    }
    .announcement-container > [data-section="title"] {
        flex: 0 1 auto;
        min-width: 0;
    }
    .announcement-container > [data-section="date"] {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
        text-align: right;
        font-size: 11px;
    }
    .announcement-container > [data-section="announcements"] {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }
    .announcement-container .announcement-list li {
        white-space: nowrap;
        padding: 5px 8px;
    }
    .download-apk .h2,
    .download-apk .h3 {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 480px) {
    .popular-games .popular-game-list .game-item {
        width: 50%;
    }
    .home-progressive-jackpot .jackpot-container {
        font-size: clamp(14px, 4.6vw, 20px);
        letter-spacing: 0;
    }
    .home-progressive-jackpot .jackpot-border-container {
        gap: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .download-apk > div {
        transition: none;
    }
}