.wipeoutCanvas {
    border-radius: 6px;
    padding: 15px;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

/* Grid layout for buttons */
#wipeout-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default three-column layout */
    grid-gap: 10px; /* Space between buttons */
    width: 100%;
}

/* Ensure buttons fill the grid cells and have consistent height */
.wipeout-answer-btn {
    position: relative;
    width: 100%;
    padding: 10px;
    box-sizing: border-box; /* Include padding in button size */
    white-space: normal; /* Allow text to wrap inside the button */
    text-align: center; /* Center text inside the button */
    display: flex; /* Flexbox to align content */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    min-height: 120px; /* Set a minimum height */
    height: 100%; /* Make the button fill the grid cell */
    border: 1px solid #8a8a8a;
    display: block;
    word-break: break-word;
}

@media (max-width: 600px) {
    #activityCanvas.wipeoutCanvas {
        padding: 10px 10px; /* Adjust padding for smaller screens */
    }
    /* Grid layout for buttons */
        #wipeout-grid {
            grid-gap: 5px; /* Space between buttons */
        }
    .wipeout-answer-btn {
        font-size: clamp(0.6em, 3.5vw, 1em);
        padding: 2px; /* Adjust padding for smaller buttons */
        min-height: 100px; /* Adjust the minimum height on smaller screens */
    }
}

/* Question text styling */
#wipeoutQuestion {
    margin: 0;
    font-size: 1.1em;
    font-family: 'Montserrat', Arial, Sans-serif;
    text-align: left;
    user-select: none;
}

/* Styling for correct answer preview */
#wipeout-grid .wipeout-answer-btn.answerCorrectPreview {
    background-color: #54e19a !important;
}

#wipeout-grid .wipeout-answer-btn.answerCorrect::after{
    display: none;
}

#wipeout-grid .wipeout-answer-btn.answerIncorrect::after{
    display: none;
}

#wipeout-grid .wipeout-answer-btn .answerCorrectImageOverlay{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 25px;
    height: 25px;
    pointer-events: none;
    opacity: 0.8;
}

#wipeout-grid .wipeout-answer-btn .answerIncorrectImageOverlay{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 25px;
    height: 25px;
    pointer-events: none;
    opacity: 0.7;
}