/* Safety: avoid horizontal overflow & keep media fluid */
body {
    overflow-x: hidden;
}
    
img,
picture,
video,
canvas,
svg {
    max-width: 100%;
}
    
/* ============ Tablet and below (<= 991px) ============ */
@media (max-width: 991px) {
    .home-inner-container {
        gap: 14px;
        margin-bottom: 26px;
    }
    
    .home-progressive-jackpot .border-container {
        gap: 24px;
    }
    
    .home-progressive-jackpot .jackpot-container {
        font-size: 30px;
        letter-spacing: 3px;
    }
    
    .footer-sitemap-section {
        padding-right: 0;
    }
}
    
/* ============ Mobile (<= 767px) ============ */
@media (max-width: 767px) {
    
    /* Jackpot + Lottery: stack vertically, full width */
    .home-inner-container {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin: 12px 0 26px;
    }
    
    .home-inner-container [data-section="jackpot"],
    .home-inner-container [data-section="lottery"] {
        width: 100%;
    }
    
    .home-inner-container [data-section="lottery"] .lottery-result-container {
        max-width: 420px;
        margin: 0 auto;
    }
    
    /* Progressive jackpot: shrink nested paddings, gaps & fonts so it fits */
    .home-progressive-jackpot {
        padding: 6px;
        border-radius: 18px;
    }
    
    .home-progressive-jackpot .outer-container,
    .home-progressive-jackpot .inner-container {
        padding: 6px;
    }
    
    .home-progressive-jackpot .border-container {
        gap: 12px;
        padding: 6px;
    }
    
    .home-progressive-jackpot .jackpot-play-section {
        margin-left: 8px;
    }
    
    .home-progressive-jackpot .jackpot-play-section img {
        width: 62px;
    }
    
    .home-progressive-jackpot .jackpot-play-section .jackpot-play-text {
        font-size: 18px;
    }
    
    .home-progressive-jackpot .jackpot-container {
        font-size: 22px;
        letter-spacing: 1px;
        padding: 6px;
    }
    
    .home-progressive-jackpot .jackpot-inner-container,
    .home-progressive-jackpot .jackpot-border-container {
        padding: 6px;
        line-height: 32px;
    }
    
    .home-progressive-jackpot .jackpot-currency {
        margin-right: 5px;
    }
    
    /* Announcement bar: stack title / marquee / date */
    .announcement-container {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 8px 12px;
    }
    
    .announcement-container>[data-section="announcements"] {
        width: 100%;
    }
    
    .announcement-container [data-section="date"] {
        font-size: 11px;
        text-align: left;
    }
    
    /* Banner navigation arrows: closer to edges & smaller */
    .nav-btn {
        width: 34px;
        height: 34px;
        padding: 6px;
    }
    
    .nav-btn.main-prev {
        left: 8px;
    }
    
    .nav-btn.main-next {
        right: 8px;
    }
    
    .nav-btn img {
        width: 16px;
        height: 16px;
    }
    
    /* Topbar: allow wrapping instead of squeezing into 46%/54% */
    .topbar-container .row {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    
    .topbar-left-container,
    .topbar-right-container {
        width: 100%;
    }
    
    /* Footer sitemap: wrap the 5 columns */
    .footer-sitemap-section {
        flex-wrap: wrap;
        row-gap: 14px;
    }
    
    .footer-sitemap-section>div {
        width: 50%;
    }
    
    /* Game carousels: fewer, larger tiles (still horizontally scrollable) */
    .game-list .game-item {
        width: calc((100% - (5px * 3.2 * 2)) / 3.2);
    }
    
    .container-content .game-list .game-item {
        width: calc((100% - (5px * 3.2 * 2)) / 3.2);
    }
    
    .popular-game-title-container .container-content .game-list .game-item {
        width: calc((100% - (5px * 3.2 * 2)) / 3.2);
    }
    
    /* Section title chevrons: less side padding */
    .container-title span,
    .popular-game-title-container .container-title span {
        padding: 5px 26px;
    }
    
    /* Footer sub-sections: stack & prevent right-edge overflow */
    .site-footer .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    .footer-featured-product-section>div {
        width: 100%;
        min-width: 0;
    }
    
    .footer-featured-product-section .site-info-description {
        min-width: 0;
    }
    
    .footer-banking-section .banking-footer-section .bank-service-container {
        grid-template-columns: 1fr;
        margin: 14px;
        gap: 12px;
    }
    
    .footer-banking-section .bank-list-container {
        margin: 14px;
        padding: 16px;
    }
    
    .footer-copyright-section .col-md-12 {
        flex-wrap: wrap;
        gap: 14px;
    }
    
    .footer-copyright-section .col-md-12 .copyright {
        margin-left: 0;
    }
    
    .footer-description-section .site-description h1 {
        font-size: 20px;
        line-height: 1.3;
    }
    
    .footer-description-section .site-description p {
        text-align: left !important;
    }
    
    .footer-description-section h4,
    .footer-description-section .site-description {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}
    
/* ============ Small phones (<= 480px) ============ */
@media (max-width: 480px) {
    .footer-sitemap-section>div {
        width: 100%;
    }
    
    .home-progressive-jackpot .jackpot-container {
        font-size: 18px;
    }
    
    .home-progressive-jackpot .jackpot-play-section .jackpot-play-text {
        font-size: 15px;
    }
    
    .home-progressive-jackpot .jackpot-play-section img {
        width: 52px;
    }
    
    /* Game carousels: ~2.4 tiles per row on very small screens */
    .game-list .game-item {
        width: calc((100% - (5px * 2.4 * 2)) / 2.4);
    }
    
    .container-content .game-list .game-item {
        width: calc((100% - (5px * 2.4 * 2)) / 2.4);
    }
    
    .popular-game-title-container .container-content .game-list .game-item {
        width: calc((100% - (5px * 2.4 * 2)) / 2.4);
    }
}
