#all {
    top: 38%;
    width: 94%;
    height: 60%;
    position: absolute;
    border: rgba(0, 0, 0, 0) solid 3px;
}

#boxs {
    position: absolute;
    top: 19%;
    left: 7%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 3px;
    width: 90%;
    height: 50%;
    padding: 1%;
    border: black solid 0px;
    cursor: pointer;
    user-select: none;
}

/* #allbox0{
    position: absolute;
   top: 10%;
   left: 10%;
} */
.allbox.green {
    width: 7%;
    height: 40%;
    position: absolute;
    left: -6.3%;
    top: 29.5%;
    background-color: green;
    /* Special case for '0' */
}

.allbox {
    width: 100%;
    /* Adjust width relative to the grid cell */
    height: 95%;
    /* Fixed height for boxes */
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    z-index: 3;
}





.allbox :hover {
    background-color: rgb(255, 255, 255);
}

.allbox.black {
    background-color: black;
}

.allbox.red {
    background-color: red;
}



/* Hover styles */
.allbox.black:hover {
    background-color: #5c5c5c;
    /* Lighter black */
}

.allbox.red:hover {
    background-color: #ff7676;
    /* Lighter red */
}

.allbox.green:hover {
    background-color: #66cc66;
    /* Lighter green */
}


#entet1to18 {
    position: absolute;
    width: 42.5%;
    height: 7%;
    left: 9%;
    top: 11%;
    border: black solid 3px;
}

#entet19to36 {
    position: absolute;
    width: 42.5%;
    height: 7%;
    left: 54%;
    top: 11%;
    border: black solid 3px;
}

#_3to36 {
    position: absolute;
    width: 5%;
    height: 12%;
    left: 99%;
    top: 23%;
    border: black solid 3px;
}

#_2to35 {
    position: absolute;
    width: 5%;
    height: 12%;
    left: 99%;
    top: 40%;
    border: black solid 3px;
}

#_1to34 {
    position: absolute;
    width: 5%;
    height: 12%;
    left: 99%;
    top: 57%;
    border: black solid 3px;
}

#_1to12 {
    position: absolute;
    width: 28%;
    height: 9%;
    left: 9%;
    top: 72%;
    border: black solid 3px;
}

#_13to24 {
    position: absolute;
    width: 29%;
    height: 9%;
    left: 38%;
    top: 72%;
    border: black solid 3px;
}

#_25to36 {
    position: absolute;
    width: 29%;
    height: 9%;
    left: 68%;
    top: 72%;
    border: black solid 3px;
}

#even {
    position: absolute;
    width: 21%;
    height: 15%;
    left: 8.9%;
    top: 84%;
    border: black solid 3px;
}

#red {
    position: absolute;
    width: 21%;
    height: 15%;
    left: 31%;
    top: 84%;
    border: black solid 3px;
}

#black {
    position: absolute;
    width: 21.9%;
    height: 15%;
    left: 53%;
    top: 84%;
    border: black solid 3px;
}

#odd {
    position: absolute;
    width: 21%;
    height: 15%;
    left: 75.8%;
    top: 84%;
    border: black solid 3px;
}

.boxs2 {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    user-select: none;
}

.boxs2:hover {
    background-color: rgba(255, 255, 255, 0.219);
}

#value {
    position: absolute;
    display: flex;
    font-size: 390%;

    justify-content: center;
    align-items: center;
    width: 10%;
    height: 20%;
    left: 43%;
    top: -50%;
    border-radius: 10%;
    background-color: #0F212E;
    overflow: hidden;
    border: rgb(12, 92, 104) solid 1px;
    user-select: none;
}

#animat {
    position: absolute;
    width: 100%;
    height: 150%;
    left: 0%;
    top: 0%;
    background-color: rgb(32, 50, 71);
    animation: fadeInOut 0.4s ease-in forwards, shrinkHeight 0.3s ease-in 0.5s forwards;
    /* Add 'forwards' to prevent returning */
}

@keyframes fadeInOut {
    0% {
        top: 150%;
    }

    50% {}

    100% {
        top: 0%;
    }
}

@keyframes shrinkHeight {
    0% {
        height: 100%;
    }

    100% {
        height: 0%;
    }
}

#set_bet {
    position: absolute;
    width: 45%;
    height: 7%;
    left: 51%;
    top: 28%;
    background-color: rgb(36, 206, 19);
    font-size: 100%;
    cursor: pointer;
    border: 0;
    border-radius: 7px;
    user-select: none;
}

#clear {
    position: absolute;
    width: 45%;
    height: 7%;
    left: 3%;
    top: 28%;
    background-color: red;
    font-size: 100%;
    cursor: pointer;
    border: 0;
    border-radius: 7px;
    user-select: none;
}

#valueBox {
    position: absolute;
    width: 40%;
    height: 58%;
    left: 60%;
    top: -50%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 1px;
    border-radius: 1rem;
    background-color: #0F212E;
    overflow: hidden;

}

#valueBox2 {
    position: absolute;
    top: -55%;
    left: 3%;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 1px;
    border-radius: 1rem;
    animation: popUp 0.5s ease-in-out forwards;
}

#valueBox3 {
    position: absolute;
    top: 28%;
    width: 13%;
    height: 16%;
    left: 54%;
    /* Premium Glassmorphism */
    background: linear-gradient(135deg, rgba(20, 25, 35, 0.85), rgba(35, 45, 60, 0.7));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 15px 35px -5px rgba(0, 0, 0, 0.6),
        0 5px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    animation: popUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    user-select: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 10;
}

#valueBox4 {
    position: absolute;
    top: -55%;
    left: 3%;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 1px;
    border-radius: 1rem;
    animation: popUp 0.5s ease-in-out forwards;
}

/* Multiplier display styling */
#inside2 {
    position: absolute !important;
    top: 22% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    text-align: center !important;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 1.8em !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
    animation: pulseGlow 3s ease-in-out infinite !important;
}

/* Profit amount display styling */
#inside {
    position: absolute !important;
    top: 62% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    min-width: 70% !important;
    text-align: center !important;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    color: #4ade80 !important;
    background: rgba(0, 204, 68, 0.15) !important;
    padding: 8px 16px !important;
    border-radius: 99px !important;
    border: 1px solid rgba(74, 222, 128, 0.3) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 10px rgba(74, 222, 128, 0.2) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    letter-spacing: 0.5px !important;
}

/* Enhanced Glow animation */
@keyframes pulseGlow {

    0%,
    100% {
        text-shadow: 0 0 15px rgba(74, 222, 128, 0.5);
        transform: scale(1);
    }

    50% {
        text-shadow: 0 0 25px rgba(74, 222, 128, 0.8);
        transform: scale(1.02);
    }
}

@keyframes popUp {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.numbers {
    cursor: pointer;
    width: 70%;
    height: 50%;
    font-size: 120%;
    font-weight: bold;
    color: white;
    border: 2px solid #22514a42;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15%;
    margin: auto;
    /* Center the numbers inside */
    text-align: center;
    /* Ensure text is centered */
    user-select: none;
}

.numbers:only-child {
    justify-content: center;
    align-items: center;
}