body {
    background: linear-gradient(45deg, #000000, #4B0082);
    background-size: 400% 400%;
    animation: gradientShift 4s ease infinite;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.card {
    border: none;
    border-radius: 15px;
}

.card-header {
    border-radius: 15px 15px 0 0 !important;
}

.btn {
    border-radius: 20px;
}

#sequencer-container {
    min-height: 200px;
    width: 100%;
    background-color: #f8f9fa;
    border-radius: 5px;
    margin-bottom: 15px;
}

#drum-controls button {
    min-width: 30px;
}

.guitar-container {
    height: 600px;
    width: 100%;
    position: relative;
}

/* Mobile-Friendly Responsive Design */
@media (max-width: 768px) {
    /* Touch-friendly buttons */
    .btn {
        min-height: 44px;
        font-size: 16px;
        padding: 10px 15px;
        margin-bottom: 10px;
    }
    
    .btn-sm {
        min-height: 40px;
        font-size: 14px;
    }
    
    /* Larger form controls for touch */
    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 16px;
    }
    
    /* Larger range sliders */
    .form-range,
    input[type="range"] {
        height: 40px;
        -webkit-appearance: none;
        appearance: none;
    }
    
    input[type="range"]::-webkit-slider-thumb {
        width: 30px;
        height: 30px;
    }
    
    input[type="range"]::-moz-range-thumb {
        width: 30px;
        height: 30px;
    }
    
    /* Stack columns on mobile */
    .col-md-4,
    .col-md-6,
    .col-md-8,
    .col-md-10,
    .col-md-12 {
        margin-bottom: 20px;
    }
    
    /* Reduce card spacing */
    .card {
        margin-bottom: 15px;
    }
    
    /* Sequencer container adjustments */
    #sequencer-container {
        height: 180px;
        min-height: 180px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* PDF iframe mobile-friendly */
    #pdf-iframe {
        height: 300px !important;
    }
    
/* 3D Guitar iframe mobile-friendly */
.guitar-container {
    height: 500px;
}

/* iPhone specific adjustments */
@media (max-width: 768px) and (orientation: portrait) {
    .guitar-container {
        height: 400px; /* Smaller height for portrait iPhone */
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .guitar-container {
        height: 350px; /* Even smaller for landscape iPhone */
    }
}

/* Very small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
    .guitar-container {
        height: 350px;
    }
}

#guitar-iframe {
    height: 100% !important;
    width: 100% !important;
}
    
    /* Ensure Music Learning Tool doesn't overlay */
    #music-learning-container {
        margin-top: 20px;
        position: relative;
        z-index: 1;
        clear: both;
    }
    
    /* Drum controls mobile layout */
    #drum-controls {
        font-size: 14px;
    }
    
    #drum-controls button {
        min-width: 35px;
        min-height: 35px;
    }
    
    /* Flexible button groups */
    .d-flex.flex-wrap {
        justify-content: center;
    }
    
    /* Input groups mobile-friendly */
    .input-group {
        width: 100% !important;
        margin-bottom: 10px;
    }
    
    /* Transport controls mobile */
    #transport-controls .d-flex {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    #transport-controls button,
    #transport-controls input {
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 10px;
    }
    
    /* Audio player controls */
    audio {
        width: 100%;
        height: 44px;
    }
    
    /* BPM display larger on mobile */
    #bpm-display {
        font-size: 28px !important;
    }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
    #sequencer-container {
        height: 150px;
        min-height: 150px;
    }
    
    #guitar-iframe {
        height: 300px !important;
    }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
    .btn {
        min-height: 42px;
    }
    
    #sequencer-container {
        height: 220px;
    }
}