html,
body {
    margin: 0;
    padding: 0;
    background: #a31e23;
}

#mobile_custom_index div {
    margin: 0;
    padding: 0;
}

#mobile_custom_index a {
    margin: 0;
    padding: 0;
}

#mobile_custom_index img {
    display: block;
    width: 100% !important;
    margin: 0;
    padding: 0;
}

#mobile_custom_index .clearRow {
    clear: both;
}


.roulette {
    position: absolute;
    width: 760px;
    height: 760px;
    top:50%;
    left:50%;
    margin-left:-380px;
    margin-top:-380px;
}

.wheel-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    /* 置於最底層 */
}

.wheel {
    position: absolute;
    top: 12%;
    /* 根據需要微調以居中 */
    left: 12%;
    /* 根據需要微調以居中 */
    width: 76%;
    /* 根據框架尺寸調整 */
    height: 76%;
    border-radius: 50%;
    transition: transform 3s ease-out;
    z-index: 2;
}

.spin-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    /* 根據需要調整按鈕大小 */
    /*height: 334px;*/
    cursor: pointer;
    z-index: 3;
    /* 置於最上層 */
}


/* 遮罩層樣式 */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

/* 圖片容器樣式 */
#overlay .image-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#overlay img {
    width: 500px;
    height: auto;
}



@media screen and (max-width:498px) {
    .roulette {
        width: 360px;
        /* 取決於框架大小 */
        height: 360px;
        top:50%;
        left:50%;
        margin-left:-180px;
        margin-top:-180px;
    }

    .wheel {
        position: absolute;
        top: 11%;
        /* 根據需要微調以居中 */
        left: 11%;
        /* 根據需要微調以居中 */
        width: 78%;
        /* 根據框架尺寸調整 */
        height: 78%;
        border-radius: 50%;
        transition: transform 3s ease-out;
        z-index: 2;
    }

    .spin-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 76px;
        /* 根據需要調整按鈕大小 */
        /*height: 334px;*/
        cursor: pointer;
        z-index: 3;
        /* 置於最上層 */
    }

    #overlay img {
        width: 300px;
        height: auto;
    }
}


@media screen and (max-width:420px) {
    .roulette {
        width: 314px;
        /* 取決於框架大小 */
        height: 314px;
        top:50%;
        left:50%;
        margin-left:-157px;
        margin-top:-157px;
    }

    .wheel {
        position: absolute;
        top: 12%;
        /* 根據需要微調以居中 */
        left: 12%;
        /* 根據需要微調以居中 */
        width: 76%;
        /* 根據框架尺寸調整 */
        height: 76%;
        border-radius: 50%;
        transition: transform 3s ease-out;
        z-index: 2;
    }

    .spin-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        /* 根據需要調整按鈕大小 */
        /*height: 334px;*/
        cursor: pointer;
        z-index: 3;
        /* 置於最上層 */
    }

    #overlay img {
        width: 272px;
        height: auto;
    }
}