/* ============================================
   Synthesizer Styles (forest-synth.css)
   ============================================ */

.synth-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 30px;
}

.synth-header {
    text-align: center;
    margin-bottom: 40px;
}

.synth-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    color: #8cc082;
    margin-bottom: 10px;
}

.synth-subtitle {
    font-size: 1.1rem;
    color: #5a8a56;
    font-style: italic;
}

.synth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.synth-panel {
    background: linear-gradient(135deg, rgba(15, 35, 20, 0.9), rgba(10, 25, 15, 0.95));
    border: 1px solid rgba(124, 184, 112, 0.15);
    border-radius: 16px;
    padding: 20px;
}

.panel-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #9ac89a;
    margin-bottom: 16px;
}

.waveform-group {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.synth-btn {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    padding: 8px 16px;
    border: 1px solid rgba(124, 184, 112, 0.25);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(20, 50, 25, 0.5);
    color: #7a9a7a;
    letter-spacing: 1px;
}

.synth-btn:hover {
    border-color: rgba(124, 184, 112, 0.4);
    background: rgba(30, 70, 35, 0.6);
    color: #9ac89a;
}

.synth-btn.active {
    background: linear-gradient(135deg, rgba(124, 184, 112, 0.3), rgba(100, 160, 90, 0.4));
    border-color: #7cb870;
    color: #c8dcc8;
}

.adsr-group {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.slider-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.slider-group label {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: #8fa88e;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.synth-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(124, 184, 112, 0.2);
    border-radius: 3px;
    outline: none;
    margin: 5px 0;
}

.synth-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #7cb870;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.synth-slider::-webkit-slider-thumb:hover {
    background: #9ac89a;
    box-shadow: 0 0 10px rgba(124, 184, 112, 0.5);
}

.slider-val {
    font-family: 'Playfair Display', serif;
    font-size: 0.8rem;
    color: #7cb870;
}

/* Visualizer */
.visualizer-container {
    background: linear-gradient(135deg, rgba(15, 35, 20, 0.9), rgba(10, 25, 15, 0.95));
    border: 1px solid rgba(124, 184, 112, 0.15);
    border-radius: 16px;
    padding: 10px;
    margin-bottom: 20px;
}

.visualizer {
    width: 100%;
    height: 100px;
    display: block;
    border-radius: 8px;
}

/* Keyboard */
.keyboard {
    position: relative;
    margin: 20px 0;
    user-select: none;
}

.key-white {
    width: 42px;
    height: 160px;
    background: linear-gradient(180deg, rgba(245, 240, 232, 0.9), rgba(232, 224, 208, 0.9));
    border: 1px solid rgba(138, 122, 106, 0.5);
    border-radius: 0 0 4px 4px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.1s ease;
}

.key-white:hover {
    background: linear-gradient(180deg, rgba(255, 248, 240, 0.9), rgba(240, 232, 216, 0.9));
}

.key-white:active, .key-white.pressed {
    background: linear-gradient(180deg, #7cb870, #9ac89a);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transform: translateY(2px);
}

.key-white .key-label {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', sans-serif;
    font-size: 0.6em;
    color: #5c4033;
    pointer-events: none;
}

.key-black {
    width: 28px;
    height: 100px;
    background: linear-gradient(180deg, #2a1a12, #1a0f08);
    border: 1px solid #1a0f08;
    border-radius: 0 0 3px 3px;
    cursor: pointer;
    position: absolute;
    z-index: 2;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
    transition: all 0.1s ease;
}

.key-black:hover {
    background: linear-gradient(180deg, #3a2a1a, #2a1a12);
}

.key-black:active, .key-black.pressed {
    background: linear-gradient(180deg, #5a4a3a, #4a3a2a);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transform: translateY(2px);
}

.key-black .key-label {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', sans-serif;
    font-size: 0.5em;
    color: #7cb870;
    pointer-events: none;
}

/* Synth responsive */
@media (max-width: 768px) {
    .synth-container {
        padding: 20px 10px;
    }

    .synth-grid {
        grid-template-columns: 1fr;
    }

    .adsr-group {
        justify-content: center;
    }

    .controls {
        flex-direction: column;
        gap: 12px;
    }
}