/* Game Page Responsive Fixes - Custom Overrides */

/* 1. ANDAR/BAHAR Text Size - Make smaller */
.bet-label {
    font-size: 1.4rem !important;
}

/* 2. Opening Box - Make shorter/more compact */
.opening-box {
    width: 4.5rem !important;
    padding: 0.3rem !important;
    min-height: auto !important;
}

/* 3. ANDAR/BAHAR Boxes - Keep normal size, don't force height */
.andar-box,
.bahar-box {
    min-height: auto !important;
}

/* 4. Card History Section - Dynamic height fix */
.card-history-section {
    min-height: 50px !important;
    max-height: 70px !important;
    height: auto !important;
    overflow: hidden !important;
}

.history-card {
    width: 35px !important;
    height: 35px !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}

/* Mobile Responsive Overrides */
@media (max-width: 768px) {
    .bet-label {
        font-size: 1rem !important;
    }
    
    .opening-box {
        width: 100% !important;
        padding: 0.5rem !important;
    }
    
    .andar-box,
    .bahar-box {
        min-height: auto !important;
    }
    
    .card-history-section {
        min-height: 45px !important;
        max-height: 60px !important;
    }
    
    .history-card {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .bet-label {
        font-size: 0.9rem !important;
    }
    
    .opening-box {
        padding: 0.4rem !important;
    }
    
    .andar-box,
    .bahar-box {
        min-height: auto !important;
    }
    
    .card-history-section {
        min-height: 40px !important;
        max-height: 55px !important;
        padding: 0.4rem 0.75rem !important;
    }

    .history-card {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.7rem !important;
    }
}