/* Custom vintage audio styles */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Crimson+Text:wght@400;600&family=Dancing+Script:wght@700&display=swap');

body {
    background: linear-gradient(135deg, #92400e 0%, #451a03 100%);
    font-family: 'Crimson Text', serif;
}

/* Power Button Glow Effect */
.power-btn:hover {
    box-shadow: 0 0 25px rgba(255, 107, 53, 0.6);
    transform: scale(1.05);
}

.power-on {
    box-shadow: 0 0 30px rgba(255, 107, 53, 0.8);
}

/* Vintage Slider Styling */
.vintage-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: linear-gradient(to right, #451a03, #92400e, #f59e0b);
    outline: none;
    border-radius: 4px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.vintage-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: conic-gradient(from 0deg, #C0C0C0, #E5E5E5, #C0C0C0, #A0A0A0);
    border: 2px solid #888;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
}

.vintage-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}

.vintage-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: conic-gradient(from 0deg, #C0C0C0, #E5E5E5, #C0C0C0, #A0A0A0);
    border: 2px solid #888;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Receiver Container Wood Grain Effect */
.receiver-container {
    background: 
        linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.1) 50%, transparent 100%),
        repeating-linear-gradient(
            0deg,
            #d2691e,
            #d2691e 2px,
            #cd853f 2px,
            #cd853f 4px,
            #daa520 4px,
            #daa520 6px
        );
    border: 3px solid #8B4513;
}

/* VU Meter Styling */
.vu-meter {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.vu-needle {
    filter: drop-shadow(0 2px 4px rgba(255,0,0,0.5));
}

/* Text Glow Effects */
h1 {
    text-shadow: 
        0 0 10px rgba(255, 193, 7, 0.5),
        0 0 20px rgba(255, 193, 7, 0.3),
        0 0 30px rgba(255, 193, 7, 0.2);
}

/* Hover animations */
.hover\:scale-105:hover {
    transform: scale(1.05);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #451a03;
}

::-webkit-scrollbar-thumb {
    background: #92400e;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #f59e0b;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .receiver-container {
        padding: 1rem;
    }
    
    h1 {
        font-size: 3rem !important;
    }
}