/* Bingo Card Styling */

.bingo-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}

.bingo-image {
    width: 100%; /* Adjust the width as needed */
    max-width: 500px; /* Set a maximum width for the image */
    margin-bottom: 10px; /* Add space between image and bingo card */
}

.bingo-card5x5 {
    display: grid;
    grid-template-rows: repeat(5, 110px);
    grid-template-columns: repeat(5, 1fr);
    text-transform: uppercase;
    grid-gap: 3px;
    background-color: #111; /* Set the background color to dark gray */
    color: #ddd; /* Set the text color to white */
    padding: 1rem;
    width: 730px;
    height: 590px;
    /* Responsive adjustments */
    max-width: 100%; /* Allow the card to adapt to smaller screens */
    overflow: hidden; /* Prevent horizontal overflow */
    font-size: 0.8rem; /* Reduce font size on smaller screens */
    /* Responsive adjustments */
    @media (max-width: 1024px) {
        width: 100%; /* Make the card width 100% on smaller screens */
        font-size: 0.7rem; /* Adjust font size for smaller screens */
    }
    /* Responsive font size adjustment */
    @media (max-width: 600px) {
        font-size: calc(0.8rem + 0.4vw); /* Adjust font size as viewport width gets smaller */
    }
}

.bingo-card3x9 {
    display: grid;
    grid-template-rows: repeat(3, 110px);
    grid-template-columns: repeat(9, 1fr);
    text-transform: uppercase;
    grid-gap: 3px;
    background-color: #111; /* Set the background color to dark gray */
    color: #ddd; /* Set the text color to white */
    padding: 1rem;
    width: 1000px;
    height: 450px;
    /* Responsive adjustments */
    max-width: 100%; /* Allow the card to adapt to smaller screens */
    overflow: hidden; /* Prevent horizontal overflow */
    font-size: 0.8rem; /* Reduce font size on smaller screens */
    /* Responsive adjustments */
    @media (max-width: 1024px) {
        width: 100%; /* Make the card width 100% on smaller screens */
        font-size: 0.7rem; /* Adjust font size for smaller screens */
    }
    /* Responsive font size adjustment */
    @media (max-width: 600px) {
        font-size: calc(0.8rem + 0.4vw); /* Adjust font size as viewport width gets smaller */
    }
}


/* Bingo Cell Styling */
.bingo-cell {
    border: 2px solid #555;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    background-color: transparent;
    transition: background-color 0.3s ease;
    user-select: none;
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
    color: #ddd; /* Set the text color to white */

    overflow: hidden; /* Prevent text overflow */
    word-wrap: break-word; /* Allow word wrap for long sentences */
    line-height: 1.2; /* Set line height for better readability */
    /* Responsive adjustments */
    min-height: 80px; /* Set a minimum height for the cells */
    font-size: 80%;
}

.bingo-cell:hover {
    background-color: #444;
    color: black; /* Change the text color on hover to improve readability */
}

.highlighted {
    background-color: #264d25;
}

.bingo-cell.free-space {
    background-color: #a13232;
    font-weight: bold;
}