body,
    html {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        background: #000;
        font-family: Arial, sans-serif;
        overflow: hidden;
    }

    .container {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .background {
        width: 100%;
        max-width: 600px;
        height: 100%;
        position: relative;
    }

    .background .bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .content-container {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        justify-content: center;
        align-items: center;
    }

    /* Top logo & text */
    .top-center {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 10;
        text-align: center;
    }

    .logo-top {
        width: 500px;
        max-width: 130px;
        margin-bottom: 5px;
    }

    .content-top {
        width: 500px;
        max-width: 250px;
        margin-top: 100%;
        z-index: 1;
        position: absolute;
    }

    /* Wheel frame */
    .frame {
        position: absolute;
        top: 50%;
        left: 50%;
        /* center horizontally */
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 600px;
        max-width: 600px;
        aspect-ratio: 1 / 1;
        z-index: 5;
    }


    #frameImage {
        width: 100%;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        object-fit: contain;
        transition: transform 3s cubic-bezier(0.25, 1, 0.5, 1);

    }

    #moneyImage {
        width: 60%;
        height: auto;
        position: absolute;
        top: 68%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        object-fit: contain;
        transition: transform 3s cubic-bezier(0.25, 1, 0.5, 1);
        z-index: 6;
    }

    #pointImage {
        position: absolute;
        top: 43%;
        left: 50%;
        width: 5%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 7;
    }

    #legImage {
        position: absolute;
        top: 100%;
        left: 50%;
        width: 61%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 5;
    }


    .spin-wrapper {
        position: absolute;
        top: 85%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9;
        text-align: center;
    }

    .spin-btn {
        width: 200px;
        cursor: pointer;
    }


    /* Characters + Spin Button */
    .images-slot {
        position: absolute;
        bottom: -10%;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        z-index: 8;
    }

    .images-slot .right-img {
        width: 100%;
        max-width: 300px;
        height: auto;
    }

    .images-slot .left-img {
        width: 100%;
        max-width: 300px;
        height: auto;
    }

    /* Popup common */
    .popup,
    .popup-win {
        position: fixed;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* perfectly centered */
        width: 90%;
        /* responsive */
        max-width: 400px;
        /* matches your sample size */
        height: auto;
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 20;
    }

    .popup-content,
    .popup-content-win {
        width: 100%;
        text-align: center;
        animation: dropFromTop 0.3s ease forwards;
    }

    .popup-content img,
    .popup-content-win img {
        width: 100%;
        height: auto;
        margin-bottom: 15%;
        display: block;
    }

    #tryAgainBtn,
    #claimBtn {
        width: 250px;
        /* smaller than box */
        height: auto;
        margin: 10px auto 0 auto;
        display: block;
        cursor: pointer;
    }



    @keyframes dropFromTop {
        0% {
            transform: translateY(-200px);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Responsive */

    /* Mobile breakpoints */
    @media (max-width: 500px) {
        .frame {
            width: 420px;
            max-width: 420px;
        }

        #frameImage {
            transition-duration: 2.5s;
        }

        #moneyImage {
            width: 70%;
            top: 66%;
        }

        .logo-top {
            max-width: 110px;
        }

        .spin-btn {
            width: 180px;
        }
    }

    @media (max-width: 428px) {
        .frame {
            width: 360px;
            max-width: 360px;
        }

        #frameImage {
            max-width: 100%;
        }

        #moneyImage {
            width: 72%;
            top: 64%;
        }

        .logo-top {
            max-width: 100px;
        }

        .content-top {
            margin-top: 90%;
        }

        .spin-btn {
            width: 160px;
        }

        .images-slot {
            bottom: -18%;
        }
    }

    @media (max-width: 390px) {

        body,
        html {
            font-size: 14px;
        }

        .frame {
            width: 320px;
            max-width: 320px;
        }

        #moneyImage {
            width: 68%;
            top: 62%;
        }

        #pointImage {
            top: 42%;
            width: 6%;
        }

        .logo-top {
            max-width: 92px;
        }

        .spin-btn {
            width: 150px;
        }

        .images-slot .right-img,
        .images-slot .left-img {
            max-width: 240px;
        }
    }

    @media (max-width: 360px) {

        body,
        html {
            font-size: 13px;
        }

        .frame {
            width: 300px;
            max-width: 300px;
        }

        #frameImage {
            max-width: 100%;
            top: 40%;
        }

        #moneyImage {
            width: 64%;
            top: 60%;
        }
        
        #pointImage {
            top: 35%;
            width: 6%;
        }

        #legImage {
            width: 58%;
            top: 95%;
        }

        .top-center {
            top: 6px;
        }

        .spin-btn {
            width: 140px;
        }

        .images-slot {
            bottom: -22%;
        }
    }