/* Custom styles for PixelBeats */

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

:root {
  --color-dark-navy: #1a1a2e;
  --color-panel-bg: #16213e;
  --color-active-cyan: #0f3460;
  --color-neon-green: #00ff41;
  --color-retro-orange: #ff6b35;
  --color-retro-pink: #ff006e;
  --color-text-light: #e5e5e5;
  --color-text-white: #ffffff;
}

body {
  background: var(--color-dark-navy);
  font-family: 'Roboto Mono', monospace;
  overflow: hidden;
}

/* Pixel-style fonts */
.pixel-font {
  font-family: 'Orbitron', monospace;
  letter-spacing: 0.05em;
}

/* Pixel borders */
.pixel-border {
  border: 2px solid;
  border-image: linear-gradient(45deg, 
    rgba(6, 182, 212, 0.8) 0%, 
    rgba(6, 182, 212, 0.4) 50%, 
    rgba(6, 182, 212, 0.8) 100%) 1;
}

/* Glow effects */
.glow-text {
  text-shadow: 0 0 10px rgba(6, 182, 212, 0.8),
               0 0 20px rgba(6, 182, 212, 0.6),
               0 0 30px rgba(6, 182, 212, 0.4);
}

.glow-step {
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.8),
              inset 0 0 8px rgba(6, 182, 212, 0.4);
}

.glow-pink {
  box-shadow: 0 0 10px rgba(255, 0, 110, 0.6),
              0 0 20px rgba(255, 0, 110, 0.4);
}

.playhead-glow {
  box-shadow: 0 0 15px rgba(0, 255, 65, 0.9),
              0 0 30px rgba(0, 255, 65, 0.6);
}

.pulse-glow {
  animation: pulse-glow 1s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
  from {
    box-shadow: 0 0 5px rgba(255, 107, 53, 0.6);
  }
  to {
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.9),
                0 0 25px rgba(255, 107, 53, 0.6);
  }
}

/* Digital display styling */
.digital-display {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border: 1px solid #06b6d4;
  border-radius: 4px;
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  color: #00ff41;
  text-shadow: 0 0 5px rgba(0, 255, 65, 0.8);
  padding: 4px 8px;
  font-size: 0.875rem;
}

/* Custom slider styles */
.slider-cyan, .slider-green, .slider-orange, .slider-pink {
  appearance: none;
  height: 6px;
  border-radius: 3px;
  outline: none;
  transition: all 0.3s ease;
}

.slider-cyan {
  background: linear-gradient(to right, #374151, #06b6d4);
}

.slider-green {
  background: linear-gradient(to right, #374151, #00ff41);
}

.slider-orange {
  background: linear-gradient(to right, #374151, #ff6b35);
}

.slider-pink {
  background: linear-gradient(to right, #374151, #ff006e);
}

.slider-cyan::-webkit-slider-thumb,
.slider-green::-webkit-slider-thumb,
.slider-orange::-webkit-slider-thumb,
.slider-pink::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-cyan::-webkit-slider-thumb {
  background: #06b6d4;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}

.slider-green::-webkit-slider-thumb {
  background: #00ff41;
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
}

.slider-orange::-webkit-slider-thumb {
  background: #ff6b35;
  box-shadow: 0 0 8px rgba(255, 107, 53, 0.6);
}

.slider-pink::-webkit-slider-thumb {
  background: #ff006e;
  box-shadow: 0 0 8px rgba(255, 0, 110, 0.6);
}

/* Transport button styles */
.transport-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  color: white;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.transport-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.transport-btn:active {
  transform: translateY(0);
}

/* Grid line styling */
.grid {
  background-image: 
    linear-gradient(rgba(6, 182, 212, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Scan line effect */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    transparent 50%,
    rgba(0, 255, 65, 0.02) 50%
  );
  background-size: 100% 4px;
  animation: scan-lines 0.1s linear infinite;
}

@keyframes scan-lines {
  0% { background-position: 0 0; }
  100% { background-position: 0 4px; }
}

/* Responsive design improvements */
@media (max-width: 1024px) {
  .grid-cols-17 {
    font-size: 0.75rem;
  }
  
  .transport-btn {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .glow-text {
    font-size: 2rem;
  }
  
  .pixel-border {
    border-width: 1px;
  }
}

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

::-webkit-scrollbar-track {
  background: #374151;
}

::-webkit-scrollbar-thumb {
  background: #06b6d4;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0891b2;
}