/* TABLET (max-width: 991px) */
@media (max-width: 991px) {
    .ball {
        width: 35px !important;
        height: 35px !important;
        font-size: 16px !important;
        line-height: 35px !important;
        margin: 2px !important;
    }
    
    .betshort {
        padding: 4px 6px !important;
        font-size: 11px !important;
        min-width: 40px;
        border-radius: 0 !important;
    }
    
    /* Usuń odstępy między przyciskami */
    .btn-group .betshort {
        margin: 0 !important;
        margin-left: -1px !important;
    }
    
    .btn-group .betshort:first-child {
        margin-left: 0 !important;
        border-radius: 4px 0 0 4px !important;
    }
    
    .btn-group .betshort:last-child {
        border-radius: 0 4px 4px 0 !important;
    }
}

/* MOBILE (max-width: 767px) */
@media (max-width: 767px) {
    .ball {
        width: 35px !important;
        height: 35px !important;
        font-size: 16px !important;
        line-height: 35px !important;
        margin: 2px !important;
    }

@media (max-width: 768px) {
    #last100 .ball {
        width: 12px !important;
        height: 12px !important;
        line-height: 12px !important;
        font-size: 7px !important;
    }
    #last100 span {
        font-size: 9px !important;
    }
}
    
    .betshort {
        padding: 4px 6px !important;
        font-size: 11px !important;
        min-width: 40px;
        border-radius: 0 !important;
    }
    
    /* Usuń odstępy między przyciskami */
    .btn-group .betshort {
        margin: 0 !important;
        margin-left: -1px !important;
    }
    
    .btn-group .betshort:first-child {
        margin-left: 0 !important;
        border-radius: 4px 0 0 4px !important;
    }
    
    .btn-group .betshort:last-child {
        border-radius: 0 4px 4px 0 !important;
    }
    
    #betAmount.input-lg {
        padding: 6px 10px;
        font-size: 15px;
        height: 38px;
    }
}

/* SMALL MOBILE (max-width: 480px) */
@media (max-width: 480px) {
    .ball {
        width: 35px !important;
        height: 35px !important;
        font-size: 16px !important;
        line-height: 35px !important;
        margin: 2px !important;
    }
    
    .betshort {
        padding: 5px 7px !important;
        font-size: 12px !important;
        min-width: 41px;
        border-radius: 0 !important;
    }
    
    /* Usuń odstępy między przyciskami */
    .btn-group .betshort {
        margin: 0 !important;
        margin-left: -1px !important;
    }
    
    .btn-group .betshort:first-child {
        margin-left: 0 !important;
        border-radius: 4px 0 0 4px !important;
    }
    
    .btn-group .betshort:last-child {
        border-radius: 0 4px 4px 0 !important;
    }
    
    #betAmount.input-lg {
        padding: 5px 8px;
        font-size: 14px;
        height: 36px;
    }

}
@media (max-width: 767px) {
    /* Total bet row - zmiana z horizontal na vertical */
    .total-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    /* Label "Total bet" */
    .total-row .pull-left {
        float: none !important;
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: bold;
        color: #333;  /* Czarny */
    }
    
    /* Liczba coinsów */
    .total-row .pull-right {
        float: none !important;
        font-size: 18px;
        font-weight: bold;
        color: #333;
    }
    
    /* Tło dla wyróżnienia */
    .total-row .total {
        padding: 5px 10px;
        background-color: #f5f5f5;
        border-radius: 4px;
        min-width: 60px;
    }
}

@media (max-width: 480px) {
    .total-row .pull-left {
        font-size: 18px;
        margin-bottom: 3px;
    }
    
    .total-row .pull-right {
        font-size: 16px;
    }
}