body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-image: url('../images/background.svg') !important;
}

.container,
.container-fluid {
    background: transparent !important;
}

.banner {
    display: none;
    width: 100%;
}

.banner-mobile {
    display: block;
    width: 100%;
}

.game-icon {
    width: 210px;
    height: auto;
    border-radius: 25px;
}

.game-icon-active {
    width: 240px;
    height: auto;
    border-radius: 25px;
}

.game-icon-wide {
    width: 320px;
    height: auto;
}

.game-icon-wide-active {
    width: 350px;
    height: auto;
}

.banner:hover,
.game-icon:hover,
.game-icon-wide:hover {
    opacity: 0.7;
}

.title {
    font-size: 36px;
    line-height: 33px;
    font-weight: bold;
    color: white;
}

.thumb {
    height: auto;
    width: 60px;
}

.terms-link {
    position: absolute;
    right: 20px;
    bottom: 20px;
}

/* =========================================================
   📱 Mobile (default styles up to 767px)
========================================================= */
@media screen and (max-width: 767px) {
    .game-icon,
    .game-icon-active {
        width: 44%;
    }

    .game-icon-wide,
    .game-icon-wide-active {
        width: 100%;
    }

    .title {
        font-size: 28px;
        line-height: 36px;
        margin-top: 80px;
    }

    .thumb {
        width: 60px;
    }

    .banner {
        display: none;
    }
}

/* =========================================================
   💻 Tablets (768px–1023px)
========================================================= */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .game-icon,
    .game-icon-active {
        width: 28%;
    }

    .game-icon-wide,
    .game-icon-wide-active {
        width: 48%;
    }

    .title {
        font-size: 40px;
        line-height: 65px;
        margin-top: 200px;
    }

    .thumb {
        width: 80px;
    }

    .banner {
        display: block;
    }

    .banner-mobile {
        display: none;
    }
}

/* =========================================================
   🖥️ Laptops / Medium Screens (1024px–1919px)
========================================================= */
@media screen and (min-width: 1024px) and (max-width: 1919px) {
    .game-icon,
    .game-icon-active {
        width: 16%;
    }

    .game-icon-wide,
    .game-icon-wide-active {
        width: 25%;
    }

    .title {
        font-size: 30px;
        line-height: 65px;
        margin-top: 200px;
    }

    .thumb {
        width: 70px;
    }

    .banner {
        display: block;
    }

    .banner-mobile {
        display: none;
    }
}

/* =========================================================
   🧭 Large Desktops (1920px–2559px)
========================================================= */
@media screen and (min-width: 1920px) and (max-width: 2559px) {
    .container {
        max-width: 1800px;
    }

    .game-icon,
    .game-icon-active {
        width: 16%;
    }

    .game-icon-wide,
    .game-icon-wide-active {
        width: 25%;
    }

    .title {
        font-size: 30px;
        line-height: 65px;
        margin-top: 200px;
    }

    .thumb {
        width: 70px;
    }

    .title {
        font-size: 40px;
        line-height: 65px;
        margin-top: 200px;
    }

    .thumb {
        width: 80px;
    }

    .banner {
        display: block;
    }

    .banner-mobile {
        display: none;
    }
}

/* =========================================================
   🖥️ Ultra-Wide Screens (2560px and above)
========================================================= */
@media screen and (min-width: 2560px) {
    .container {
        max-width: 2300px;
    }

    .game-icon,
    .game-icon-active {
        width: 16%;
    }

    .game-icon-wide,
    .game-icon-wide-active {
        width: 25%;
    }

    .title {
        font-size: 30px;
        line-height: 65px;
        margin-top: 200px;
    }

    .thumb {
        width: 70px;
    }

    .title {
        font-size: 50px;
        line-height: 65px;
        margin-top: 200px;
    }

    .thumb {
        width: 80px;
    }

    .banner {
        display: block;
    }

    .banner-mobile {
        display: none;
    }
}