/* --- Responsive adjustments --- */

/* Medium Screens (Tablet) */
@media (max-width: 1100px) {
    /* Reduce bank width slightly? Optional */
    #bank {
        width: 200px;
    }
    /* Center card rows more effectively if needed */
    .card-row {
         justify-content: center; /* Re-center on medium */
         padding-left: 0;
    }
    #right-column {
        width: 220px; /* Narrower right column */
    }
}

/* Small Screens (Stack Columns) */
@media (max-width: 900px) {
    #main-content-row {
        flex-direction: column; 
        align-items: center; 
        gap: 15px;
    }

    #left-column,
    #right-column {
        width: 95%; 
        flex-grow: 0; 
    }

    #right-column {
        width: 95%; /* Use more width when stacked */
        max-width: none; /* Remove max-width */
    }
    
    #bank {
        /* Center bank? */
        margin: 0 auto;
        max-width: 300px; /* Limit bank width slightly */
    }

    /* Stack player areas within the right column */
    #players-area {
        flex-direction: column; /* Stack players vertically */
        align-items: center; /* Center player boxes */
        gap: 15px;
        width: 100%; /* Ensure it takes width */
    }

    .player-info {
        flex-basis: 95%; /* Player boxes take most width when stacked */
        max-width: 95%;
    }
}

/* Very Small Screens */
@media (max-width: 600px) {
     /* Further adjustments if needed */
     #game-board {
         margin: 5px auto;
         padding: 5px;
     }
    .card-row {
        gap: 5px;
        /* Maybe wrap cards */
        /* flex-wrap: wrap; */
        /* justify-content: space-around; */
    }
    .card {
        /* Adjust card size */
        /* width: 75px; height: 112px; padding: 5px; */
    }
    #left-column, #right-column {
         width: 100%; 
     }
     #right-column {
         width: 100%; /* Ensure full width */
     }
    .player-info {
        flex-basis: 100%; 
        max-width: 100%;
    }
}