body {
    margin: 0;
    padding: 0;
    height: 100vh;
}

.table-container {
    height: calc(100vh + 1px);
    -webkit-font-smoothing: antialiased;
    }

/* phone portrait long table */
@media(max-width:500px) {
    .table.focused {
        height: 46.7vh !important;
        /* 2/3 of viewport height */
    }
}

@media(max-height:400px) {
    .table.focused {
        transform: perspective(1000px) rotateX(44deg) scale(1.4) translateY(8%) !important;
    }
    .round-info {
        max-width: 15%!important;
    }
}
/* phone landscape regular */
@media(max-width:800px) and (max-height:400px) {
    .table {
        height: 400px !important;
    }

    .table.focused {
        margin: 0 auto;
        transform: perspective(1000px) rotateX(44deg) scale(1.7) translateY(8%) !important;
    }

    .round-info {
        max-width: 15%!important;
    }

    .bet-info p {
        margin: 2px;
        font-size: 6px;
        font-weight: bold;
        text-align: center;
    }
    
    .volume-control {
        width: 7%;
    }
}

/* phone landscape ultra (wide) */
@media(min-height:400px) and (max-height:500px) and (min-width:800px) and (max-width:1000px){
    .table.focused {
        margin: 0 auto;
        transform: perspective(1000px) rotateX(44deg) scale(1.4) translateY(8%) !important;
    }

    .round-info {
        max-width: 15%!important;
    }
}

@media(min-height:800px) and (max-height:1000px) and (max-width:700px) {
    .table {
        height: 400px;
    }

    .chips-container-base {
        top: var(--top) !important;
    }

    .placed-chips {
        top: var(--top) !important;
    }
}

/* phone portrait ultra (wide) */
@media(min-width:400px) and (max-width:700px) {
    .table.focused {
        margin: 0 auto;
        transform: perspective(1000px) rotateX(44deg) scale(2.9) translateY(4%);
    }

    .bet-info p {
        margin: 2px;
        font-size: 6px;
        font-weight: bold;
        text-align: center;
    }

    .balance-info p,
    .result-info {
        color: #c0c0c0;
        /* Silver color */
        background: none;
        /* No background */
        font-weight: bold;
        /* Bold text */
        font-size: 6px;
    }

    .balance-info {
        top: 55%;
        left: 35.5%;
        width: 4%;
    }

    .round-info p {
        font-size: 6px;
    }

    .bets-info {
        font-size: 6px;
    }
}

/* phone portrait regular width */
@media(max-width:400px) {
    .table.focused {
        margin: 0 auto;
        transform: perspective(1000px) rotateX(44deg) scale(3.7) translateY(2%);
    }

    .bet-info p {
        margin: 2px;
        font-size: 4px;
        font-weight: bold;
        text-align: center;
    }

    .chips-container-base {
        top: calc(var(--top) - 1.5%);
    }
/* 
    .placed-chips.bottom-left {
        left: calc(var(--left) + 2%) !important;
    } */

    .balance-info {
        top: 55%;
        left: 38.5%;
        width: 4%;
    }

    .balance-info p,
    .result-info {
        color: #c0c0c0;
        /* Silver color */
        background: none;
        /* No background */
        font-weight: bold;
        /* Bold text */
        font-size: 3.5px;
    }

    .bets-info {
        font-size: 3.5px;
    }

    .buttons-container {
        left: 50%!important;
    }
}

@media(min-width:400px) and (max-width:500px) {
    .chips-container-base {
        top: calc(var(--top) - 1%);
    }

    .bet-info p {
        margin: 2px;
        font-size: 5px;
        font-weight: bold;
        text-align: center;
    }
}

@media(min-height:650px) and (max-height:900px) {
    .chips-container-base {
        top:calc(var(--top) - 1%);
    }
}

@media(max-width:700px) {
    .table {
        width: 1300px;
        margin: 20px auto;
        transform: perspective(1000px) rotateX(32deg);
        transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform-origin: center center;
    }

    .table-image-container {
        height: 100%;
    }

    .table-image {
        display: block;
        width: 100%;
        height: 100%;
    }


    .bet-info {
        position: absolute;
        top: calc(var(--top));
        width: calc(var(--width) + 2%);
        height: var(--height);
        color: #e9fafa;
    }


    .bet-info.upper-left {
        left: calc(var(--left) - 3%);
        width: calc(var(--width) + 3%);

    }

    .bet-info.bottom-right,
    .bet-info.bottom-middle,
    .bet-info.bottom-left {
        left: calc(var(--left) - 1%);
    }

    .bet-info.middle-right {
        left: calc(var(--left) - 4%);
    }

    .bet-info.upper-left p,
    .bet-info.upper-right p {
        margin-top: 5%;
    }

    .bet-info.middle-right p,
    .bet-info.middle-left p {
        margin-top: 1%;
    }

    .bet-info.middle-left p,
    .bet-info.middle-right p {
        margin-left: 18%;
    }

    .round-info {
        top: 68%;
        left: 41.5%;
        width: 15%;
        max-width: 15%;
        backdrop-filter: none;

    }

    .chips-container-base {
        z-index: 1000;
        position: absolute;
        left: var(--left);
        width: var(--width);
        height: var(--height);
    }

    .placed-chips {
        position: absolute;
        pointer-events: none;
        left: var(--left);
        width: var(--width);
        height: var(--height);
        z-index: 500;
    }

}

@media(min-width:500px) and (max-width:700px) and (max-height:800px) {
    .round-info {
        top: 52%;
        left: 58%;
        width: 10%;
        max-width: 10%;
    }
}