/* Custom vintage Hammond Novachord styling */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;500&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  background: linear-gradient(135deg, #92400e 0%, #a16207 50%, #92400e 100%);
  min-height: 100vh;
}

.font-serif {
  font-family: 'Playfair Display', serif;
}

/* Custom knob styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: linear-gradient(to right, #d97706 0%, #f59e0b 50%, #d97706 100%);
  border-radius: 4px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #fbbf24 0%, #d97706 70%, #92400e 100%);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #92400e;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #fbbf24 0%, #d97706 70%, #92400e 100%);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #92400e;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Vintage glow effects */
.vintage-glow {
  box-shadow: 
    0 0 5px rgba(251, 191, 36, 0.3),
    0 0 10px rgba(251, 191, 36, 0.2),
    0 0 15px rgba(251, 191, 36, 0.1);
}

/* Piano key animations */
button:active {
  transform: translateY(2px);
}

/* Retro panel styling */
.control-panel {
  background: 
    linear-gradient(135deg, 
      rgba(255,255,255,0.9) 0%, 
      rgba(254,243,199,0.9) 50%, 
      rgba(255,255,255,0.9) 100%
    );
  box-shadow: 
    inset 0 2px 4px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.2);
}

/* Art Deco inspired borders */
.deco-border {
  border-image: linear-gradient(45deg, #92400e, #d97706, #92400e) 1;
}

/* Animated VU meter */
@keyframes vu-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.vu-active {
  animation: vu-pulse 0.5s ease-in-out infinite;
}

/* Responsive keyboard scaling */
@media (max-width: 768px) {
  .keyboard-container {
    overflow-x: auto;
    padding: 0 1rem;
  }
  
  .keyboard-container button {
    min-width: 24px;
    font-size: 10px;
  }
}

/* Vintage text shadow */
.vintage-text {
  text-shadow: 
    2px 2px 0px rgba(0,0,0,0.3),
    4px 4px 8px rgba(0,0,0,0.2);
}

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

::-webkit-scrollbar-track {
  background: rgba(146, 64, 14, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #d97706, #92400e);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #f59e0b, #d97706);
}