/* ==========================================================================
   Responsive layer for the desktop template (loaded last).
   Colours stay in Theme/desktop-dark-gold-css2d3c.css; this file only adapts
   layout for tablet (<992px) and mobile (<768px) and keeps images in their boxes.
   ========================================================================== */

body {
    overflow-x: hidden;
}

/* ---------- images: keep replacement assets inside their containers ---------- */
.banner img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2008 / 783;
    object-fit: cover;
    object-position: center;
}

.telegram-banner-container img,
.download-apk img {
    max-width: 100%;
    height: auto;
}

/* ---------- tablet ---------- */
@media (max-width: 991px) {
    /* menu swipes horizontally instead of squeezing 11 labels */
    .menu-slide .left_trigger,
    .menu-slide .right_trigger {
        display: none;
    }

    .top-menu {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .top-menu::-webkit-scrollbar {
        display: none;
    }

    .top-menu>li {
        flex: 0 0 72px;
        width: 72px;
    }

    .top-menu>li>a {
        font-size: 12px;
        white-space: nowrap;
    }

    .top-menu .game-list {
        display: none; /* hover mega-menu is desktop-only */
    }

    .popular-games {
        flex-direction: column;
    }

    .popular-games [data-section="left"] {
        margin: 0 0 15px;
    }

    .popular-games [data-section="right"] {
        width: 100%;
        position: relative;
    }

    .download-apk .h2 {
        font-size: 28px;
    }

    .download-apk h3 {
        font-size: 20px;
    }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
    /* top bar: icon-only extras so the login/register buttons fit */
    .topbar-container .row {
        align-items: center;
        gap: 6px;
    }

    .topbar-left-container {
        flex: 1 1 auto;
        min-width: 0;
    }

    .topbar-right-container {
        flex: 0 0 auto;
    }

    .topbar-item.language-selector-container,
    .topbar-item .js_live_chat_link {
        display: none;
    }

    .topbar-item .telegram-btn {
        font-size: 0;
        padding: 4px 6px;
    }

    .login-panel .login-button,
    .login-panel .register-button {
        font-size: 12px;
        padding: 5px 12px;
        white-space: nowrap;
    }

    /* header + menu: logo centred, menu swipes horizontally */
    .site-header .logo {
        max-width: 240px;
        margin: 0 auto;
        padding-top: 76px;
    }

    .site-header .logo>img {
        object-position: center;
    }

    .top-menu>li>a {
        padding: 10px 0;
    }

    /* announcement bar */
    .announcement-container {
        padding: 8px 12px;
        gap: 8px;
        align-items: center;
    }

    .announcement-container>[data-section="title"] {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .announcement-container>[data-section="announcements"] {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .announcement-container>[data-section="date"] {
        display: none;
    }

    /* progressive jackpot: stack logo above the counter */
    .home-progressive-jackpot {
        padding: 6px;
        border-radius: 20px;
    }

    .home-progressive-jackpot .outer-container,
    .home-progressive-jackpot .inner-container {
        padding: 5px;
        border-radius: 24px;
        min-width: 0;
    }

    .home-progressive-jackpot .border-container {
        flex-direction: column;
        gap: 8px;
        padding: 8px;
        border-radius: 20px;
        min-width: 0;
    }

    .home-progressive-jackpot .jackpot-play-section {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin: 0;
    }

    .home-progressive-jackpot .jackpot-play-section img {
        width: 56px;
    }

    .home-progressive-jackpot .jackpot-play-section .jackpot-play-text {
        font-size: 20px;
    }

    .home-progressive-jackpot .jackpot-container {
        width: 100%;
        min-width: 0;
        font-size: 20px;
        letter-spacing: 1px;
        padding: 5px;
    }

    .home-progressive-jackpot .jackpot-inner-container {
        padding: 5px;
        min-width: 0;
    }

    .home-progressive-jackpot .jackpot-border-container {
        line-height: 30px;
        padding-bottom: 4px;
        white-space: nowrap;
    }

    /* popular games strip: ~3 cards visible, swipe for more */
    .popular-game-title-container .container-content .game-list .games-group {
        width: calc((100% - 6px * 3) / 3.2);
    }

    .popular-game-title-container .container-title span {
        padding: 5px 30px;
    }

    /* provider showcase: artwork overlay hidden so the game grid stays tappable */
    .popular-games .animated-image {
        display: none;
    }

    .popular-games .popular-game-list {
        padding: 0 5px;
    }

    .popular-games [data-section="left"]>a {
        text-align: center;
    }

    /* APK download block */
    .download-apk {
        flex-direction: column;
        text-align: center;
        padding: 20px 0;
    }

    .download-apk>div {
        flex-basis: auto;
        width: 100%;
    }

    .download-apk .h2 {
        font-size: 24px;
    }

    .download-apk .h2>strong {
        text-align: center;
    }

    .download-apk h3 {
        font-size: 17px;
        margin-top: 6px;
    }

    .download-apk-info {
        justify-content: center;
    }

    .download-apk-info .download-apk-section {
        flex-basis: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    /* footer */
    .site-description h1 {
        font-size: 22px;
    }

    .site-description h2 {
        font-size: 18px;
        margin-top: 22px;
    }

    .site-description p,
    .site-description li {
        font-size: 15px;
    }

    .site-description ul {
        padding-inline-start: 22px;
    }

    .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 0;
        padding-left: 0;
    }

    .copyright {
        text-align: left;
        margin-top: 8px;
    }

    .provider-container {
        width: 100%;
    }

    /* modals */
    .modal-dialog {
        width: auto;
        max-width: calc(100% - 20px);
        margin: 10px auto;
    }
}