/**
 * Simplified Split-Screen Interface Styles
 */

/* Ensure proper mobile responsiveness */
@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column !important;
    }
    
    .left-panel, 
    .right-panel {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 2px solid black;
    }
    
    .left-panel {
        padding: 20px !important;
        text-align: center;
    }
    
    .right-panel {
        padding: 20px !important;
    }
}

/* Add hover effect to button */
.add-to-playbook:hover {
    transform: scale(1.05);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
}

/* Smooth transitions */
.card-game-overlay {
    transition: opacity 0.3s ease;
}

/* Close button hover effect */
.close-card-game:hover {
    background: rgba(255,255,255,0.1) !important;
    border-radius: 4px;
}