/* Bonus tile styles - only show special styling after being answered correctly */
.grid-cell.bonus-tile.completed-correct {
    /* Remove background color - only show the bonus image */
    background: white;
    border: 1px solid #ddd;
}

.grid-cell.bonus-tile.completed-incorrect {
    /* Remove background color - only show the bonus image */
    background: white;
    border: 1px solid #ddd;
}

.grid-cell.bonus-tile .points-info {
    background: rgba(255, 255, 255, 0.9);
    color: #ffa000;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Make bonus tiles look identical to regular tiles until answered */
.grid-cell.bonus-tile {
    background: white;
    border: 1px solid #ddd; /* Match regular tile border */
}

/* Ensure hover effects match regular tiles */
.grid-cell.bonus-tile:not(.answered):hover {
    /* Match the hover effect of regular grid cells */
    box-shadow: var(--shadow-sm);
    transform: scale(1.02);
}