#win {
    background-color: darkgrey;
    position: absolute;
    width:25%;
    height:25%;
    top: 25%;
    left: 37.5%;
    border-radius: 15px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
/*.card {*/
/*    width: 80px;*/
/*    height: 120px;*/
/*    margin: 5px;*/
/*}*/
#table {
    margin-left: auto;
    margin-right: auto;
}

.hidden {
    display: none;
}

.visible {
    display: block;
}

/*@media (max-width: 768px) {*/
/*    !*.card {*!*/
/*    !*    width: 100px;*!*/
/*    !*    height: 220px;*!*/
/*    !*    margin: 5px;*!*/
/*    !*}*!*/
/*}*/

.card {
    width: 22vw;  /* approx 4 cards per row with gaps */
    height: 33vw; /* maintain aspect ratio */
    margin: 1vw;
    box-sizing: border-box;
}

/* Optional: Media query to tweak spacing or layout for larger devices */
@media (min-width: 769px) {
    .card {
        width: 80px;
        height: 120px;
        margin: 5px;
    }
}