@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');/* Wildly different styles for each variant */
/* Base Styles */
.wild-fader {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 50px; /* Skinnier base width */
  margin: 0 6px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.fader-input {
  /* Replacing deprecated slider-vertical with modern alternative */
  writing-mode: vertical-lr;
  direction: rtl;
  /* Firefox legacy support */
  writing-mode: bt-lr;
  width: 40px; /* Styles for WildFader component */
  pointer-events: auto !important; /* Make sure input is interactable */
  z-index: 200 !important;
  cursor: pointer !important;
  opacity: 0; /* Hide visually but keep functional */
  touch-action: manipulation; /* Better touch support */
}

.fader-label {
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
  margin-top: 6px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
  transform-origin: center center;
  backface-visibility: hidden;
}

@keyframes wildLabelGlitch {
  0%, 100% { transform: translateX(0) skewX(0deg); }
  25% { transform: translateX(-1px) skewX(-4deg); }
  50% { transform: translateX(1px) skewX(3deg); }
  75% { transform: translateX(-0.5px) skewX(-2deg); }
}

@keyframes wildLabelPunch {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.08); }
  70% { transform: scale(0.98); }
}

@keyframes wildLabelFocus {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}

@keyframes wildLabelPixelFlicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.88; transform: scale(1.03); }
}

@keyframes wildLabelWhoa {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-2px); }
}

@keyframes wildLabelStutter {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-1px); }
  40% { transform: translateX(1px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

@keyframes wildLabelFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(180deg); }
}

@keyframes wildLabelChop {
  0% { clip-path: inset(0 0 0 0); }
  50% { clip-path: inset(0 0 45% 0); }
  100% { clip-path: inset(45% 0 0 0); }
}

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

@keyframes wildLabelSlow {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50% { transform: scaleX(0.94) scaleY(1.12); }
}

@keyframes wildLabelWave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(-1deg); }
  75% { transform: translateY(2px) rotate(1deg); }
}

@keyframes wildLabelDelay {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50% { transform: translateX(2px); opacity: 0.88; }
}

@keyframes wildLabelFilter {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes wildLabelRise {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes wildLabelDrown {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(3px); opacity: 0.8; }
}

@keyframes wildLabelFlange {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1.5px); }
}

@keyframes wildLabelChip {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.08) translateY(-2px); }
}

@keyframes wildLabelPitchDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.fader-value {
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
}

/* Different fader variants */
.wild-fader-neon .fader-label { 
  color: #ff00ff; 
  text-shadow: 0 0 5px #ff00ff; 
  animation: neonPulse 2s infinite;
}

.wild-fader-glass .fader-label { 
  color: #00f7ff; 
  text-shadow: 0 0 5px rgba(0, 247, 255, 0.7); 
  animation: trackGlow 2s infinite;
}

.wild-fader-retro .fader-label { 
  color: #ffcc00; 
  font-family: 'Courier New', monospace; 
  animation: retro-scan 2s infinite;
}

.wild-fader-lcd .fader-label { 
  color: #33ff33; 
  font-family: 'Courier New', monospace; 
  animation: lcd-flicker 2s infinite;
}

.wild-fader-wave .fader-label { 
  color: #0088ff; 
  animation: textFlicker 2s infinite;
}

.wild-fader-vintage .fader-label { 
  color: #ddbb99; 
  font-family: 'Times New Roman', serif; 
  animation: textGlitch 2s infinite;
}

.wild-fader-cosmic .fader-label { 
  color: #aa55ff; 
  animation: textDistort 2s infinite;
}

.wild-fader-candy .fader-label { 
  color: #ff55aa; 
  animation: colorShift 2s infinite;
}

.wild-fader-industrial .fader-label { 
  color: #aaaaaa; 
  animation: industrial-noise 2s infinite;
}

.wild-fader-sunset .fader-label { 
  color: #ff7700; 
  animation: thumbTwitch 2s infinite;
}

.wild-fader-jade .fader-label { 
  color: #00bb99; 
  animation: trackGlow 2s infinite;
}

.wild-fader-circuit .fader-label { 
  color: #44ff44; 
  animation: lcd-flicker 2s infinite;
}

.wild-fader-crimson .fader-label { 
  color: #ff3333; 
  animation: neonPulse 2s infinite;
}

.wild-fader-chrome .fader-label { 
  color: #dddddd; 
  animation: textFlicker 2s infinite;
}

.wild-fader-neon-blue .fader-label { 
  color: #0077ff; 
  animation: textGlitch 2s infinite;
}

/* Variant-specific track styles */
.wild-fader-neon .fader-track { 
  box-shadow: 0 0 5px #ff00ff; 
  animation: trackGlow 2s infinite;
}

.wild-fader-lcd .fader-track { 
  background: #001100 !important; 
  border: 1px solid #00ff00; 
  animation: lcd-flicker 2s infinite;
}

.wild-fader-candy .fader-track { 
  background: linear-gradient(45deg, #ff55aa, #ff88cc) !important; 
  animation: colorShift 2s infinite;
}

.wild-fader-industrial .fader-track { 
  background: #444444 !important; 
  border: 2px solid #666666; 
  animation: industrial-noise 2s infinite;
}

.wild-fader-circuit .fader-track { 
  background: #001100 !important; 
  border: 1px dotted #00ff00; 
  animation: lcd-flicker 2s infinite;
}

/* Animation keyframes */
@keyframes trackGlow {
  0% { box-shadow: 0 0 5px rgba(0, 247, 255, 0.7); }
  50% { box-shadow: 0 0 15px rgba(255, 0, 255, 0.9); }
  100% { box-shadow: 0 0 5px rgba(0, 247, 255, 0.7); }
}

@keyframes thumbTwitch {
  0% { transform: translateY(-50%) scale(1); }
  25% { transform: translateY(-50%) scale(1.05); }
  50% { transform: translateY(-50%) scale(1); }
  75% { transform: translateY(-50%) scale(0.95); }
  100% { transform: translateY(-50%) scale(1); }
}

@keyframes textFlicker {
  0% { opacity: 1.0; }
  3% { opacity: 0.4; }
  6% { opacity: 1.0; }
  7% { opacity: 0.4; }
  8% { opacity: 1.0; }
  9% { opacity: 0.4; }
  10% { opacity: 1.0; }
  100% { opacity: 1.0; }
}

@keyframes textGlitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: skew(2deg); }
  80% { transform: translate(1px, 1px); }
  100% { transform: translate(0); }
}

@keyframes textDistort {
  0% { letter-spacing: 0; }
  25% { letter-spacing: 1px; }
  50% { letter-spacing: -1px; }
  75% { letter-spacing: 2px; }
  100% { letter-spacing: 0; }
}

@keyframes colorShift {
  0% { color: #00f7ff; }
  30% { color: #ff00ff; }
  70% { color: #ffff00; }
  100% { color: #00f7ff; }
}

@keyframes neonPulse {
  0% { text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff; }
  50% { text-shadow: 0 0 15px #ff00ff, 0 0 25px #ff00ff; }
  100% { text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff; }
}

/* Stutter animations */
@keyframes visual-stutter {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

@keyframes thumb-stutter {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(-3px) translateY(1px); }
  75% { transform: translateX(3px) translateY(-1px); }
}

@keyframes text-stutter {
  0%, 100% { transform: translateX(0); opacity: 1; }
  25% { transform: translateX(-1px); opacity: 0.8; }
  75% { transform: translateX(1px); opacity: 0.9; }
}

/* LCD flicker effect for SP1200 */
@keyframes lcd-flicker {
  0%, 100% { opacity: 1; }
  10% { opacity: 0.8; }
  20% { opacity: 0.9; }
  30% { opacity: 1; }
  40% { opacity: 0.8; }
  50% { opacity: 1; }
  60% { opacity: 0.9; }
  70% { opacity: 1; }
  80% { opacity: 0.8; }
  90% { opacity: 0.9; }
}

@keyframes retro-scan {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

@keyframes lcd-flicker {
  0% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.8; }
  94% { opacity: 1; }
  95% { opacity: 0.9; }
  96% { opacity: 1; }
  97% { opacity: 0.9; }
  98% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes industrial-noise {
  0% { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E"); }
  100% { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E"); }
}

/* NEON: Futuristic laser beam with intensity indicator */
.wild-fader-neon {
  width: 55px;
}

.wild-fader-neon .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 70px;
  height: 240px;
  background: linear-gradient(to bottom, 
    rgba(0,0,0,0.8) 0%, 
    rgba(0,0,0,0.4) 50%,
    rgba(0,0,0,0.8) 100%);
  border: 4px solid #333;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.8);
  position: relative;
  overflow: hidden;
}

.wild-fader-neon .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 10px, rgba(0,255,255,0.1) 10px, rgba(0,255,255,0.1) 20px);
  z-index: 1;
}

.wild-fader-neon .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 66px;
  height: 30px;
  background: linear-gradient(to right, #00f7ff 0%, #ffffff 50%, #00f7ff 100%);
  border-radius: 15px;
  border: 2px solid white;
  box-shadow: 0 0 30px #0ff, 0 0 10px #fff;
  cursor: pointer;
  z-index: 3;
  position: relative;
}

.wild-fader-neon .fader-label {
  color: #00f7ff;
  font-size: 1.2em;
  text-transform: uppercase;
  text-shadow: 0 0 10px #00f7ff, 0 0 5px #fff;
  letter-spacing: 2px;
}

/* GLASS: 3D rotary knob with circular interface */
.wild-fader-glass {
  width: 58px;
  height: 300px;
}

.wild-fader-glass .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, 
    #fff 0%, 
    rgba(255,255,255,0.5) 30%, 
    rgba(100,150,255,0.2) 60%, 
    rgba(50,100,255,0.4) 100%);
  border: 4px solid rgba(255,255,255,0.8);
  box-shadow: 0 8px 32px rgba(50,100,255,0.3), 0 4px 8px rgba(0,0,0,0.3);
  transform: rotate(90deg);
  cursor: grab;
  margin-top: 40px;
}

.wild-fader-glass .fader-input:active {
  cursor: grabbing;
}

.wild-fader-glass .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 40px;
  background: linear-gradient(to right, #4a6eff, #fff);
  border-radius: 5px;
  border: 1px solid white;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  margin-top: -15px;
  cursor: grab;
}

.wild-fader-glass .fader-label {
  color: rgba(255,255,255,0.9);
  font-style: italic;
  margin-top: 40px;
  font-size: 1.1em;
  text-shadow: 0 0 10px rgba(70,140,255,0.8);
}

/* RETRO: Tape machine style vertical VU meter fader */
.wild-fader-retro {
  width: 54px;
}

.wild-fader-retro .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 80px;
  height: 200px;
  background: #241c11;
  border: 6px solid #784212;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 5px 0 #5d3307;
  position: relative;
  overflow: hidden;
}

.wild-fader-retro .fader-input::before {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  height: 190px;
  background: repeating-linear-gradient(to bottom, 
    #5d3307 0, #5d3307 5px, 
    #7b5a2b 5px, #7b5a2b 10px, 
    #5d3307 10px, #5d3307 15px,
    #7b5a2b 15px, #7b5a2b 20px);
  z-index: 1;
}

.wild-fader-retro .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 40px;
  background: linear-gradient(to bottom, #f5b041 0%, #fffbe6 90%);
  border: 3px solid #784212;
  border-radius: 6px;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  position: relative;
  z-index: 2;
}

.wild-fader-retro .fader-label {
  color: #f5b041;
  font-family: 'Courier New', monospace;
  font-size: 1.2em;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 #000;
  font-weight: bold;
  margin-top: 10px;
}

/* LCD: Sci-fi touchscreen control with value display */
.wild-fader-lcd {
  width: 52px;
}

.wild-fader-lcd .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 80px;
  height: 240px;
  background: #000;
  border: 4px solid #222;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,255,0,0.5), inset 0 0 10px rgba(0,0,0,0.8);
  position: relative;
  overflow: hidden;
}

.wild-fader-lcd .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(to bottom, 
      rgba(0,255,0,0.1) 0%, 
      rgba(0,255,0,0.05) 50%,
      rgba(0,255,0,0.1) 100%),
    repeating-linear-gradient(to bottom, 
      rgba(0,255,0,0.05) 0, 
      rgba(0,255,0,0.05) 1px, 
      transparent 1px, 
      transparent 5px);
  z-index: 1;
}

.wild-fader-lcd .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 76px;
  height: 50px;
  background: linear-gradient(to bottom, #0f0 0%, #050 100%);
  border-radius: 4px;
  border: 2px solid #0f0;
  box-shadow: 0 0 15px #0f0, 0 0 5px #fff;
  position: relative;
  z-index: 2;
}

.wild-fader-lcd .fader-label {
  color: #0f0;
  font-family: 'Courier New', monospace;
  font-size: 1.2em;
  text-transform: uppercase;
  text-shadow: 0 0 10px #0f0;
  letter-spacing: 1px;
}

/* WAVE: Water-fill liquid slider with waves */
.wild-fader-wave {
  width: 50px;
}

.wild-fader-wave .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 70px;
  height: 230px;
  background: #00151f;
  border: 3px solid #0af;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0,160,255,0.4), inset 0 0 10px rgba(0,0,0,0.8);
  position: relative;
  overflow: hidden;
}

.wild-fader-wave .fader-input::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: linear-gradient(to bottom, 
    rgba(0,170,255,0.7) 0%, 
    rgba(0,120,255,0.9) 100%);
  border-radius: 0 0 12px 12px;
  z-index: 1;
  transition: height 0.3s ease-in-out;
  animation: wave 2s infinite ease-in-out;
}

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.wild-fader-wave .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 64px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border: 2px solid #0af;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,170,255,0.8), inset 0 0 20px rgba(0,170,255,0.5);
  position: relative;
  z-index: 2;
}

.wild-fader-wave .fader-label {
  color: #0af;
  font-size: 1.2em;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0,170,255,0.8);
  margin-top: 10px;
}

/* VINTAGE: Warm wood and brass with markers */
.wild-fader-vintage {
  width: 45px;
}

.wild-fader-vintage .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 35px;
  height: 180px;
  background: linear-gradient(to right, #8B4513 0%, #A0522D 50%, #8B4513 100%);
  border: 2px solid #B8860B;
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5), 2px 2px 4px rgba(0,0,0,0.2);
  position: relative;
}

.wild-fader-vintage .fader-input::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 5px;
  bottom: 5px;
  background: repeating-linear-gradient(to bottom, 
    transparent 0, transparent 15px, 
    #D2B48C 15px, #D2B48C 16px);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}

.wild-fader-vintage .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 33px;
  height: 20px;
  background: linear-gradient(to bottom, #D4AF37 0%, #B8860B 100%);
  border-radius: 2px;
  border: 1px solid #FFD700;
  box-shadow: 0 1px 2px rgba(0,0,0,0.8);
  position: relative;
  z-index: 2;
}

.wild-fader-vintage .fader-label {
  color: #D4AF37;
  font-family: 'Times New Roman', serif;
  font-size: 1em;
  font-weight: normal;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
}

/* COSMIC: Purple galaxy with stars */
.wild-fader-cosmic {
  width: 48px;
}

.wild-fader-cosmic .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 38px;
  height: 190px;
  background: linear-gradient(to bottom, 
    #0b0033 0%, 
    #1a0061 40%, 
    #4b0082 70%, 
    #9370DB 100%);
  border: 1px solid #8A2BE2;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(138,43,226,0.5), inset 0 0 20px rgba(0,0,0,0.8);
  position: relative;
  overflow: hidden;
}

.wild-fader-cosmic .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(1px 1px at 10px 10px, white 100%, transparent),
    radial-gradient(1px 1px at 20px 50px, white 100%, transparent),
    radial-gradient(2px 2px at 30px 100px, white 100%, transparent),
    radial-gradient(1px 1px at 10px 150px, white 100%, transparent);
  z-index: 1;
  opacity: 0.8;
}

.wild-fader-cosmic .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 25px;
  background: radial-gradient(circle at center, white 0%, #9370DB 40%, #4b0082 100%);
  border-radius: 8px;
  border: 1px solid #8A2BE2;
  box-shadow: 0 0 10px rgba(255,255,255,0.8), 0 0 20px rgba(138,43,226,0.8);
  position: relative;
  z-index: 2;
}

.wild-fader-cosmic .fader-label {
  color: #9370DB;
  font-family: 'Arial', sans-serif;
  font-size: 1em;
  font-style: italic;
  text-shadow: 0 0 5px #8A2BE2, 0 0 10px rgba(255,255,255,0.5);
}

/* CANDY: Pink and sweet with a striped pattern */
.wild-fader-candy {
  width: 46px;
}

.wild-fader-candy .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 36px;
  height: 185px;
  background: linear-gradient(to right, #FF69B4 0%, #FFB6C1 50%, #FF69B4 100%);
  border: 2px solid #FF1493;
  border-radius: 25px;
  box-shadow: 0 0 10px rgba(255,20,147,0.6), inset 0 0 5px rgba(255,255,255,0.8);
  position: relative;
  overflow: hidden;
}

.wild-fader-candy .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg, 
    transparent 0, transparent 10px, 
    rgba(255,255,255,0.2) 10px, rgba(255,255,255,0.2) 20px);
  z-index: 1;
}

.wild-fader-candy .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 34px;
  background: radial-gradient(circle at center, white 0%, #FF1493 100%);
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 10px #FF1493;
  position: relative;
  z-index: 2;
}

.wild-fader-candy .fader-label {
  color: #FF1493;
  font-family: 'Comic Sans MS', cursive;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255,255,255,0.8);
}

/* INDUSTRIAL: Metal and rivets with a grungy look */
.wild-fader-industrial {
  width: 50px;
}

.wild-fader-industrial .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 40px;
  height: 195px;
  background: linear-gradient(to right, 
    #333 0%, 
    #777 20%, 
    #999 40%,
    #777 60%,
    #333 100%);
  border: 4px solid #111;
  border-radius: 0;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 2px 2px 4px rgba(0,0,0,0.4);
  position: relative;
}

.wild-fader-industrial .fader-input::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 10px;
  width: 8px;
  height: 8px;
  background: #333;
  border: 1px solid #111;
  border-radius: 50%;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.8);
  z-index: 2;
}

.wild-fader-industrial .fader-input::after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: 10px;
  width: 8px;
  height: 8px;
  background: #333;
  border: 1px solid #111;
  border-radius: 50%;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.8);
  z-index: 2;
}

.wild-fader-industrial .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 50px;
  height: 20px;
  background: linear-gradient(to bottom, #AAA 0%, #666 100%);
  border: 2px solid #111;
  border-radius: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.8);
  position: relative;
  z-index: 3;
}

.wild-fader-industrial .fader-label {
  color: #AAA;
  font-family: 'Impact', sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px #000;
}

/* SUNSET: Warm orange to red gradient */
.wild-fader-sunset {
  width: 46px;
}

.wild-fader-sunset .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 36px;
  height: 185px;
  background: linear-gradient(to bottom, 
    #FF4500 0%, 
    #FF8C00 25%, 
    #FFA500 50%, 
    #FF6347 75%, 
    #FF0000 100%);
  border: 2px solid #FF4500;
  border-radius: 18px;
  box-shadow: 0 0 15px rgba(255,69,0,0.5), inset 0 0 10px rgba(255,255,255,0.2);
  position: relative;
  overflow: hidden;
}

.wild-fader-sunset .fader-input::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: radial-gradient(ellipse at bottom, rgba(255,69,0,0.4) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.wild-fader-sunset .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 22px;
  background: linear-gradient(to bottom, #FFFF00 0%, #FF8C00 100%);
  border: 1px solid #FF4500;
  border-radius: 11px;
  box-shadow: 0 0 10px rgba(255,69,0,0.8);
  position: relative;
  z-index: 2;
}

.wild-fader-sunset .fader-label {
  color: #FF4500;
  font-family: 'Verdana', sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255,255,0,0.5);
}

/* JADE: Green gemstone style with facets */
.wild-fader-jade {
  width: 44px;
}

.wild-fader-jade .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 34px;
  height: 180px;
  background: linear-gradient(135deg, 
    #004d00 0%, 
    #00802b 20%, 
    #00cc66 50%, 
    #00802b 80%, 
    #004d00 100%);
  border: 2px solid #006633;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0,153,76,0.5), inset 0 0 10px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}

.wild-fader-jade .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent 0%, 
    rgba(255,255,255,0.1) 25%, 
    transparent 50%, 
    rgba(255,255,255,0.1) 75%, 
    transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.wild-fader-jade .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 26px;
  background: linear-gradient(to bottom, #00e673 0%, #008040 100%);
  border: 1px solid #006633;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0,230,115,0.8);
  position: relative;
  z-index: 2;
}

.wild-fader-jade .fader-label {
  color: #00cc66;
  font-family: 'Georgia', serif;
  font-size: 1em;
  font-style: italic;
  text-shadow: 0 0 5px rgba(0,204,102,0.5);
}

/* CIRCUIT: Tech-inspired circuit board pattern */
.wild-fader-circuit {
  width: 45px;
}

.wild-fader-circuit .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 35px;
  height: 190px;
  background: #001a00;
  border: 2px solid #00ff00;
  border-radius: 0;
  box-shadow: 0 0 10px rgba(0,255,0,0.5), inset 0 0 8px rgba(0,255,0,0.2);
  position: relative;
  overflow: hidden;
}

.wild-fader-circuit .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, transparent 49%, #00ff00 49%, #00ff00 51%, transparent 51%),
    linear-gradient(0deg, transparent 49%, #00ff00 49%, #00ff00 51%, transparent 51%),
    radial-gradient(circle at 12px 30px, #00ff00 0%, #00ff00 2px, transparent 3px),
    radial-gradient(circle at 22px 60px, #00ff00 0%, #00ff00 2px, transparent 3px),
    radial-gradient(circle at 12px 90px, #00ff00 0%, #00ff00 2px, transparent 3px),
    radial-gradient(circle at 22px 120px, #00ff00 0%, #00ff00 2px, transparent 3px),
    radial-gradient(circle at 12px 150px, #00ff00 0%, #00ff00 2px, transparent 3px);
  background-size: 35px 190px, 35px 190px, auto, auto, auto, auto, auto;
  opacity: 0.3;
  z-index: 1;
  pointer-events: none;
}

.wild-fader-circuit .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 33px;
  height: 18px;
  background: #001a00;
  border: 2px solid #00ff00;
  border-radius: 0;
  box-shadow: 0 0 10px #00ff00, inset 0 0 5px #00ff00;
  position: relative;
  z-index: 2;
}

.wild-fader-circuit .fader-label {
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 8px #00ff00;
}

/* CRIMSON: Deep red velvet with gold accents */
.wild-fader-crimson {
  width: 46px;
}

.wild-fader-crimson .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 36px;
  height: 185px;
  background: linear-gradient(to right, #660000 0%, #990000 50%, #660000 100%);
  border: 2px solid #800000;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(102,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}

.wild-fader-crimson .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(to bottom, 
    transparent 0, transparent 20px, 
    rgba(204,0,0,0.4) 20px, rgba(204,0,0,0.4) 21px);
  z-index: 1;
  pointer-events: none;
}

.wild-fader-crimson .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 28px;
  background: linear-gradient(to bottom, #d4af37 0%, #b8860b 100%);
  border: 1px solid #ffd700;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(212,175,55,0.8);
  position: relative;
  z-index: 2;
}

.wild-fader-crimson .fader-label {
  color: #d4af37;
  font-family: 'Palatino Linotype', serif;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 1px 1px 2px #660000;
}

/* CHROME: Polished metal with reflective surface */
.wild-fader-chrome {
  width: 48px;
}

.wild-fader-chrome .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 38px;
  height: 190px;
  background: linear-gradient(to right, 
    #666 0%, 
    #ccc 30%, 
    #fff 50%, 
    #ccc 70%, 
    #666 100%);
  border: 2px solid #888;
  border-radius: 6px;
  box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
}

.wild-fader-chrome .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    transparent 0%, 
    transparent 40%, 
    rgba(255,255,255,0.5) 45%, 
    rgba(255,255,255,0.5) 55%, 
    transparent 60%, 
    transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.wild-fader-chrome .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 24px;
  background: linear-gradient(to bottom, #eee 0%, #999 100%);
  border: 1px solid #666;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  position: relative;
  z-index: 2;
}

.wild-fader-chrome .fader-label {
  color: #333;
  font-family: 'Arial', sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* NEON-BLUE: Electric blue neon light style */
.wild-fader-neon-blue {
  width: 45px;
}

.wild-fader-neon-blue .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 35px;
  height: 180px;
  background: #000033;
  border: 2px solid #0066ff;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0,102,255,0.8), inset 0 0 15px rgba(0,102,255,0.3);
  position: relative;
  overflow: hidden;
}

.wild-fader-neon-blue .fader-input::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #0066ff;
  box-shadow: 0 0 15px 3px #0066ff;
  z-index: 1;
  pointer-events: none;
}

.wild-fader-neon-blue .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 33px;
  height: 20px;
  background: rgba(0,30,60,0.7);
  border: 2px solid #0099ff;
  border-radius: 12px;
  box-shadow: 0 0 15px #0099ff, inset 0 0 8px #0099ff;
  position: relative;
  z-index: 2;
}

.wild-fader-neon-blue .fader-label {
  color: #0099ff;
  font-family: 'Segoe UI', sans-serif;
  font-size: 1em;
  font-weight: normal;
  text-shadow: 0 0 10px #0099ff, 0 0 20px #0099ff;
}

/* ===== FX FADER ANIMATIONS FOR DESKTOP THEME ===== */

.fx-faders-grid .fx-fader-item.fader-active .wild-fader-label {
  font-weight: bold !important;
  text-shadow: 0 0 8px currentColor !important;
  transform: scale(1.05) !important;
  transition: all 0.2s ease-in-out !important;
}
/* FX Menu Styling */
.fx-menu-container {
  position: fixed;
  left: 120px; /* Leave space for sidebar buttons */
  bottom: 0;
  width: calc(100% - 120px); /* Adjust width to account for sidebar */
  height: 48vh; /* Slightly reduced height from 50vh */
  background-color: #111111; /* Dark background to show shadows better */
  color: #fff;
  padding: 12px 8px 24px 8px; /* Reduced top padding from 16px to 12px */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow-x: auto; /* Allow horizontal scrolling if needed */
  overflow-y: hidden; /* Prevent vertical scrolling */
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  z-index: 1500; /* Ensure it's above other elements */
}

/* iPad-specific adjustments - reduce height so top doesn't cover transport */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
  .fx-menu-container {
    height: 42vh; /* Increased height for iPad - brings top up a bit */
    bottom: 0; /* Keep anchored to bottom */
  }
}

/* Top row buttons */
.fx-top-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 8px;
}

/* Toggle Button Styling - 3D Mechanical Style */
@keyframes ledBlink {
  0% { opacity: 0.4; box-shadow: 0 0 2px #ff3300, 0 0 4px #ff3300; }
  50% { opacity: 1; box-shadow: 0 0 4px #ff3300, 0 0 8px #ff3300, 0 0 12px #ff5500; }
  100% { opacity: 0.4; box-shadow: 0 0 2px #ff3300, 0 0 4px #ff3300; }
}

.fx-button {
  background: linear-gradient(to bottom, #222, #000);
  color: white;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 8px;
  min-width: 70px;
  height: 60px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.7), 
    0 8px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

/* LED indicator only for toggle buttons */
.fx-button:before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #333;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
  transition: background-color 0.2s;
}

/* Remove LED from non-toggle buttons */
.non-toggle-button:before {
  display: none;
}

.fx-button:hover {
  background: linear-gradient(to bottom, #333, #111);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.8), 
    0 10px 20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transform: translateY(-3px);
}

/* Special styling for reset button */
.reset-button {
  background: linear-gradient(to bottom, #700, #500);
  border-color: #800;
}

.reset-button:hover {
  background: linear-gradient(to bottom, #800, #600);
}

/* Special styling for return button */
.return-button {
  background: linear-gradient(to bottom, #005, #003);
  border-color: #006;
}

.return-button:hover {
  background: linear-gradient(to bottom, #006, #004);
}

.fx-button.active {
  background: linear-gradient(to bottom, #e0e0e0, #c0c0c0) !important;
  color: #000 !important;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.5), 
    inset 0 1px 10px rgba(255, 255, 255, 0.4),
    inset 0 0 5px rgba(255, 255, 255, 0.8);
  transform: translateY(1px);
  border-color: #aaa;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}

.fx-button.active:before {
  background-color: #ff3300;
  box-shadow: 0 0 4px #ff3300, 0 0 8px #ff5500;
  animation: ledBlink 1.5s infinite;
}

.fx-button.reset-button {
  background: linear-gradient(to bottom, #3a62ce, #2a52be);
  border: 1px solid #4a72de;
}

.fx-button.reset-button:hover {
  background: linear-gradient(to bottom, #4a72de, #3a62ce);
}

.fx-button.reset-button.active:before {
  background-color: #00aaff;
  box-shadow: 0 0 4px #00aaff, 0 0 8px #00ccff;
}

.fx-button.return-button {
  background: linear-gradient(to bottom, #a942dc, #9932cc);
  border: 1px solid #b952ec;
}

.fx-button.return-button:hover {
  background: linear-gradient(to bottom, #b952ec, #a942dc);
}

.fx-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #444;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.fx-header-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fx-menu-header h2 {
  font-size: 1.5rem;
  margin: 0;
  color: #eee;
  text-shadow: 0 0 10px rgba(138, 43, 226, 0.7);
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.reset-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(to bottom, #444, #333);
  border: none;
  border-radius: 4px;
  color: #fff;
  padding: 5px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.reset-btn:hover {
  background: linear-gradient(to bottom, #555, #444);
  transform: translateY(-1px);
}

.close-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.fx-menu-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fx-action-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.fx-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  background: linear-gradient(to bottom, #444, #333);
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  flex: 1;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  gap: 4px;
  font-size: 0.9rem;
}

.fx-button:hover {
  background: linear-gradient(to bottom, #555, #444);
  transform: translateY(-2px);
}

.fx-button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.fx-button.active {
  background: linear-gradient(to bottom, #8A2BE2, #6A1CB5);
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.7);
}

.fx-button span {
  font-size: 0.9rem;
  font-weight: 500;
}

.random-fx {
  background: linear-gradient(to bottom, #8A2BE2, #663399);
}

.random-fx:hover {
  background: linear-gradient(to bottom, #9B30FF, #8A2BE2);
}

.reset-fx {
  background: linear-gradient(to bottom, #444, #333);
}

/* Faders grid */
.fx-faders-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  width: 100%;
  margin-top: 12px;
  overflow-x: visible;
  padding-bottom: 16px;
  gap: 0;
}

.fx-fader-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  width: 35px;
  flex: 0 0 auto;
  height: 180px;
  margin: 0 3px;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.fx-fader-item[data-fader-id="sp1200"] {
  width: 48px;
  margin: 0 6px;
}

/* Base fader label styles - now only used by WildFader */
.fx-fader-label {
  font-size: 13px;
  text-align: center;
  margin-bottom: 2px;
  color: #ccc;
  line-height: 1.1;
  transition: all 0.3s ease;
  position: relative;
}

/* Focus fader specific styling */
.focus-fader-active .wild-fader-label {
  filter: blur(var(--focus-blur));
  color: cyan;
  text-shadow: 0 0 10px rgba(0, 255, 255, var(--focus-glow));
}

/* Animation for Music Flip */
@keyframes flip {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

.music-flip-active .fader-label {
  animation: flip 0.5s alternate infinite;
  color: #ff9900;
}

/* Animation for Music Chop */
@keyframes chop {
  0% { clip-path: inset(0% 0% 0% 0%); }
  25% { clip-path: inset(0% 0% 50% 0%); }
  50% { clip-path: inset(50% 0% 0% 0%); }
  75% { clip-path: inset(0% 50% 0% 0%); }
  100% { clip-path: inset(0% 0% 0% 50%); }
}

.music-chop-active .fader-label {
  animation: chop 0.2s step-end infinite;
  color: #ff3300;
}

/* Animation for Focus */
@keyframes blur {
  0% { filter: blur(0px); }
  100% { filter: blur(3px); }
}

.focus-active .fader-label {
  animation: blur 0.3s alternate infinite;
  color: #00ccff;
}

/* Animation for Stutter */
@keyframes stutter {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.stutter-active .fader-label {
  animation: stutter 0.1s linear infinite;
  color: #ff00cc;
}

/* Animation for Wavy */
@keyframes wave {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

.wavy-active .fader-label {
  animation: wave 0.5s ease-in-out infinite;
  color: #00ffcc;
}

/* Different font styles for each fader label */
.fx-fader-item:nth-child(1) .fader-label {
  font-family: 'Impact', sans-serif;
  font-weight: bold;
  font-size: 15px;
  color: #ff5500;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.fx-fader-item:nth-child(2) .fader-label {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 14px;
  color: #00cc99;
  letter-spacing: 0.5px;
}

.fx-fader-item:nth-child(3) .fader-label {
  font-family: 'Arial', sans-serif;
  font-style: italic;
  font-size: 15px;
  color: #3399ff;
  text-shadow: 0 0 3px rgba(51, 153, 255, 0.5);
}

.fx-fader-item:nth-child(4) .fader-label {
  font-family: 'Georgia', serif;
  text-transform: uppercase;
  font-size: 13px;
  color: #ff3366;
  letter-spacing: 1px;
  font-weight: bold;
}

.fx-fader-item:nth-child(5) .fader-label {
  font-family: 'Verdana', sans-serif;
  letter-spacing: 1px;
  font-size: 14px;
  color: #ffcc00;
  text-shadow: 0 0 2px rgba(255, 204, 0, 0.6);
}

.fx-fader-item:nth-child(6) .fader-label {
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: bold;
  font-size: 15px;
  color: #cc66ff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fx-fader-item:nth-child(7) .fader-label {
  font-family: 'Comic Sans MS', cursive;
  font-size: 14px;
  color: #ff66cc;
  transform: rotate(-2deg);
}

.fx-fader-item:nth-child(8) .fader-label {
  font-family: 'Tahoma', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 13px;
  color: #33cc33;
  letter-spacing: 1px;
  text-shadow: 0 0 2px rgba(51, 204, 51, 0.5);
}

.fx-fader-item:nth-child(9) .fader-label {
  font-family: 'Lucida Console', monospace;
  letter-spacing: 1px;
  font-size: 13px;
  color: #ff9900;
  text-transform: lowercase;
  font-weight: bold;
}

.fx-fader-item:nth-child(10) .fader-label {
  font-family: 'Palatino Linotype', serif;
  font-style: italic;
  font-size: 15px;
  color: #9966ff;
  text-shadow: 0 0 3px rgba(153, 102, 255, 0.5);
}

.fx-fader-item:nth-child(11) .fader-label {
  font-family: 'Arial Black', sans-serif;
  font-size: 13px;
  color: #00ccff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.fx-fader-item:nth-child(12) .fader-label {
  font-family: 'Century Gothic', sans-serif;
  letter-spacing: 1px;
  font-size: 14px;
  color: #cc3399;
  font-weight: bold;
}

.fx-fader-item:nth-child(13) .fader-label {
  font-family: 'Copperplate', fantasy;
  text-transform: uppercase;
  font-size: 13px;
  color: #66cc00;
  letter-spacing: 1.5px;
  text-shadow: 0 0 2px rgba(102, 204, 0, 0.5);
}

.fx-fader-item:nth-child(14) .fader-label {
  font-family: 'Brush Script MT', cursive;
  font-size: 16px;
  color: #ff3300;
  transform: rotate(-1deg);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.fx-fader-item:nth-child(15) .fader-label {
  font-family: 'Bookman Old Style', serif;
  font-weight: bold;
  font-size: 14px;
  color: #0099cc;
  text-transform: capitalize;
}

.fx-fader-item:nth-child(16) .fader-label {
  font-family: 'Garamond', serif;
  letter-spacing: 0.5px;
  font-size: 15px;
  color: #cc6600;
  font-style: italic;
  text-shadow: 0 0 2px rgba(204, 102, 0, 0.5);
}

.fx-fader-item:nth-child(17) .fader-label {
  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
  color: #9900cc;
  letter-spacing: 0.5px;
  text-shadow: 0 0 3px rgba(153, 0, 204, 0.4);
}

/* Animations for special fader labels */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

@keyframes stutter {
  0%, 100% { opacity: 1; transform: translateX(0); }
  25% { opacity: 0.7; transform: translateX(-2px); }
  50% { opacity: 0.9; transform: translateX(3px); }
  75% { opacity: 0.8; transform: translateX(-3px); }
}

@keyframes neonGlow {
  0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6; }
  50% { text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px #0073e6, 0 0 15px #0073e6; }
}

@keyframes flip {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(360deg); }
}

@keyframes letterShuffle {
  0%, 100% { letter-spacing: normal; }
  50% { letter-spacing: 2px; }
}

/* Special fader label effects - activated based on fader value */
.fx-fader-label.stutter-active {
  animation: stutter 0.2s infinite;
}

.fx-fader-label.wavy-active {
  animation: wiggle 2s infinite;
}

.fx-fader-label.flip-active {
  animation: flip 1s;
}

.fx-fader-label.rise-active {
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff0080, 0 0 20px #ff0080;
}

.fx-fader-label.filter-active {
  opacity: 0.5;
}

.fx-fader-label.delay-active {
  position: relative;
}

.fx-fader-label.delay-active::after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  top: 2px;
  color: rgba(255, 255, 255, 0.3);
  z-index: -1;
}

.fx-fader-label.music-flip-active {
  transform: scale(-1, 1);
}

.fx-fader-value {
  font-size: 9px;
  color: #fff;
  margin-bottom: 4px;
  text-align: center;
  min-height: 12px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 2px 2px;
  border-radius: 2px;
  width: 30px;
}

/* SP1200 LED theme */
.wild-fader-lcd .wild-fader-track {
  background: #001a00 !important;
  border: 1px solid #00ff00 !important;
  box-shadow: inset 0 0 5px #00ff00 !important;
}

.wild-fader-lcd .wild-fader-thumb {
  background-color: #00ff00 !important;
  box-shadow: 0 0 8px #00ff00 !important;
}

.wild-fader-lcd .wild-fader-label {
  color: #00ff00 !important;
  text-shadow: 0 0 5px #00ff00 !important;
}

.buttons-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faders-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  padding-top: 8px;
}

.fx-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.2s;
  padding: 2px;
  min-width: 50px;
  max-width: 100px;
}

.fx-control h3 {
  font-size: 15px;
  margin: 0 0 2px 0;
  text-align: center;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.8);
}

/* Fader container styling */
.fader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100px; /* Fixed height for faders */
}

.fx-control:hover {
  transform: translateY(-1px);
}

.fx-menu {
  background: rgba(24, 24, 32, 0.95);
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(96, 96, 128, 0.3);
  z-index: 1000;
}

.fx-control h3 {
  margin: 0 0 6px 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: #ccc;
  text-align: center;
}

/* XY Pad Styling */
.xy-pad-container {
  width: 100%;
  height: 100px;
  background: #222;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  border: none;
}

.xy-pad-marker {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #8A2BE2;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.8);
  z-index: 2;
}

.xy-pad-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* Toggle Button Styling - 3D Mechanical Style */
@keyframes ledBlink {
  0% { opacity: 0.4; box-shadow: 0 0 2px #ff3300, 0 0 4px #ff3300; }
  50% { opacity: 1; box-shadow: 0 0 4px #ff3300, 0 0 8px #ff3300, 0 0 12px #ff5500; }
  100% { opacity: 0.4; box-shadow: 0 0 2px #ff3300, 0 0 4px #ff3300; }
}

.fx-toggle-button {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #3a3a3a, #252525);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.15s ease;
}

/* LED indicator */
.fx-toggle-button::before {
  content: '';
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ff3300;
  animation: ledBlink 1.5s infinite;
}

.fx-toggle-button:hover {
  background: linear-gradient(to bottom, #454545, #303030);
  transform: translateY(-1px);
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.fx-toggle-button:active, .fx-toggle-button.active {
  transform: translateY(1px);
  background: linear-gradient(to bottom, #252525, #1a1a1a);
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.2),
    inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.fx-toggle-button.active::before {
  display: block;
}

.toggle-knob {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ddd;
  transition: transform 0.3s ease;
}

.fx-toggle-button.active .toggle-knob {
  transform: scale(1.1);
}

/* Rotary Dial Styling */
.fx-rotary-container {
  width: 60px;
  height: 60px;
  position: relative;
  cursor: pointer;
}

.fx-rotary-dial {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #444, #222);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 2px 3px rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s;
}

.fx-rotary-container.active .fx-rotary-dial {
  background: linear-gradient(135deg, #8A2BE2, #6A1CB5);
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.7);
}

.rotary-indicator {
  position: absolute;
  width: 3px;
  height: 30px;
  background: white;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: bottom;
  border-radius: 3px;
}

.fx-rotary-container.active .rotary-indicator {
  transform: translateX(-50%) rotate(180deg);
}

.rotary-icon {
  color: #ddd;
  opacity: 0.7;
}

/* Fader Styles */
.fader-container {
  width: 100%;
  padding: 5px;
  position: relative;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Base Fader Styling */
.fx-fader {
  width: 100%;
  height: 30px;
  position: relative;
  background: #333;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  cursor: pointer;
  border: none;
}

.fx-fader-handle {
  position: absolute;
  height: 100%;
  background: linear-gradient(to right, #8A2BE2, #6A1CB5);
  box-shadow: 0 0 5px rgba(138, 43, 226, 0.7);
  border-radius: 4px;
  top: 0;
  left: 0;
  pointer-events: none;
  transition: width 0.1s ease;
}

.fx-value-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 0.8rem;
  font-weight: bold;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
  z-index: 2;
  pointer-events: none;
}

/* Style Variations */
.fx-fader.neon {
  background: #222;
  height: 20px;
}

.fx-fader.neon .fx-fader-handle {
  background: linear-gradient(to right, #00fffc, #00ff62);
  box-shadow: 0 0 10px rgba(0, 255, 246, 0.7);
}

.fx-fader.fire {
  background: #331800;
  height: 25px;
}

.fx-fader.fire .fx-fader-handle {
  background: linear-gradient(to right, #ff5e00, #ffbb00);
  box-shadow: 0 0 10px rgba(255, 94, 0, 0.7);
}

.fx-fader.ice {
  background: #001833;
  height: 22px;
}

.fx-fader.ice .fx-fader-handle {
  background: linear-gradient(to right, #00c6ff, #4d94ff);
  box-shadow: 0 0 10px rgba(0, 198, 255, 0.7);
}

.fx-fader.retro {
  background: #3d2b00;
  height: 18px;
  border-radius: 0;
  border: none;
}

.fx-fader.retro .fx-fader-handle {
  background: linear-gradient(to right, #ffd54f, #ffab00);
  box-shadow: none;
  border-radius: 0;
  border-right: 2px solid #222;
}

.fx-fader.gothic {
  background: #222;
  height: 24px;
}

.fx-fader.gothic .fx-fader-handle {
  background: linear-gradient(to right, #ff0077, #aa004f);
  box-shadow: 0 0 10px rgba(255, 0, 119, 0.7);
}

/* Vinyl Disc Styling */
.vinyl-container {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.vinyl-disc {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #444, #222);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s;
}

.vinyl-container.active {
  transform: scale(1.05);
}

.vinyl-container.active .vinyl-disc {
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.7);
  background: linear-gradient(135deg, #8A2BE2, #6A1CB5);
}

/* ===== UNIQUE FADER ANIMATIONS ===== */


.fx-faders-grid .fx-fader-item.fader-active .wild-fader-label {
  color: #ff0000 !important;
  font-weight: bold !important;
  text-shadow: 0 0 15px #ff0000 !important;
  font-size: 18px !important;
  background-color: rgba(255, 255, 0, 0.5) !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
}

/* All Freak - Crazy shake and color cycling */

@keyframes allFreakColorCycle {
  0% { color: #ff0000; text-shadow: 0 0 15px #ff0000; }
  16% { color: #ff8800; text-shadow: 0 0 15px #ff8800; }
  33% { color: #ffff00; text-shadow: 0 0 15px #ffff00; }
  50% { color: #00ff00; text-shadow: 0 0 15px #00ff00; }
  66% { color: #0088ff; text-shadow: 0 0 15px #0088ff; }
  83% { color: #8800ff; text-shadow: 0 0 15px #8800ff; }
  100% { color: #ff0088; text-shadow: 0 0 15px #ff0088; }
}


.fx-fader-item[data-fader-id="allFreak"].fader-active .wild-fader-label {
  animation: allFreakColorCycle 0.3s infinite !important;
  font-weight: bold !important;
  transform: scale(1.3) !important;
}

/* Drum Freak - Pulsing beat effect */
@keyframes drumFreakPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}


.fx-fader-item[data-fader-id="drumFreak"].fader-active .wild-fader-label {
  animation: drumFreakPulse 0.6s infinite;
  color: #ff3333;
  text-shadow: 0 0 8px #ff3333;
  font-weight: bold;
}

/* Focus - Blur and glow effect */
@keyframes focusBlur {
  0% { filter: blur(0px); }
  50% { filter: blur(2px); }
  100% { filter: blur(0px); }
}


.fx-fader-item[data-fader-id="focus"].fader-active .wild-fader-label {
  animation: focusBlur 1s infinite;
  color: #00ffff;
  text-shadow: 0 0 10px #00ffff;
}

/* SP1200 - Retro LCD flicker */
@keyframes sp1200Flicker {
  0%, 100% { opacity: 1; }
  98% { opacity: 1; }
  99% { opacity: 0.8; }
}


.fx-fader-item[data-fader-id="sp1200"].fader-active .wild-fader-label {
  animation: sp1200Flicker 0.1s infinite;
  color: #00ff00;
  text-shadow: 0 0 5px #00ff00;
  font-family: 'Courier New', monospace;
}

/* Whoa - Expanding ripple effect */

@keyframes whoaBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}


.fx-fader-item[data-fader-id="whoa"].fader-active .wild-fader-label {
  animation: whoaBounce 0.5s infinite;
  color: #ff6600;
  text-shadow: 0 0 8px #ff6600;
  font-weight: bold;
}

/* Stutter - Rapid jitter effect */

@keyframes stutterFlash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.7; }
}


.fx-fader-item[data-fader-id="stutter"].fader-active .wild-fader-label {
  animation: stutterFlash 0.1s infinite;
  color: #ff00ff;
  text-shadow: 0 0 6px #ff00ff;
}

/* Music Flip - 3D flip animation */
@keyframes musicFlip3D {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes musicFlipColor {
  0%, 100% { color: #ffaa00; }
  50% { color: #00aaff; }
}


.fx-fader-item[data-fader-id="musicFlip"].fader-active .wild-fader-label {
  animation: musicFlip3D 1s infinite, musicFlipColor 1s infinite;
  text-shadow: 0 0 8px currentColor;
  font-weight: bold;
}

/* Music Chop - Slice effect */
@keyframes musicChopSlice {
  0%, 100% { clip-path: inset(0% 0% 0% 0%); }
  25% { clip-path: inset(0% 0% 50% 0%); }
  50% { clip-path: inset(50% 0% 0% 0%); }
  75% { clip-path: inset(0% 50% 0% 0%); }
}

@keyframes musicChopGlitch {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

.fx-fader-item[data-fader-id="musicChop"].fader-active .wild-fader-label {
  animation: musicChopSlice 0.2s infinite, musicChopGlitch 0.1s infinite;
  color: #ff3300;
  text-shadow: 2px 0 #00ff00, -2px 0 #0033ff;
}

/* Music FX - Swirl effect */
@keyframes musicFxSwirl {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes musicFxHue {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.fx-fader-item[data-fader-id="musicFx"].fader-active .wild-fader-label {
  animation: musicFxSwirl 2s infinite, musicFxHue 3s infinite;
  color: #8800ff;
  text-shadow: 0 0 10px #8800ff;
}

/* Slow Down - Stretching effect */
@keyframes slowDownStretch {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.3); }
}

@keyframes slowDownFade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.fx-fader-item[data-fader-id="slowDown"].fader-active .wild-fader-label {
  animation: slowDownStretch 2s infinite, slowDownFade 2s infinite;
  color: #0066cc;
  text-shadow: 0 0 8px #0066cc;
}

/* Wavy - Wave motion */
@keyframes wavyWave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(1deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(3px) rotate(-1deg); }
}

@keyframes wavyFlow {
  0% { text-shadow: 0 0 5px #00ffaa; }
  50% { text-shadow: 0 0 15px #00ffaa, 0 0 25px #00ffaa; }
  100% { text-shadow: 0 0 5px #00ffaa; }
}

.fx-fader-item[data-fader-id="wavy"].fader-active .wild-fader-label {
  animation: wavyWave 1s infinite, wavyFlow 2s infinite;
  color: #00ffaa;
}

/* Delay - Echo effect */
@keyframes delayEcho {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(10px); opacity: 0; }
}

.fx-fader-item[data-fader-id="delay"].fader-active .wild-fader-label {
  position: relative;
  color: #ffaa00;
  text-shadow: 0 0 8px #ffaa00;
}

.fx-fader-item[data-fader-id="delay"].fader-active .wild-fader-label::after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  top: 0;
  animation: delayEcho 0.5s infinite;
  opacity: 0.5;
  z-index: -1;
}

/* Filter - Pixelation effect */
@keyframes filterPixelate {
  0%, 100% { filter: blur(0px); }
  50% { filter: blur(1px); }
}

@keyframes filterDim {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.fx-fader-item[data-fader-id="filter"].fader-active .wild-fader-label {
  animation: filterPixelate 0.5s infinite, filterDim 1s infinite;
  color: #666666;
  text-shadow: 0 0 5px #666666;
}

/* Rise - Ascending glow */
@keyframes riseAscend {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-10px) scale(1.2); }
}

@keyframes riseGlow {
  0% { text-shadow: 0 0 5px #ffff00; }
  100% { text-shadow: 0 0 20px #ffff00, 0 0 30px #ffff00, 0 0 40px #ffff00; }
}

.fx-fader-item[data-fader-id="rise"].fader-active .wild-fader-label {
  animation: riseAscend 0.5s infinite alternate, riseGlow 0.5s infinite alternate;
  color: #ffff00;
  font-weight: bold;
}

/* Drown Out - Sinking effect */
@keyframes drownSink {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(5px) scale(0.9); opacity: 0.6; }
}


.fx-fader-item[data-fader-id="drownOut"].fader-active .wild-fader-label {
  animation: drownSink 1s infinite alternate;
  color: #0066cc;
  text-shadow: 0 0 8px #0066cc;
}

/* Flange - Sweep effect */
@keyframes flangeSweep {
  0% { transform: skewX(0deg); }
  50% { transform: skewX(5deg); }
  100% { transform: skewX(0deg); }
}


.fx-fader-item[data-fader-id="flange"].fader-active .wild-fader-label {
  animation: flangeSweep 1s infinite;
  color: #ff8800;
  text-shadow: 0 0 8px #ff8800;
}

/* Chip Monk - 8-bit style */
@keyframes chipMonkPixel {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes chipMonkBlink {
  0%, 90%, 100% { opacity: 1; }
  95% { opacity: 0; }
}


.fx-fader-item[data-fader-id="chipMonk"].fader-active .wild-fader-label {
  animation: chipMonkPixel 0.3s infinite, chipMonkBlink 2s infinite;
  color: #00ff88;
  text-shadow: 2px 2px 0 #004422;
  font-family: 'Courier New', monospace;
  font-weight: bold;
}

/* Pitch Down - Descending effect */
@keyframes pitchDownDescend {
  0% { transform: translateY(0) scaleY(1); }
  100% { transform: translateY(3px) scaleY(0.8); }
}

@keyframes pitchDownDeepen {
  0% { filter: contrast(1) brightness(1); }
  100% { filter: contrast(1.2) brightness(0.8); }
}

.fx-fader-item[data-fader-id="pitchDown"].fader-active .wild-fader-label {
  animation: pitchDownDescend 0.8s infinite alternate, pitchDownDeepen 0.8s infinite alternate;
  color: #cc3300;
  text-shadow: 0 0 8px #cc3300;
  font-weight: bold;
}
.sample-suggestor-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at top, rgba(40,10,60,0.55), rgba(0,0,0,0.85));
  backdrop-filter: blur(14px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.sample-suggestor-modal {
  width: min(1200px, 100%);
  height: min(880px, 92vh);
  background: linear-gradient(160deg, #15161d 0%, #1c1a26 55%, #221726 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset;
  display: flex; flex-direction: column;
  overflow: hidden;
  color: #f1eef9;
}

.ss-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
}
.ss-header-title { display: flex; align-items: baseline; gap: 12px; font-size: 18px; font-weight: 700; letter-spacing: 0.4px; }
.ss-header-emoji { font-size: 24px; transform: translateY(2px); }
.ss-header-sub { color: rgba(255,255,255,0.45); font-size: 12px; font-weight: 400; letter-spacing: 0.6px; text-transform: uppercase; }
.ss-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff; width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 14px;
  transition: background 0.2s;
}
.ss-close:hover { background: rgba(255,80,120,0.3); }

.ss-tabs {
  display: flex; gap: 6px; padding: 8px 24px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ss-tab-btn {
  position: relative;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  padding: 14px 18px 16px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: color 0.2s;
}
.ss-tab-btn:hover { color: #fff; }
.ss-tab-btn.active { color: #fff; }
.ss-tab-icon { font-size: 18px; }
.ss-tab-underline {
  position: absolute; bottom: -1px; left: 14px; right: 14px;
  height: 3px;
  background: linear-gradient(90deg, #ff45a3, #8b5cf6, #00c9a2);
  border-radius: 3px;
}

.ss-body {
  flex: 1; overflow-y: auto;
  padding: 22px 28px 32px;
  position: relative;
}

.ss-tab-panel { display: none; min-height: 100%; }
.ss-tab-panel.active { display: block; }
.ss-tab {
  min-height: 100%;
}

.ss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
}

.ss-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: border-color 0.2s;
}
.ss-card:hover { border-color: rgba(139,92,246,0.55); }
.ss-card-art {
  aspect-ratio: 1;
  background: #2a2434 center/cover no-repeat;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.ss-card-art-placeholder {
  font-size: 48px; font-weight: 800; color: rgba(255,255,255,0.4);
}
.ss-card-play {
  position: absolute; right: 10px; bottom: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.2s;
}
.ss-card:hover .ss-card-play, .ss-card-play.playing { opacity: 1; }
.ss-card-meta { padding: 10px 12px 4px; }
.ss-card-artist { font-size: 12px; color: rgba(255,255,255,0.55); margin-bottom: 2px; }
.ss-card-title { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-card-sub { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 4px; }
.ss-card-pick {
  margin: 8px 10px 10px;
  padding: 8px;
  background: linear-gradient(90deg, #ff45a3, #8b5cf6);
  border: none; color: #fff;
  border-radius: 8px;
  font-weight: 600; font-size: 12px;
  cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.5px;
  transition: transform 0.15s;
}
.ss-card-pick:hover { transform: translateY(-1px); }

.ss-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ss-chiprow-sticky {
  position: sticky;
  top: -22px;
  z-index: 5;
  padding: 12px 0 14px;
  margin-top: -12px;
  background: linear-gradient(180deg, rgba(21,22,29,0.98) 0%, rgba(21,22,29,0.94) 72%, rgba(21,22,29,0) 100%);
  backdrop-filter: blur(12px);
}
.ss-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
}
.ss-chip:hover { color: #fff; border-color: rgba(139,92,246,0.4); }
.ss-chip.active {
  background: linear-gradient(90deg, rgba(255,69,163,0.25), rgba(139,92,246,0.25));
  color: #fff;
  border-color: rgba(255,69,163,0.6);
}
.ss-chip-emoji-icon { margin-right: 6px; }

.ss-err { color: #ff7a8c; font-size: 13px; padding: 12px 0; }
.ss-loading { color: rgba(255,255,255,0.5); font-size: 13px; padding: 12px 0; font-style: italic; }
.ss-loading-center {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.76);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ss-section-label {
  margin: 14px 0 10px;
  color: rgba(255,255,255,0.58);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ss-search-track-grid { margin-bottom: 18px; }

.ss-playlist-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin: -4px 0 18px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  background: rgba(0,0,0,0.2);
  color: #fff;
  text-decoration: none;
}
.ss-playlist-banner:hover {
  border-color: rgba(0,201,162,0.42);
  background: rgba(0,201,162,0.08);
}
.ss-playlist-art {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #2a2434 center/cover no-repeat;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}
.ss-playlist-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ss-playlist-kicker {
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ss-playlist-name {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

/* Globe tab */
.ss-tab-globe {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  isolation: isolate;
}
.ss-tab-globe.has-country-theme::before {
  content: "";
  position: absolute;
  inset: -22px -28px -32px;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,13,18,0.18), rgba(12,13,18,0.72)),
    radial-gradient(circle at 50% 15%, rgba(0,201,162,0.2), transparent 44%),
    var(--ss-country-bg);
  background-position: center;
  background-size: cover;
  filter: saturate(1.1);
  opacity: 0.58;
}
.ss-decade-controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.ss-decade-btn {
  min-width: 62px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.ss-decade-btn:hover {
  border-color: rgba(0,201,162,0.45);
  color: #fff;
}
.ss-decade-btn.active {
  background: linear-gradient(135deg, rgba(0,201,162,0.28), rgba(255,69,163,0.18));
  border-color: rgba(0,201,162,0.65);
  color: #fff;
  box-shadow: 0 0 18px rgba(0,201,162,0.18);
}
.ss-globe-wrap { position: relative; width: 100%; display: flex; justify-content: center; }
.ss-globe-iframe {
  width: 540px; height: 540px; max-width: 100%;
  border: none; border-radius: 16px;
  background: #e4e5e6;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.ss-globe-readout {
  position: absolute; left: 20px; top: 20px;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 200px;
}
.ss-globe-readout-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255,255,255,0.5); }
.ss-globe-readout-name { font-size: 18px; font-weight: 700; margin-top: 2px; color: #fff; }

.ss-globe-loading {
  position: absolute;
  inset: 0;
  min-height: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0,0,0,0.45), rgba(0,0,0,0.08) 58%, transparent);
}
.ss-globe-pull-btn {
  min-width: min(320px, 100%);
  min-height: 42px;
  border: 1px solid rgba(0,201,162,0.5);
  border-radius: 999px;
  background: rgba(0,201,162,0.12);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
}
.ss-globe-pull-btn:hover:not(:disabled) {
  background: rgba(0,201,162,0.2);
  border-color: rgba(0,201,162,0.75);
}
.ss-globe-pull-btn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  box-shadow: none;
}
.ss-globe-result { width: 240px; margin-top: 8px; }

.ss-more-card {
  min-height: 150px;
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.8);
  border-radius: 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ss-more-card:hover:not(:disabled) {
  border-color: rgba(0,201,162,0.6);
  color: #fff;
  background: rgba(0,201,162,0.08);
}
.ss-more-card:disabled { opacity: 0.55; cursor: wait; }

/* Artists */
.ss-tab-artists {
  position: relative;
  isolation: isolate;
}
.ss-tab-artists.has-artist-theme::before {
  content: "";
  position: absolute;
  inset: -22px -28px -32px;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,13,18,0.2), rgba(12,13,18,0.82)),
    radial-gradient(circle at 16% 12%, rgba(255,69,163,0.18), transparent 38%),
    var(--ss-artist-bg);
  background-position: center;
  background-size: cover;
  filter: saturate(1.1);
  opacity: 0.58;
}
.ss-search {
  width: 100%;
  padding: 12px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 18px;
  outline: none;
}
.ss-search:focus { border-color: rgba(139,92,246,0.6); }
.ss-tab-artists .ss-search {
  position: sticky;
  top: -22px;
  z-index: 6;
  background: rgba(21,22,29,0.96);
  backdrop-filter: blur(12px);
}
.ss-artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.ss-artist-wrap { display: contents; }
.ss-artist-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  padding-bottom: 10px;
  transition: border-color 0.2s;
}
.ss-artist-card:hover { border-color: rgba(255,69,163,0.5); }
.ss-artist-photo {
  aspect-ratio: 1;
  background: #2a2434 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.ss-artist-photo-fallback {
  color: rgba(255,255,255,0.38);
  font-size: 46px;
  font-weight: 900;
}
.ss-artist-name { padding: 10px 12px 2px; font-weight: 600; color: #fff; font-size: 14px; }
.ss-artist-genres { padding: 0 12px; font-size: 11px; color: rgba(255,255,255,0.4); text-transform: capitalize; }
.ss-artist-tracks {
  grid-column: 1 / -1;
  background: rgba(0,0,0,0.25);
  border-radius: 12px;
  padding: 16px;
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  overflow: hidden;
}
.sampler-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sampler-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(90deg, #ff45a3, #8b5cf6, #00c9a2);
  background-size: 200% 100%;
  border: none;
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.35);
  transition: background-position 0.6s ease, transform 0.15s ease, box-shadow 0.2s;
}
.sampler-search-btn:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 69, 163, 0.45);
}
.sampler-search-icon { font-size: 15px; }
.sampler-search-label { letter-spacing: 0.6px; }

:root {
  --sampler-menu-top: 470px; /* Match Recipes menu */
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #d2b48c;
  --scrollbar-thumb-hover: #c19a65;
  --scrollbar-width: 8px;
}

/* Custom scrollbar for WebKit browsers (Chrome, Safari, etc.) */
.sampler-menu-container::-webkit-scrollbar,
.sampler-pads::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

.sampler-menu-container::-webkit-scrollbar-track,
.sampler-pads::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}

.sampler-menu-container::-webkit-scrollbar-thumb,
.sampler-pads::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.sampler-menu-container::-webkit-scrollbar-thumb:hover,
.sampler-pads::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Custom scrollbar for Firefox */
.sampler-menu-container,
.sampler-pads {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.sampler-menu-container *,
.sampler-pads * {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.sampler-menu-container {
  position: fixed;
  left: 120px;
  top: var(--sampler-menu-top);
  bottom: 0;
  width: calc(100% - 120px);
  background-color: #111111;
  color: #fff;
  padding: 0 0 12px 0; /* Remove top/side padding so LCD is flush */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  z-index: 200;
  border-top: 2px solid #d2b48c;
  border-left: 2px solid #d2b48c;
  border-right: 2px solid #d2b48c;
  box-sizing: border-box;
}

.sampler-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px;
  background-color: #333;
  border-bottom: 1px solid #444;
}

.sampler-header h2 {
  color: #d2b48c; /* Akai MPC tan */
  margin: 0;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sampler-close-btn {
  background: none;
  border: none;
  color: #d2b48c;
  font-size: 24px;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}

.sampler-close-btn:hover {
  color: #fff;
}

.sampler-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0; /* Remove padding here, add to inner sections instead */
  overflow: hidden;
  flex: 1;
  min-height: 0;
  min-width: 0;
  margin-top: 0;
}

.sampler-main-layout {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  padding: 8px; /* Add padding back to the main layout content */
}

.pitch-fader-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70px;
  min-width: 70px;
  padding: 0 10px;
  background: #232323;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  margin-right: 10px;
}

.pitch-fader-label {
  color: #d2b48c;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.pitch-buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 200px;
  position: relative;
}

.pitch-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d2b48c 0%, #a67c52 100%);
  border: 2px solid #888;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  color: #333;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.1s ease;
  outline: none;
}

.pitch-btn:hover {
  background: linear-gradient(135deg, #e6c9a8 0%, #ba8c5d 100%);
  transform: scale(1.05);
}

.pitch-btn:active {
  background: linear-gradient(135deg, #ba8c5d 0%, #8c6d45 100%);
  transform: scale(0.95);
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.pitch-fader-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #b0b0b0 70%, #e0e0e0 100%);
  border: 2px solid #555;
  box-shadow: 0 2px 8px #0008, inset 0 0 6px #fff8;
  position: relative;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pitch-fader-slider::-webkit-slider-thumb::before {
  content: '';
  display: block;
  width: 20px;
  height: 4px;
  background: repeating-linear-gradient(90deg, #888, #888 2px, #bbb 2px, #bbb 4px);
  border-radius: 2px;
  position: absolute;
  left: 6px;
  top: 14px;
}

.pitch-fader-slider::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #b0b0b0 70%, #e0e0e0 100%);
  border: 2px solid #555;
  box-shadow: 0 2px 8px #0008, inset 0 0 6px #fff8;
  position: relative;
  cursor: grab;
}

.pitch-fader-slider::-moz-range-thumb::before {
  content: '';
  display: block;
  width: 20px;
  height: 4px;
  background: repeating-linear-gradient(90deg, #888, #888 2px, #bbb 2px, #bbb 4px);
  border-radius: 2px;
  position: absolute;
  left: 6px;
  top: 14px;
}

.pitch-fader-value {
  font-size: 16px;
  font-weight: bold;
  color: #d2b48c;
  text-shadow: 0 1px 2px #000;
  margin: 15px 0;
  background: rgba(0, 0, 0, 0.3);
  padding: 5px 10px;
  border-radius: 10px;
  text-align: center;
}

.time-controls {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 14px;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative; /* For positioning the close button */
}

.time-btn {
  background: linear-gradient(145deg, #444, #222 80%);
  color: #d2b48c;
  border: 2px solid #d2b48c;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 2px 8px #0004, inset 0 1px 2px #fff2;
  letter-spacing: 0.5px;
  min-width: 60px;
  min-height: 28px;
}

.time-btn:hover, .time-btn:focus {
  background: linear-gradient(145deg, #d2b48c, #b8860b 80%);
  color: #222;
  border-color: #ffd700;
  outline: none;
}

.auto-chop-btn {
  /* Matched to .toggle-btn style */
  background: linear-gradient(to bottom, #333, #222);
  color: white;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block; /* Prevent full width span */
  width: auto; /* Adjust width based on content */
  margin-bottom: 10px; /* Space from LCD below */
}

.auto-chop-btn.active, .auto-chop-btn:active {
  background: linear-gradient(to bottom, #d2b48c, #c9a06f); /* Active state like .toggle-btn.active */
  color: #333; /* Darker text for active state */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
  border-color: #b8860b; /* Keep a distinct border for active */
}

.auto-chop-btn:focus {
  outline: 1px solid #d2b48c;
  outline-offset: 1px;
}

.lcd-menu-item {
  cursor: pointer;
  transition: background-color 0.1s, color 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 3px 5px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.3;
  position: relative;
}

.lcd-menu-title-line {
  position: relative;
  padding-right: 50px; /* Make room for the close button */
}

/* Style for close/off buttons in title bar */
.lcd-menu-close {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  z-index: 2;
  text-transform: uppercase;
}

.lcd-menu-close:hover {
  background: rgba(0, 0, 0, 0.3);
  color: #000;
}

.lcd-menu-item:hover:not(.selected) {
  background-color: rgba(0, 0, 0, 0.2);
  color: #000;
}

.lcd-menu-item.selected {
  background-color: #000 !important; /* Force override any other background */
  color: #7a9c0f;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.lcd-menu-item.selected::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border: 1px solid #7a9c0f;
  border-radius: 2px;
  pointer-events: none;
  z-index: -1;
}

.lcd-menu-item.selected::after {
  content: ' <';
  color: #7a9c0f;
  font-weight: bold;
  margin-left: 4px;
}

.sampler-left-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  gap: 10px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.button-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  justify-content: flex-start;
  margin: 8px 0 6px 0;
}

.control-btn {
  position: relative;
  background: linear-gradient(145deg, #444, #222 80%);
  color: #d2b48c;
  border: 2px solid #d2b48c;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 2px 8px #0004, inset 0 1px 2px #fff2;
  letter-spacing: 0.5px;
  min-width: 80px;
  min-height: 28px;
  white-space: nowrap;
  flex: 1;
  width: 100px; /* Fixed width for all buttons */
  max-width: 100px; /* Same max-width for consistency */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 8px; /* Reset left padding for centered text */
}

.led {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #333;
  border: 1px solid #555;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.led.active {
  background-color: #f00;
  box-shadow: 0 0 10px #f00, 0 0 20px #f00, inset 0 0 5px rgba(255, 0, 0, 0.8);
  animation: blink 1s infinite alternate;
}

@keyframes blink {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

.control-btn:hover, .control-btn:focus {
  background: linear-gradient(145deg, #d2b48c, #b8860b 80%);
  color: #222;
  border-color: #ffd700;
  outline: none;
}

.control-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}

.sampler-pad-section {
  display: flex;
  flex: 1;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 10px;
  min-width: 300px;
}

.pitch-control {
  width: 60px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

.pitch-slider-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 10px;
}

.pitch-slider-outer {
  width: 30px;
  height: 200px;
  padding: 10px 0;
  position: relative;
}

.pitch-slider {
  /* Modern approach for vertical sliders */
  writing-mode: vertical-lr;
  direction: rtl;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
}

/* Track styling */
.pitch-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 100%;
  background: #2a2a2a;
  border-radius: 4px;
  border: 1px solid #444;
}

.pitch-slider::-moz-range-track {
  width: 100%;
  height: 100%;
  background: #2a2a2a;
  border-radius: 4px;
  border: 1px solid #444;
}

/* Thumb styling */
.pitch-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #d2b48c;
  cursor: pointer;
  margin-top: -12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
}

.pitch-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #d2b48c;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
}

.pitch-value {
  font-size: 14px;
  font-weight: bold;
  color: #d2b48c;
  margin-bottom: 5px;
  min-height: 20px;
}

/* LCD Display styling */
.sampler-lcd {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  width: 100%;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  margin-bottom: 8px;
}

.sampler-lcd .lcd-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
  background-color: #7a9c0f;
  border: none;
  box-shadow: none;
}

.sampler-lcd .lcd-line {
  color: #000;
  font-family: "Courier New", monospace;
  font-weight: bold;
  padding: 0;
  line-height: 1.2;
  min-height: 0;
  display: flex;
  align-items: center;
  background-color: transparent;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sampler-lcd .lcd-menu-title-line {
  text-align: center;
  font-weight: bold;
  color: #000;
  margin: 0;
  padding: 6px 8px;
  font-family: "Courier New", monospace;
  font-size: 20px;
  text-shadow: none;
  background-color: transparent;
  border-radius: 0;
  border-bottom: none;
}

.lcd-scrollable-options {
  background-color: transparent;
  position: relative;
  color: #000;
  font-family: "Courier New", monospace;
  border-radius: 0;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  padding: 4px 2px;
  font-weight: bold;
  max-height: 120px; /* Increased height for better scrolling */
  overflow-y: auto;
  border-radius: 3px;
  box-shadow: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 8px;
  min-height: 70px;
  align-content: start;
  font-size: 12px;
}

.lcd-off-button {
  /* This will place it in the 4th column of the 2nd row if the grid has 8 slots */
  /* If the grid auto-sizes rows, this might just appear as the last item. */
  /* For explicit positioning in a 2x4 grid (8th cell): */
  grid-column: 4 / span 1; /* Occupy the 4th column */
  grid-row: 2 / span 1;    /* Occupy the 2nd row */
  justify-self: end; /* Align to the end (right) of its grid cell */
  align-self: end; /* Align to the end (bottom) of its grid cell */
}

/* Controls styling */
.jump-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background-color: #2a2a2a;
  border-radius: 6px;
  border: 1px solid #444;
  width: 100%;
  box-sizing: border-box;
}

.sample-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  width: 100%;
}

.sample-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 5px;
}

.sample-btn, .save-btn {
  flex: 1;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 1px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sample-btn {
  background: linear-gradient(145deg, #d2b48c, #b8860b);
  color: #222;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.save-delete-group {
  display: flex;
  gap: 2px;
  flex: 1;
}

.save-btn {
  background: linear-gradient(145deg, #7a9c0f, #5a7a0f);
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.2s;
  flex: 1;
}

.delete-btn {
  background: linear-gradient(145deg, #444, #333);
  color: #fff;
  padding: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.delete-btn.active {
  background: linear-gradient(145deg, #d63031, #c0392b) !important;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.delete-btn:hover {
  background: linear-gradient(145deg, #d63031, #c0392b);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.delete-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.save-btn.active {
  background: linear-gradient(145deg, #9cbf1f, #7a9c0f);
  box-shadow: 0 0 10px rgba(122, 156, 15, 0.7);
  color: #fff;
}

.sample-btn:hover {
  background: linear-gradient(145deg, #ffd700, #d2b48c);
  transform: translateY(-1px);
}

.save-btn:hover {
  background: linear-gradient(145deg, #8ab51e, #6a9510);
  transform: translateY(-1px);
}

.sample-btn:active, .save-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ── Kit name line (ASR-10 style) ─────────────────────────── */
.kit-load-btn {
  background: linear-gradient(145deg, #2a6496, #1a4a72) !important;
}
.kit-load-btn:hover {
  background: linear-gradient(145deg, #3a74a6, #2a5a82) !important;
  transform: translateY(-1px);
}

.kit-line {
  display: flex;
  align-items: center;
  width: 100%;
  height: 22px;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 3px;
  padding: 0 8px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #d2b48c;
  overflow: hidden;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.kit-line-display {
  color: #d2b48c;
  font-weight: bold;
  letter-spacing: 1px;
}

.kit-line-edit {
  color: #ffd700;
  display: flex;
  align-items: center;
}

.kit-line-name {
  color: #fff;
  letter-spacing: 1px;
  min-width: 8ch;
}

.kit-line-cursor {
  color: #ffd700;
  animation: kit-blink 0.7s step-end infinite;
  font-size: 10px;
}

@keyframes kit-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.kit-line-overwrite {
  color: #ff6b35;
  display: flex;
  align-items: center;
  gap: 2px;
}

.kit-line-yes, .kit-line-no {
  cursor: pointer;
  font-weight: bold;
  padding: 0 2px;
}
.kit-line-yes { color: #7bc67e; }
.kit-line-yes:hover { text-decoration: underline; }
.kit-line-no { color: #e07474; }
.kit-line-no:hover { text-decoration: underline; }

.kit-line-load {
  display: flex;
  align-items: center;
  color: #a8d8ea;
  width: 100%;
  justify-content: space-between;
}

.kit-nav-btn {
  cursor: pointer;
  color: #d2b48c;
  font-size: 13px;
  padding: 0 4px;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.kit-nav-btn:hover { color: #ffd700; }
/* ── end kit line ─────────────────────────────────────────── */

.jump-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 5px;
}

.jump-buttons {
  display: flex;
  gap: 4px;
}

.jump-btn {
  background: linear-gradient(145deg, #444, #222);
  color: #d2b48c;
  border: 1px solid #555;
  border-radius: 4px;
  width: 40px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.jump-btn:hover {
  background: linear-gradient(145deg, #555, #333);
  color: #fff;
  border-color: #d2b48c;
}

.jump-btn:active {
  transform: translateY(1px);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.jump-label {
  color: #d2b48c;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 15px;
  min-width: 40px;
  text-align: center;
}

.time-controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px;
  background-color: #2a2a2a;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
}

.time-btn {
  background: linear-gradient(145deg, #444, #222 80%);
  color: #d2b48c;
  border: 2px solid #d2b48c;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 2px 8px #0004, inset 0 1px 2px #fff2;
  letter-spacing: 0.5px;
  min-width: 100px;
  height: 36px;
  white-space: nowrap;
}

.time-btn:hover {
  background: linear-gradient(145deg, #d2b48c, #b8860b 80%);
  color: #222;
  border-color: #ffd700;
}

.time-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px #0004, inset 0 1px 2px #fff2;
}

/* Mute Controls */
.mute-controls {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  background-color: #2a2a2a;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
}

.mute-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  color: #aaa;
  flex: 1;
  min-width: 0;
  position: relative;
  height: auto;
  margin: 0 2px;
}

.mute-btn:hover .mute-btn-inner {
  background: linear-gradient(145deg, #444, #333);
  border-color: #d2b48c;
}

.mute-btn.active .mute-btn-inner {
  background: linear-gradient(145deg, #d2b48c, #b8860b);
  border-color: #ffd700;
  box-shadow: 0 0 10px rgba(210, 180, 140, 0.5);
  color: #000;
}

.mute-btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.mute-btn-inner {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #3a3a3a, #2d2d2d);
  border: 1px solid #444;
  border-radius: 6px;
  transition: all 0.2s;
  margin-bottom: 2px;
  overflow: hidden;
  position: relative;
}

.mute-icon {
  transition: all 0.2s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.mute-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.mute-btn:active .mute-icon {
  transform: scale(0.9);
}

.mute-label {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  white-space: normal;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  color: #d2b48c;
  padding: 3px 0 0;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}

.mute-btn-inner {
  z-index: 1;
}

.mute-label {
  z-index: 2;
}

.time-controls-inline {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}

.time-controls-inline .time-btn {
  min-width: 0;
  width: auto;
  padding: 4px 8px;
  height: 28px;
  font-size: 11px;
}

.lcd-line {
  color: #000;
  font-family: "Courier New", monospace;
  font-weight: bold;
  padding: 0;
  line-height: 1.2;
  min-height: 0;
  display: flex;
  align-items: center;
  background-color: transparent;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  justify-content: center;
}

.lcd-os-version {
  font-size: 15px;
  color: #000;
  font-weight: bold;
}

.lcd-sample-title {
  font-size: 14px;
  color: #000;
  font-weight: normal;
}

.lcd-os-version,
.lcd-sample-title,
.lcd-menu-title-line,
.lcd-scrollable-options {
  padding: 6px 8px;
}

/* Sample Input Mode */
.lcd-input-mode {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  padding: 8px 10px;
  background-color: #7a9c0f;
  color: #000;
  font-family: 'Courier New', monospace;
}

.lcd-sample-title {
  font-weight: bold;
  text-align: center;
  margin: 0 0 4px 0;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.lcd-input-line {
  padding: 4px 8px;
  margin: 4px 0 8px 0;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
  font-size: 14px;
  min-height: 20px;
}

.lcd-input-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 4px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.lcd-input-footer .lcd-menu-item {
  padding: 4px 8px;
  margin: 0;
  cursor: pointer;
  color: #d2b48c;
  font-weight: bold;
  font-size: 13px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  transition: all 0.15s;
  position: relative;
  background: none;
  border: none;
  border-radius: 2px;
  text-align: center;
}

.lcd-input-footer .lcd-menu-item:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
}

.lcd-input-footer .lcd-menu-item:active {
  transform: translateY(1px);
  background: rgba(0, 0, 0, 0.3);
}

.lcd-footer-left {
  text-transform: capitalize;
}

.lcd-footer-right {
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes blinkPad {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

@keyframes blinkDelete {
  0% { 
    opacity: 1;
    background: linear-gradient(145deg, #d63031, #c0392b);
  }
  50% { 
    opacity: 0.7;
    background: linear-gradient(145deg, #e74c3c, #c0392b);
  }
  100% { 
    opacity: 1;
    background: linear-gradient(145deg, #d63031, #c0392b);
  }
}

.lcd-cursor {
  display: inline-block;
  width: 12px;
  height: 24px;
  background-color: #000;
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}

.control-group {
  display: flex;
  flex-direction: column;
  min-width: 80px;
  flex: 1;
}

.control-group label {
  font-size: 12px;
  margin-bottom: 4px;
  color: #d2b48c; /* Akai MPC tan */
  font-weight: bold;
}

.sampler-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  background: #555;
  border-radius: 8px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  outline: none;
}

.sampler-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #d2b48c; /* Akai MPC tan */
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sampler-slider::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #d2b48c; /* Akai MPC tan */
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border: none;
}

.param-value {
  font-size: 12px;
  margin-top: 4px;
  text-align: center;
}

.toggle-controls {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding: 10px;
  background-color: #2a2a2a;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.toggle-btn {
  background: linear-gradient(to bottom, #333, #222);
  color: white;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle-btn.active {
  background: linear-gradient(to bottom, #d2b48c, #c9a06f);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
}

/* MPC Pads styling */
.sampler-pads {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: none;
  background: #1a1a1a;
  border-radius: 10px;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.55);
  border: 1px solid #333;
  margin: 0 auto;
  flex: 1;
  overflow: hidden;
  z-index: 1;
}

.mpc-pad {
  background: linear-gradient(145deg, #444, #333);
  border: 1px solid #555;
  border-radius: 4px;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 3px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.1s ease;
  padding: 0;
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  min-height: 60px; /* Ensure minimum size for touch targets */
  aspect-ratio: 1/1; /* Keep pads square */
}

.mpc-pad::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 100%);
  border-radius: 3px;
}

.mpc-pad:hover {
  background: linear-gradient(145deg, #555, #444);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.6);
}

.mpc-pad.active {
  background: linear-gradient(145deg, #d2b48c, #c9a06f);
  transform: scale(0.98);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.mpc-pad:active {
  transform: scale(0.96);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Save mode styles */
.save-mode .mpc-pad:not(.empty) {
  opacity: 0.5;
  pointer-events: none;
}

.save-mode .mpc-pad.empty {
  animation: blinkPad 1s infinite;
}

.sampler-pads.delete-mode .mpc-pad.deletable {
  animation: blinkDelete 1s infinite;
  cursor: pointer;
}

@keyframes blink {
  from { opacity: 0.5; }
  to { opacity: 1; }
}



/* Responsive adjustments */
@media (max-width: 768px) {
  .sampler-menu-container {
    left: 0;
    width: 100%;
    height: 60vh;
  }
  
  .sampler-pads {
    gap: 8px;
    padding: 8px;
  }
  
  .control-group {
    min-width: 80px;
  }
}
 /* Retro pixel font */ .genre-selector-container {
  display: flex;
  padding: 20px;
  background-color: #1a1a1a; /* Dark background for the section */
  border-radius: 8px;
  margin-top: 20px;
  gap: 15px; /* Space between sections */
  width: 100%; /* Take full width of its container */
  box-sizing: border-box; /* Include padding in width calculation */
  justify-content: space-between;
} /* Section containers (left and right) */ .section-container {
  display: flex;
  flex-direction: column;
  width: 35%; /* Adjust as needed */
  gap: 10px;
  margin-top: -30px; /* Raise drum and melody sections on desktop */
} /* Middle section with TV and world regions */ .middle-section {
  display: flex;
  flex-direction: column;
  width: 45% !important; /* Much wider */
  gap: 15px;
  align-items: center;
  position: relative; /* For positioning nspire button */
  margin-top: 20px !important; /* Positioned between genres */
  transform: scale(1.3) !important; /* Slightly smaller but still big */
  z-index: 10;
} /* TV + VCR wrapper */ .tv-and-vcr {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
} /* Place the VCR centered under the TV without moving the TV */ .vcr-under-tv {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  margin-top: 14px;
  z-index: 50;
  pointer-events: auto;
} /* Section titles */ .section-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
  color: #ff0000; /* Red for Drum Style */
} .section-container:first-child .section-title {
  color: #ff0000; /* Red for Drum Style */
} .section-container:last-child .section-title {
  color: #ff0000; /* Red for Music Genre */
} .region-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 5px;
  text-align: center;
  color: #00ff00; /* Green for World */
} /* Grid layouts */ .genre-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns */
  grid-template-rows: repeat(6, 1fr);    /* 6 rows */
  gap: 8px; /* Slightly reduced gap */
  width: 100%;
} .region-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* 1 column */
  grid-template-rows: repeat(6, 1fr);    /* 6 rows */
  gap: 8px;
  width: 100%;
  border: 1px solid #0000ff; /* Blue border */
  border-radius: 5px;
  padding: 8px;
  background-color: #000033; /* Dark blue background */
} /* Advanced 3D Buttons */ .genre-button, .region-button, .control-button {
  all: unset;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.75);
  box-shadow: -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),
    0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: bold;
  font-family: 'Arial', sans-serif;
  text-align: center;
  word-break: break-word;
  line-height: 1.2;
} .genre-button::after, .region-button::after, .control-button::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: calc(100% + 0.3em);
  height: calc(100% + 0.3em);
  top: -0.15em;
  left: -0.15em;
  border-radius: inherit;
  background: linear-gradient(
    -135deg,
    rgba(5, 5, 5, 0.5),
    transparent 20%,
    transparent 100%
  );
  filter: blur(0.0125em);
  opacity: 0.25;
  mix-blend-mode: multiply;
} .button-outer {
  position: relative;
  z-index: 1;
  border-radius: inherit;
  transition: box-shadow 300ms ease, transform 300ms ease;
  will-change: box-shadow, transform;
  box-shadow: 0 0.1em 0.1em -0.01em rgba(5, 5, 5, 1),
    0 0.05em 0.05em -0.01em rgba(5, 5, 5, 0.7),
    0.2em 0.4em 0.2em -0.01em rgba(5, 5, 5, 0.4),
    0.3em 0.6em 0.4em -0.01em rgba(5, 5, 5, 0.2),
    0.4em 0.8em 0.6em -0.01em rgba(5, 5, 5, 0.1),
    0.6em 1em 0.8em -0.01em rgba(5, 5, 5, 0.05);
  width: 100%;
  height: 100%;
} .genre-button:hover .button-outer, 
.region-button:hover .button-outer,
.control-button:hover .button-outer {
  box-shadow: 0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5),
    0 0 0 0 rgba(5, 5, 5, 0.25);
} .button-inner {
  --inset: 0.035em;
  position: relative;
  z-index: 1;
  border-radius: inherit;
  padding: 0.5em 0.5em;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(
    135deg,
    rgba(230, 230, 230, 1),
    rgba(180, 180, 180, 1)
  );
  transition: box-shadow 300ms ease, clip-path 250ms ease,
    background-image 250ms ease, transform 250ms ease;
  will-change: box-shadow, clip-path, background-image, transform;
  overflow: clip;
  clip-path: inset(0 0 0 0 round 5px);
  box-shadow:
        /* 1 */ 0 0 0 0 inset rgba(5, 5, 5, 0.1),
    /* 2 */ -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25),
    /* 3 */ 0 0 0 0 inset rgba(5, 5, 5, 0.1),
    /* 4 */ 0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25),
    /* 5 */ 0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1),
    /* 6 */ 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
    /* 7 */ -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25);
} .genre-button:hover .button-inner,
.region-button:hover .button-inner,
.control-button:hover .button-inner {
  clip-path: inset(
    clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px)
      clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 5px
  );
  box-shadow:
        /* 1 */ 0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75),
    /* 2 */ -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5),
    /* 3 */ 0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5),
    /* 4 */ 0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15),
    /* 5 */ 0 0 0 0 inset rgba(255, 255, 255, 1),
    /* 6 */ 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
    /* 7 */ -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25);
} .button-inner span {
  position: relative;
  z-index: 4;
  font-family: "Arial", sans-serif;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: rgba(0, 0, 0, 0);
  background-image: linear-gradient(
    135deg,
    rgba(25, 25, 25, 1),
    rgba(75, 75, 75, 1)
  );
  -webkit-background-clip: text;
  background-clip: text;
  transition: transform 250ms ease;
  display: block;
  will-change: transform;
  text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em;
} .genre-button:hover .button-inner span,
.region-button:hover .button-inner span,
.control-button:hover .button-inner span {
  transform: scale(0.975);
} /* Active and selected button states */ .genre-button:active .button-inner,
.region-button:active .button-inner,
.control-button:active .button-inner {
  transform: scale(0.9) !important;
  box-shadow:
    /* Enhanced pushed in effect */
    0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.9),
    -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.7),
    0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.7),
    0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15),
    inset 0 0 15px rgba(0, 0, 0, 0.8) !important;
  background-image: linear-gradient(
    135deg,
    rgba(200, 200, 200, 1),
    rgba(150, 150, 150, 1)
  );
} /* Selected button state - stays pushed in */ .genre-button.selected .button-outer,
.genre-button.selected:hover .button-outer,
.music-genre-selected .button-outer,
.music-genre-selected:hover .button-outer {
  box-shadow: 0 0.05em 0.05em -0.01em rgba(5, 5, 5, 0.7),
    0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.3),
    0.05em 0.1em 0.05em -0.01em rgba(5, 5, 5, 0.2);
  transform: translateY(0.1em);
} .genre-button.selected .button-inner,
.music-genre-selected .button-inner {
  transform: scale(0.975);
  box-shadow:
    /* Pushed in effect */
    0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75),
    -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5),
    0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5),
    0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15);
  background-image: linear-gradient(
    135deg,
    rgba(200, 200, 200, 1),
    rgba(150, 150, 150, 1)
  );
} /* Region button specific styles */ .region-button .button-inner {
  background-image: linear-gradient(
    135deg,
    rgba(0, 0, 51, 1),
    rgba(0, 0, 102, 1)
  );
} .region-button .button-inner span {
  background-image: linear-gradient(
    135deg,
    rgba(200, 200, 255, 1),
    rgba(255, 255, 255, 1)
  );
} .empty-button {
  opacity: 0;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
} /* Control buttons at the bottom */ .control-buttons {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: space-between;
} .control-button {
  flex: 1;
  min-height: 35px;
  font-size: 0.8rem;
} /* Specific control button styles */ .fx-off .button-inner {
  background-image: linear-gradient(
    135deg,
    rgba(60, 60, 60, 1),
    rgba(30, 30, 30, 1)
  );
} .fx-off .button-inner span {
  background-image: linear-gradient(
    135deg,
    rgba(220, 220, 220, 1),
    rgba(255, 255, 255, 1)
  );
} .drops .button-inner, .fill .button-inner, .mute-drums .button-inner, .slow .button-inner, .fast .button-inner {
  background-image: linear-gradient(
    135deg,
    rgba(221, 170, 0, 1),
    rgba(170, 136, 0, 1)
  );
} .drops .button-inner span, .fill .button-inner span, .mute-drums .button-inner span, .slow .button-inner span, .fast .button-inner span {
  background-image: linear-gradient(
    135deg,
    rgba(0, 0, 0, 1),
    rgba(50, 50, 50, 1)
  );
} .fx .button-inner {
  background-image: linear-gradient(
    135deg,
    rgba(153, 0, 153, 1),
    rgba(102, 0, 102, 1)
  );
} .fx .button-inner span {
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1),
    rgba(220, 220, 220, 1)
  );
} /* Advanced CRT TV Effect */ .tv-screen-container {
  width: 100% !important;
  height: 600px !important; /* Bigger but not too big */
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  margin-bottom: 10px;
  overflow: visible !important; /* Allow scaling to show */
  transform: scale(1.2) !important; /* Scale up the TV itself */
  position: relative;
} /* Import fonts for CRT display */ @font-face {
  font-family: 'Terminal';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/terminal_copy.ttf');
} @font-face {
  font-family: 'Sys';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/sys.ttf') format('truetype');
} /* Main CRT container */ .scanlines {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 
    0 0 20px rgba(0,0,0,0.7) inset,
    0 5px 15px rgba(0,0,0,0.5);
  background: #1b2838;
} /* Screen background */ .screen {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #121010;
  overflow: hidden;
  border-radius: 20px;
  box-sizing: border-box;
} /* Background when TV is off */ .screen::before {
  background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  height: 100%;
  z-index: -1;
} /* CRT scanlines */ .scanlines .overlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
} .scanlines .overlay::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/crt.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
} .scanlines .overlay::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: " ";
  background: linear-gradient(
      rgba(18, 16, 16, 0) 50%,
      rgba(0, 0, 0, 0.25) 50%
    ),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
} /* Canvas for CRT noise */ .picture {
  height: 100%;
  width: 100%;
  z-index: -1;
  transform: scale(0, 0);
  background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
} /* Text display on CRT */ .text {
  color: lime;
  opacity: 1;
  filter: blur(0.5px);
  font-family: 'Sys', 'Terminal', 'VT323', monospace;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  position: absolute;
  text-shadow: 0 0 3px lime;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  z-index: 3;
  left: 5%;
  top: 10%;
} /* YouTube video container */ .video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  overflow: hidden;
  border-radius: 20px;
  pointer-events: none; /* Prevent interaction with the video */
} .youtube-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #121010;
  z-index: 1;
} /* Shimmer effect from reference code */ @keyframes shimmer {
  0% {
    transform: scale(1, 0.8) translate3d(0, 0, 0);
    filter: brightness(4) saturate(1.3) contrast(1.2);
    opacity: 1;
  }
  3.5% {
    transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    transform: scale(1, 0.8) translate3d(0, -100%, 0);
    opacity: 1;
  }
  9% {
    transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
    filter: brightness(4) saturate(1.3) contrast(1.2);
    opacity: 0.8;
  }
  11% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 0.9;
  }
  100% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(1.2) brightness(1.2) saturate(1.3);
    opacity: 1;
  }
} /* VHS effects */ .youtube-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, 
    rgba(255, 0, 0, 0.01), 
    rgba(0, 255, 0, 0.005), 
    rgba(0, 0, 255, 0.01)
  );
  z-index: 9;
  opacity: 0.15; /* Significantly reduced opacity */
  mix-blend-mode: screen;
  pointer-events: none;
} /* VHS degradation effect */ .vhs-degradation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%),
    linear-gradient(to right, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.03));
  opacity: 0.7;
  z-index: 8;
  pointer-events: none;
  animation: vhs-degradation 15s infinite alternate;
} @keyframes vhs-degradation {
  0% {
    transform: translateY(0);
    opacity: 0.7;
  }
  10% {
    transform: translateY(1px);
    opacity: 0.7;
  }
  20% {
    transform: translateY(0);
    opacity: 0.8;
  }
  30% {
    transform: translateY(-1px);
    opacity: 0.7;
  }
  40% {
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: translateY(2px);
    opacity: 0.8;
  }
  60% {
    transform: translateY(0);
    opacity: 0.7;
  }
  70% {
    transform: translateY(-2px);
    opacity: 0.7;
  }
  80% {
    transform: translateY(0);
    opacity: 0.8;
  }
  90% {
    transform: translateY(1px);
    opacity: 0.7;
  }
  100% {
    transform: translateY(0);
    opacity: 0.7;
  }
} /* Scanlines effect over video */ .youtube-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.05) 50%
  );
  background-size: 100% 6px; /* Even larger scanlines */
  pointer-events: none;
  z-index: 10;
  opacity: 0.2; /* Much lower opacity */
  animation: scanline-move 15s linear infinite; /* Even slower animation */
} @keyframes scanline-move {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
} @keyframes vhs-flicker {
  0% { opacity: 1; }
  3% { opacity: 0.9; }
  6% { opacity: 1; }
  7% { opacity: 0.9; }
  8% { opacity: 1; }
  9% { opacity: 0.9; }
  10% { opacity: 1; }
  100% { opacity: 1; }
} @keyframes vhs-jitter {
  0% { transform: translateX(0); }
  30% { transform: translateX(0); }
  31% { transform: translateX(1px); }
  32% { transform: translateX(0); }
  98% { transform: translateX(0); }
  99% { transform: translateX(-1px); }
  100% { transform: translateX(0); }
} @keyframes vhs-warp {
  0% { transform: scale(1, 1); }
  25% { transform: scale(1.01, 0.99); }
  50% { transform: scale(0.99, 1.01); }
  75% { transform: scale(1.01, 0.99); }
  100% { transform: scale(1, 1); }
} /* Channel info overlay - AV-1 style */ .channel-info {
  color: lime;
  opacity: 0;
  filter: blur(0px); /* No blur for maximum clarity */
  font-family: 'Sys', 'Terminal', 'VT323', monospace;
  font-size: 2.4vmin; /* Larger text size */
  left: 5%;
  position: absolute;
  text-shadow: 0 0 1px lime; /* Minimal glow for better clarity */
  top: 10%;
  z-index: 20;
  animation: fadeIn 0.5s forwards, jerkup 150ms infinite, glitch 10s ease 2000ms infinite; /* Slowed down animations significantly */
  transform-origin: center center;
  transform: scale(1.0); /* Full scale for maximum clarity */
  width: auto;
  max-width: 90%;
} .channel-info span {
  filter: blur(1px);
  position: absolute;
} .channel-info span:nth-child(1) {
  color: red;
  margin-left: -2px;
  filter: blur(2px);
} .channel-info span:nth-child(2) {
  color: lime;
  margin-left: 2px;
  filter: blur(2px);
  animation: jerkup 1s infinite;
} .channel-info span:nth-child(3) {
  color: blue;
  position: 20px 0;
  filter: blur(1px);
  animation: glitch1 1s infinite;
} .channel-info span:nth-child(4) {
  color: #fff;
  filter: blur(1px);
  text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
} .channel-info span:nth-child(5) {
  color: rgba(255, 255, 255, 0.1);
  filter: blur(15px);
} .channel-info span {
  animation: blur 30ms infinite, jerk 50ms infinite;
} @keyframes blur {
  0% {
    filter: blur(1px);
    opacity: 0.8;
  }
  50% {
    filter: blur(1px);
    opacity: 1;
  }
  100% {
    filter: blur(1px);
    opacity: 0.8;
  }
} @keyframes jerk {
  50% {
    transform: translateX(1px);
  }
  51% {
    transform: translateX(0);
  }
} @keyframes jerkup {
  0% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
} @keyframes glitch1 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
} @keyframes glitch2 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(-10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10px);
  }
} @keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
} /* Channel changing/* Static effect */ .static-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 10;
  background: #121010;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="5" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
  background-size: 150px 150px;
} /* Menu overlay for sub-genres */ .menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100; /* Increased z-index to ensure it's on top */
  display: flex;
  align-items: center;
  justify-content: center; /* Center horizontally */
  background-color: rgba(0, 0, 0, 0.5);
  outline: none;
  cursor: pointer;
  pointer-events: auto; /* Ensure it receives pointer events */
} .menu {
  opacity: 1;
  background-color: #0069ff;
  box-sizing: border-box;
  font-family: "Sys", "Terminal", "VT323", monospace;
  font-size: 2vmin; /* Larger font size for better readability */
  height: auto;
  text-transform: uppercase;
  width: auto; /* Auto width to fit content */
  min-width: 300px; /* Larger minimum width for multi-column layout */
  max-width: 400px; /* Larger maximum width for multi-column layout */
  text-shadow: 1px 1px 0 #000000,
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000;
  filter: blur(0.2px); /* Even less blur for better readability */
  color: #fff;
  animation: jerkup 300ms infinite; /* Further slowed down animation */
  pointer-events: auto; /* Ensure it receives pointer events */
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10px; /* Add some padding at the bottom */
} .menu header {
  color: #e7e05c;
  margin-bottom: 8px;
  padding: 4px 12px;
  animation: glitch 5s ease 2000ms infinite;
  font-size: 2vmin;
  white-space: nowrap; /* Keep on one line */
  position: relative;
  width: 120%; /* Make wider than the menu */
  left: -10%; /* Extend beyond the blue part */
  text-align: center;
} .menu ul {
  margin: 0;
  padding: 0;
  animation: glitch 5s ease 2000ms infinite;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
} .menu ul li {
  box-sizing: border-box;
  list-style: outside none none;
  padding: 4px 8px;
  cursor: pointer;
  pointer-events: auto;
  font-size: 1.7vmin;
  min-width: 45%;
  margin: 3px;
  text-align: center;
  filter: blur(0px); /* No blur for maximum readability */
  text-shadow: 0.5px 0.5px 0 #000000; /* Reduced text shadow */
} .menu ul li.active {
  background-color: #1af2ff;
} .menu ul li a {
  color: #fff;
  text-decoration: none;
} .menu footer {
  background-color: #2afd72;
  margin-top: 10px;
  padding: 5px 15px;
  animation: glitch 5s ease 2000ms infinite;
} .menu footer::after {
  clear: both;
  content: " ";
  display: table;
} .menu footer .key {
  float: left;
  width: 50%;
} .menu footer .key span {
  background-color: #0069ff;
  border: 6px solid #e7e05c;
  border-radius: 6px;
  display: inline-block;
  height: 34px;
  line-height: 36px;
  padding-left: 6px;
  padding-right: 6px;
} .menu footer .key:last-child {
  text-align: right;
} /* CRT scanlines */ .static-overlay::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      transparent 50%,
      rgba(0, 0, 0, 0.25) 50%
    ),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
  content: "";
} @keyframes loadingStaticEffect {
  0% { opacity: 1; filter: brightness(1.5); }
  80% { opacity: 1; filter: brightness(1.5); }
  100% { opacity: 0; filter: brightness(1); }
} /* Channel changing static effect */ .static-overlay.active {
  opacity: 1;
  z-index: 30;
  animation: staticEffect 3s forwards, flickerStatic 0.1s infinite alternate;
} /* Static for video loading */ .loading-static {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="5" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
  background-size: 150px 150px;
  opacity: 0.7;
  pointer-events: none;
  z-index: 25;
  mix-blend-mode: normal;
  animation: loadingStaticEffect 5s forwards;
} /* Additional VHS tracking lines */ .tracking-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(255, 255, 255, 0.05) 3px,
    transparent 4px
  );
  opacity: 0;
  pointer-events: none;
  z-index: 25;
} .tracking-lines.active {
  animation: trackingEffect 1.5s;
} @keyframes staticEffect {
  0% { opacity: 1; transform: scale(1.2); filter: brightness(2); }
  5% { opacity: 0.9; transform: scale(1.1); filter: brightness(1.8); }
  10% { opacity: 1; transform: scale(1.15); filter: brightness(2); }
  15% { opacity: 0.8; transform: scale(1.05); filter: brightness(1.5); }
  20% { opacity: 1; transform: scale(1.1); filter: brightness(2); }
  25% { opacity: 0.7; transform: scale(1); filter: brightness(1.3); }
  30% { opacity: 0.9; transform: scale(1.05); filter: brightness(1.8); }
  35% { opacity: 0.6; transform: scale(0.95); filter: brightness(1.2); }
  40% { opacity: 0.8; transform: scale(1); filter: brightness(1.5); }
  45% { opacity: 0.5; transform: scale(0.9); filter: brightness(1); }
  50% { opacity: 0.7; transform: scale(0.95); filter: brightness(1.3); }
  55% { opacity: 0.4; transform: scale(0.85); filter: brightness(0.9); }
  60% { opacity: 0.6; transform: scale(0.9); filter: brightness(1.1); }
  65% { opacity: 0.3; transform: scale(0.8); filter: brightness(0.8); }
  70% { opacity: 0.5; transform: scale(0.85); filter: brightness(1); }
  75% { opacity: 0.2; transform: scale(0.75); filter: brightness(0.7); }
  80% { opacity: 0.4; transform: scale(0.8); filter: brightness(0.9); }
  85% { opacity: 0.1; transform: scale(0.7); filter: brightness(0.6); }
  90% { opacity: 0.2; transform: scale(0.75); filter: brightness(0.7); }
  95% { opacity: 0.1; transform: scale(0.7); filter: brightness(0.6); }
  100% { opacity: 0; transform: scale(0.6); filter: brightness(0.5); }
} @keyframes trackingEffect {
  0% { opacity: 0; transform: translateY(0); }
  10% { opacity: 1; transform: translateY(20px); }
  20% { opacity: 0.8; transform: translateY(-10px); }
  30% { opacity: 1; transform: translateY(15px); }
  40% { opacity: 0.8; transform: translateY(-5px); }
  50% { opacity: 1; transform: translateY(10px); }
  60% { opacity: 0.8; transform: translateY(-10px); }
  70% { opacity: 1; transform: translateY(5px); }
  80% { opacity: 0.8; transform: translateY(-5px); }
  90% { opacity: 0.5; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
} @keyframes slideIn {
  from { right: -100%; }
  to { right: 20px; }
} @keyframes slideOut {
  from { right: 20px; }
  to { right: -100%; }
} .text span {
  filter: blur(1px);
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
} .text span:nth-child(1) {
  color: red;
  margin-left: -2px;
  filter: blur(2px);
} .text span:nth-child(2) {
  color: lime;
  margin-left: 2px;
  filter: blur(2px);
} .text span:nth-child(3) {
  color: blue;
  position: 20px 0;
  filter: blur(1px);
} .text span:nth-child(4) {
  color: #fff;
  filter: blur(1px);
  text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
} .text span:nth-child(5) {
  color: rgba(255, 255, 255, 0.1);
  filter: blur(15px);
} /* TV Menu */ .menu {
  opacity: 1;
  background-color: #0069ff;
  box-sizing: border-box;
  font-family: "Sys";
  font-size: 16px;
  height: auto;
  text-transform: uppercase;
  width: 34%;
  text-shadow: 1px 1px 0 #000000,
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000;
  filter: blur(1px);
  color: #fff;
  animation: jerkup 100ms infinite;
  position: absolute;
  right: 5%;
  bottom: 10%;
  display: block; /* Make it visible */
} .menu header {
  color: #e7e05c;
  margin-bottom: 10px;
  padding: 5px 15px;
  animation: 5s ease 2000ms normal none infinite running glitch;
} .menu ul {
  margin: 0;
  padding: 0;
  animation: 5s ease 2000ms normal none infinite running glitch;
} .menu ul li {
  box-sizing: border-box;
  list-style: outside none none;
  padding: 5px 15px;
} .menu ul li.active {
  background-color: #1af2ff;
} .menu ul li a {
  color: #fff;
  text-decoration: none;
} .menu footer {
  background-color: #2afd72;
  margin-top: 10px;
  padding: 5px 15px;
  animation: 5s ease 2000ms normal none infinite running glitch;
} .menu footer::after {
  clear: both;
  content: " ";
  display: table;
} .menu footer .key {
  float: left;
  width: 50%;
} .menu footer .key span {
  background-color: #0069ff;
  border: 6px solid #e7e05c;
  border-radius: 6px;
  display: inline-block;
  height: 34px;
  line-height: 36px;
  padding-left: 6px;
} .menu footer .key:last-child {
  text-align: right;
} /* Animations for CRT effect */ .text span {
  animation: blur 30ms infinite, jerk 50ms infinite;
} .text span:nth-child(2) {
  animation: jerkup 1s infinite;
} .text span:nth-child(3) {
  animation: glitch1 1s infinite;
} .text span:nth-child(2) {
  animation: glitch2 1s infinite;
} .overlay .text {
  animation: 5s ease 2000ms normal none infinite running glitch;
} /* Turn on animation */ .scanlines {
  animation: 3000ms linear 0ms normal forwards 1 running on;
} /* Animation keyframes */ @keyframes on {
  0% {
    transform: scale(1, 0.8) translate3d(0, 0, 0);
    filter: brightness(4);
    opacity: 1;
  }
  3.5% {
    transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    transform: scale(1, 0.8) translate3d(0, -100%, 0);
    opacity: 1;
  }
  9% {
    transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
    filter: brightness(4);
    opacity: 0;
  }
  11% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(0) brightness(0);
    opacity: 0;
  }
  100% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 1;
  }
} @keyframes blur {
  0% {
    filter: blur(1px);
    opacity: 0.8;
  }
  50% {
    filter: blur(1px);
    opacity: 1;
  }
  100% {
    filter: blur(1px);
    opacity: 0.8;
  }
} @keyframes jerk {
  50% {
    transform: translateX(1px);
  }
  51% {
    transform: translateX(0);
  }
} @keyframes jerkup {
  0% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
} @keyframes glitch1 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
} @keyframes glitch2 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(-10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10px);
  }
} @keyframes glitch {
  30% {
  }
  40% {
    opacity: 1;
    transform: scale(1, 1);
    transform: skew(0, 0);
  }
  41% {
    opacity: 0.8;
    transform: scale(1, 1.2);
    transform: skew(80deg, 0);
  }
  42% {
    opacity: 0.8;
    transform: scale(1, 1.2);
    transform: skew(-50deg, 0);
  }
  43% {
    opacity: 1;
    transform: scale(1, 1);
    transform: skew(0, 0);
  }
  65% {
  }
} /* World regions section */ .world-regions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
} /* Placeholder to maintain layout when world regions are removed */ .world-regions-placeholder {
  width: 100%;
  height: 285px; /* Exact height to match the original section */
  margin-top: 10px;
  margin-bottom: 10px;
} /* Animations */ @keyframes vhs-scanlines {
  0% { background-position-y: 0px; }
  100% { background-position-y: 3px; }
} @keyframes vhs-noise {
  0% { opacity: 0.95; transform: translateY(0px) translateX(0px); }
  10% { opacity: 0.9; transform: translateY(-1px) translateX(1px); }
  20% { opacity: 0.85; transform: translateY(1px) translateX(-1px); }
  30% { opacity: 0.92; transform: translateY(0px) translateX(1px); }
  40% { opacity: 0.88; transform: translateY(1px) translateX(0px); }
  50% { opacity: 0.93; transform: translateY(-1px) translateX(-1px); }
  60% { opacity: 0.87; transform: translateY(0px) translateX(-1px); }
  70% { opacity: 0.91; transform: translateY(-1px) translateX(1px); }
  80% { opacity: 0.86; transform: translateY(1px) translateX(0px); }
  90% { opacity: 0.94; transform: translateY(0px) translateX(1px); }
  100% { opacity: 0.9; transform: translateY(-1px) translateX(0px); }
} @keyframes vhs-static-move {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 8px 8px, -8px -8px; }
} @keyframes vhs-flicker {
  0%, 100% { opacity: 1; }
  25% { opacity: 0.96; }
  50% { opacity: 0.92; }
  75% { opacity: 0.98; }
} /* Responsive adjustments */ @media (max-width: 1200px) {
  .genre-button, .region-button {
    font-size: 0.75rem;
    padding: 6px 2px;
  }
  
  .section-title {
    font-size: 1.3rem;
  }
  
  .region-title {
    font-size: 1.1rem;
  }
} @media (max-width: 900px) {
  .genre-selector-container {
    flex-direction: column;
    align-items: center;
  }
  
  .section-container, .middle-section {
    width: 100%;
    max-width: 600px;
  }
} /* Dynamic sub-genre menu: the pop-up centers on the TV and sizes itself to
   its content — long lists wrap into columns and scale their type down. It
   must ALWAYS fit: no scrolling, no overlap. */ .menu {
  /* Centered by the flex .menu-overlay (display:flex; align/justify center) —
     NOT absolute+translate. The translate(-50%,-50%) that used to center it was
     overridden elsewhere to translateY(1px), which left the menu's top-left
     pinned at the TV's center so it spilled off the bottom-right corner. Static
     positioning lets the overlay flex-center it dead-on, and any stray 1px
     transform is then harmless. Verified in-browser: menu sits centered and
     fully inside the TV screen bounds. */
  position: static;
  transform: none;
  right: auto;
  bottom: auto;
  width: auto;
  min-width: 32%;
  max-width: 94%;
  max-height: 92%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
} /* Everything below is scoped under .menu-overlay purely to outrank the older
   .menu rules earlier in this file (2vmin / 1.7vmin, written for a fixed TV
   size). Sizes hang off --menu-fs so the shrink-to-fit pass in
   SubGenreMenu.tsx only has to set one value. */ .menu-overlay .menu {
  --menu-fs: clamp(9px, 1.6vmin, 18px);
  font-size: var(--menu-fs);
  /* Opt out of the browser's automatic text inflation. On a narrow/emulated
     viewport it rescales the list items independently of --menu-fs, which
     breaks the shrink-to-fit measurement and the column sizing. */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
} .menu-overlay .menu header {
  font-size: var(--menu-fs);
  padding: 0.3em 0.9em;
  margin-bottom: 0.3em;
  flex: 0 0 auto;
} .menu-overlay .menu ul {
  display: grid;
  /* Columns size to their CONTENT, not to equal fractions. Equal 1fr columns
     made every cell as narrow as the narrowest, so the long labels
     ("Timbaland", "Classic Breaks", "NY Underground") were ellipsised away —
     the whole word has to be readable. */
  grid-template-columns: max-content;
  justify-content: center;
  grid-auto-rows: min-content;
  overflow: hidden;
  min-height: 0;
} .menu-overlay .menu ul.menu-two-col {
  grid-template-columns: repeat(2, max-content);
  -moz-column-gap: 0.7em;
       column-gap: 0.7em;
} /* 10+ items: a third column keeps the row count low enough to fit the TV. */ .menu-overlay .menu ul.menu-three-col {
  grid-template-columns: repeat(3, max-content);
  -moz-column-gap: 0.55em;
       column-gap: 0.55em;
} .menu-overlay .menu ul li {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0.2em 0.85em;
  /* No ellipsis: with max-content columns the label always has room, and a
     half-shown word is worse than a slightly wider menu. */
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  font-size: var(--menu-fs);
  line-height: 1.35;
} /* A >9-item list carries BOTH classes; the tighter three-column sizing must
   come last so it wins on source order. */ .menu-overlay .menu ul.menu-dense li {
  padding: 0.15em 0.7em;
  font-size: calc(var(--menu-fs) * 0.88);
  line-height: 1.3;
} .menu-overlay .menu ul.menu-three-col li {
  padding: 0.15em 0.55em;
  font-size: calc(var(--menu-fs) * 0.78);
}
/* LED indicator styles */
.led-indicator {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #00ff00; /* Bright green */
  box-shadow: 0 0 4px #00ff00, 0 0 6px #00ff00;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.led-active {
  opacity: 1;
}

/* LED display for selected genre and sub-genre */
.section-header {
  display: flex;
  flex-direction: row; /* Place elements side by side */
  align-items: center; /* Center vertically */
  gap: 15px; /* Spacing between title and LED display */
  margin-bottom: 15px;
  justify-content: center; /* Center the entire row */
}

.led-display {
  display: flex;
  align-items: center;
  justify-content: center; /* Center text horizontally */
  padding: 6px 10px;
  background-color: #000;
  border: 1px solid #333;
  border-radius: 4px;
  font-family: 'VT323', monospace;
  font-size: 1.5rem; /* Bigger text size */
  color: #00ff00; /* Bright green LED color */
  text-shadow: 0 0 5px #00ff00;
  box-shadow: inset 0 0 5px rgba(0, 255, 0, 0.5);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: auto; /* Allow natural width */
  min-width: 200px; /* Smaller minimum width */
  max-width: 60%; /* Limit maximum width */
  text-align: center; /* Center text as fallback */
}

.led-display-label {
  color: #888;
  font-size: 0.8rem;
  margin-right: 5px;
}

.led-display-value {
  color: #00ff00;
}

.led-display-empty {
  color: #333;
  text-shadow: none;
}
/* Nspire button wrapper - positions the button at the bottom of the page */
.nspire-button-wrapper {
  position: absolute;
  top: -70px; /* Position it above the TV container */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: none; /* Allows clicks to pass through the wrapper */
  width: auto; /* Let the button define the width */
}

/* Main button styling */
.nspire-button {
  position: relative;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 30px;
  padding: 10px 25px;
  color: #00ffcc;
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: lowercase;
  letter-spacing: 3px;
  cursor: pointer;
  overflow: visible;
  pointer-events: auto; /* Makes the button clickable */
  transition: all 0.4s ease;
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.4);
}

/* Inner container for text */
.nspire-button-inner {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Text styling with subtle animation */
.nspire-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, #00ffcc, #00ccff, #00ffcc);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 8s linear infinite;
}

/* Circuit board design elements */
.nspire-circuit-left,
.nspire-circuit-right {
  position: absolute;
  height: 2px;
  background: #00ffcc;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.nspire-circuit-left {
  left: -50px;
  width: 40px;
}

.nspire-circuit-right {
  right: -50px;
  width: 40px;
}

/* Circuit nodes */
.nspire-circuit-left::before,
.nspire-circuit-right::before,
.nspire-circuit-left::after,
.nspire-circuit-right::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ffcc;
  top: 50%;
  transform: translateY(-50%);
}

.nspire-circuit-left::before {
  left: 0;
}

.nspire-circuit-left::after {
  left: 25px;
}

.nspire-circuit-right::before {
  right: 0;
}

.nspire-circuit-right::after {
  right: 25px;
}

/* Pulsing effect around the button */
.nspire-pulse {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  z-index: 0;
  opacity: 0;
  box-shadow: 0 0 0 rgba(0, 255, 204, 0);
  animation: pulse 2s infinite;
}

/* Hover effects */
.nspire-button:hover {
  background: rgba(0, 20, 20, 0.9);
  box-shadow: 0 0 30px rgba(0, 255, 204, 0.7);
  transform: translateY(-2px);
}

.nspire-button:hover .nspire-circuit-left,
.nspire-button:hover .nspire-circuit-right {
  background: #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}

.nspire-button:hover .nspire-circuit-left::before,
.nspire-button:hover .nspire-circuit-right::before,
.nspire-button:hover .nspire-circuit-left::after,
.nspire-button:hover .nspire-circuit-right::after {
  background: #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}

.nspire-button:hover .nspire-pulse {
  opacity: 1;
}

/* Active state */
.nspire-button:active {
  transform: translateY(1px);
  box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
}

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

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 204, 0.7);
    opacity: 1;
  }
  70% {
    box-shadow: 0 0 0 15px rgba(0, 255, 204, 0);
    opacity: 0;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 204, 0);
    opacity: 0;
  }
}
.shader-effect-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: hue-rotate(15deg) contrast(1.2);
}

.glitch-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.glitch-1,
.glitch-2,
.glitch-3,
.glitch-4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  mix-blend-mode: overlay;
}

/* Color shift effect for the entire page */
.color-shift {
  animation: colorShift 0.5s infinite alternate;
}

@keyframes colorShift {
  0% {
    filter: hue-rotate(0deg) saturate(1);
  }
  25% {
    filter: hue-rotate(45deg) saturate(1.5);
  }
  50% {
    filter: hue-rotate(90deg) saturate(1.2);
  }
  75% {
    filter: hue-rotate(180deg) saturate(1.7);
  }
  100% {
    filter: hue-rotate(270deg) saturate(1.3);
  }
}

.glitch-1 {
  background: linear-gradient(90deg, transparent 5%, rgba(0, 255, 255, 0.2) 10%, transparent 15%);
  animation: glitch1 2s infinite linear alternate-reverse;
  transform: skewX(45deg);
}

.glitch-2 {
  background: linear-gradient(180deg, transparent 5%, rgba(255, 0, 255, 0.2) 10%, transparent 15%);
  animation: glitch2 3s infinite linear alternate-reverse;
  transform: skewY(-45deg);
}

.glitch-3 {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.1) 10%, transparent 15%, rgba(0, 0, 0, 0.1) 20%);
  background-size: 100px 100px;
  animation: glitch3 10s infinite linear;
}

.glitch-4 {
  background: repeating-linear-gradient(45deg, rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.1) 10px, rgba(0, 0, 255, 0.1) 10px, rgba(0, 0, 255, 0.1) 20px);
  mix-blend-mode: difference;
  animation: glitch4 0.5s steps(1) infinite;
  opacity: 0.3;
}

@keyframes glitch4 {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-5px, 5px); }
  20% { transform: translate(5px, -5px); }
  30% { transform: translate(3px, 3px); }
  40% { transform: translate(-3px, -3px); }
  50% { transform: translate(0, 5px); }
  60% { transform: translate(5px, 0); }
  70% { transform: translate(-5px, 0); }
  80% { transform: translate(0, -5px); }
  90% { transform: translate(2px, -2px); }
  100% { transform: translate(-2px, 2px); }
}

@keyframes glitch1 {
  0% {
    background-position: 0 0;
    filter: hue-rotate(0deg);
  }
  100% {
    background-position: 100vw 0;
    filter: hue-rotate(360deg);
  }
}

@keyframes glitch2 {
  0% {
    background-position: 0 0;
    filter: hue-rotate(180deg);
  }
  100% {
    background-position: 0 100vh;
    filter: hue-rotate(0deg);
  }
}

@keyframes glitch3 {
  0% {
    background-position: 0 0;
    opacity: 0.5;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    background-position: 100px 100px;
    opacity: 0.5;
  }
}

/* Add a scanline effect */
.shader-effect-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  animation: scanline 10s infinite linear;
  z-index: 1;
}

/* Add a color distortion effect */
.shader-effect-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    transparent 30%,
    rgba(255, 0, 255, 0.1) 70%,
    rgba(0, 255, 255, 0.2) 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  animation: pulse 5s infinite alternate;
  z-index: 2;
}

@keyframes scanline {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100vh;
  }
}

@keyframes pulse {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  100% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}
/* Screen shake effects */
.shake-hard {
  animation: shake-hard 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.shake-little {
  animation: shake-little 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.shake-horizontal {
  animation: shake-horizontal 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.shake-vertical {
  animation: shake-vertical 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake-hard {
  10%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 80% { transform: translate3d(10px, -10px, 0); }
  30%, 50%, 70% { transform: translate3d(-10px, 10px, 0); }
  40%, 60% { transform: translate3d(10px, 0, 0); }
}

@keyframes shake-little {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-2px, 2px, 0); }
  40%, 60% { transform: translate3d(1px, 0, 0); }
}

@keyframes shake-horizontal {
  10%, 90% { transform: translate3d(-5px, 0, 0); }
  20%, 80% { transform: translate3d(5px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

@keyframes shake-vertical {
  10%, 90% { transform: translate3d(0, -5px, 0); }
  20%, 80% { transform: translate3d(0, 5px, 0); }
  30%, 50%, 70% { transform: translate3d(0, -3px, 0); }
  40%, 60% { transform: translate3d(0, 3px, 0); }
}
/* Enhanced button feedback styles */

/* General button active state enhancement for ALL buttons */
button:active,
div[role="button"]:active,
span[role="button"]:active,
.button:active,
.btn:active {
  transform: scale(0.95) !important;
  transition: transform 0.1s ease !important;
  position: relative;
  z-index: 2;
}

/* Mute button specific active state - target all possible mute buttons */
.mute-button:active,
button[data-control="mute"]:active,
button[data-type="mute"]:active,
button:active[class*="mute"],
div[role="button"]:active[class*="mute"],
span:active[class*="mute"],
.mute:active,
[aria-label*="mute" i]:active,
[title*="mute" i]:active {
  background-color: rgba(255, 50, 50, 0.7) !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

/* New button specific active state */
.new-button:active,
button[data-control="new"]:active,
button[data-type="new"]:active,
button:active[class*="new"],
div[role="button"]:active[class*="new"],
span:active[class*="new"],
.new:active,
[aria-label*="new" i]:active,
[title*="new" i]:active {
  background-color: rgba(50, 255, 50, 0.7) !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

/* Enhanced visual feedback for genre selector buttons */
.genre-button:active,
.region-button:active,
.control-button:active {
  transform: translateY(4px) scale(0.95) !important;
  box-shadow: 
    0 0 2px rgba(0, 0, 0, 0.8),
    inset 0 0 10px rgba(0, 0, 0, 0.8) !important;
  transition: all 0.1s ease !important;
  filter: brightness(1.2) !important;
}

/* Add a flash effect when buttons are clicked */
@keyframes button-flash {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

/* Add a pseudo-element for the flash effect */
button:active::before,
div[role="button"]:active::before,
span[role="button"]:active::before,
.button:active::before,
.btn:active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: inherit;
  animation: button-flash 0.2s ease;
  pointer-events: none;
  z-index: -1;
}

/* Special effects for SoundcraftTheme buttons */
.track-controls button:active,
.mixer-controls button:active,
.fader-container button:active,
[class*="track"] button:active,
[class*="mixer"] button:active,
[class*="control"] button:active {
  transform: scale(0.9) !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Make sure the active state is very visible on touch devices */
@media (hover: none) {
  button:active,
  div[role="button"]:active,
  span[role="button"]:active {
    transform: scale(0.9) !important;
  }
  
  button:active::before,
  div[role="button"]:active::before,
  span[role="button"]:active::before {
    background: rgba(255, 255, 255, 0.4);
  }
  
  /* Extra prominent effect for touch devices */
  .mute-button:active,
  button[data-control="mute"]:active,
  button[data-type="mute"]:active,
  button:active[class*="mute"],
  div[role="button"]:active[class*="mute"],
  span:active[class*="mute"] {
    background-color: rgba(255, 0, 0, 0.8) !important;
  }
}
@keyframes vcrDeckCarriage {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(55%);
  }
}

.vcr-deck {
  width: min(520px, 82%);
  min-width: 260px;
  aspect-ratio: 5 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7rem;
  line-height: 0.7rem;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}

.vcr-deck__top {
  width: 100%;
  height: 18%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.vcr-deck__carriage {
  width: 52%;
  height: 100%;
  margin-left: 8%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}

.vcr-deck__carriage--close {
  animation: vcrDeckCarriage 500ms ease-out forwards;
}

.vcr-deck__carriage--open {
  animation: vcrDeckCarriage 500ms ease-out forwards reverse;
}

.vcr-deck__carriage-top {
  height: 4px;
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #6a6a6a, #bfbfbf, #7d7d7d);
  border: 1px solid rgba(0, 0, 0, 0.35);
}

.vcr-deck__carriage-middle {
  width: 100%;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.2), rgba(0, 0, 0, 0.15)),
    linear-gradient(90deg, #767676, #bdbdbd, #8a8a8a);
  border: 1px solid rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  padding: 2px 6px;
  gap: 6px;
}

.vcr-deck__strut {
  width: 4px;
  height: 70%;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.65);
  opacity: 0.6;
}

.vcr-deck__tapespace {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
}

.vcr-deck__cassette {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(180deg, #1a1a1a, #050505);
  display: flex;
  align-items: center;
  padding: 2px;
  gap: 6px;
}

.vcr-deck__cassette-label {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(180deg, #f8f8f8, #dedede);
  color: #141414;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 0.6rem;
}

.vcr-deck__cassette-spacer {
  width: 18%;
  height: 100%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
}

.vcr-deck__front {
  width: 100%;
  height: 72%;
  border-radius: 12px;
  padding: 8px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.25)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px),
    linear-gradient(90deg, #7a7a7a, #bdbdbd, #7d7d7d);
  border: 1px solid rgba(0, 0, 0, 0.55);
  display: grid;
  grid-template-columns: 72px 1fr 132px;
  gap: 10px;
}

.vcr-deck__power {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vcr-deck__powerbtn {
  width: 48px;
  height: 38px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 10px;
  background: rgba(15, 15, 15, 0.85);
  padding: 2px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.vcr-deck__powerbtn:active {
  transform: translateY(1px);
}

.vcr-deck__powerbutton {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 10px 1fr;
  align-items: center;
  justify-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.vcr-deck__powerlight {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(120, 120, 120, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.vcr-deck__powerlight--on {
  background: #39ff14;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.6);
}

.vcr-deck__powerlbl {
  display: none;
}

.vcr-deck__controls {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.6);
  padding: 8px;
}

.vcr-deck__cluster {
  height: 100%;
}

.vcr-deck__cluster--play {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.vcr-deck__cluster--stop {
  width: 64px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
}

.vcr-deck__cluster--eject {
  width: 52px;
  display: flex;
}

.vcr-deck__btn {
  width: 100%;
  height: 100%;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.35)),
    linear-gradient(90deg, #6d6d6d, #b0b0b0, #6f6f6f);
  cursor: pointer;
  position: relative;
  padding: 0;
}

.vcr-deck__btn:active {
  transform: translateY(1px);
}

.vcr-deck__glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.9rem;
  color: rgba(10, 10, 10, 0.9);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.vcr-deck__btn--play .vcr-deck__glyph {
  transform: rotate(90deg);
}

.vcr-deck__btn--record {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.4)),
    linear-gradient(90deg, #6d6d6d, #b0b0b0, #6f6f6f);
}

.vcr-deck__btn--record .vcr-deck__glyph {
  color: rgba(140, 0, 0, 0.95);
  text-shadow: none;
}

.vcr-deck__display {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vcr-deck__displayarea {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.25));
  border: 1px solid rgba(0, 0, 0, 0.65);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vcr-deck__displaytext {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: rgba(160, 160, 160, 0.9);
}

.vcr-deck__displaytext--on {
  color: rgba(210, 240, 255, 0.95);
  text-shadow: 0 0 10px rgba(120, 200, 255, 0.22);
}

.vcr-deck__base {
  width: 92%;
  height: 10%;
  margin-top: -3px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.95));
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-top: 0;
  opacity: 0.9;
}
.menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* More translucent to see video behind */
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu {
  background-color: rgba(18, 18, 18, 0.8); /* Semi-transparent to let video show through */
  border: 2px solid #444;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 100, 0, 0.4); /* Darker, less saturated green shadow */
  /* Sizing + centering are owned by the dynamic-fit rules in GenreSelector.css
     (.menu at the bottom of that file): the pop-up must always fit inside the
     TV screen with no scroll. A fixed width/max-width here made tall lists
     overflow the short CRT screen and get clipped — the menu ran "off the TV".
     overflow:hidden also lives there so it can't fight the grid fit. */
}

.menu header {
  background-color: rgba(34, 34, 34, 0.85); /* Slightly translucent header */
  color: #90ee90; /* Light green instead of bright green */
  padding: 10px 15px;
  font-size: 1.2rem;
  text-align: center;
  border-bottom: 1px solid #444;
  font-family: 'VT323', monospace;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.5); /* Reduced glow intensity */
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* No fixed max-height / scroll here: the dynamic-fit rules size the list to
     the TV with grid columns and clamped type so every sub-genre shows without
     scrolling. A 300px scroll box overflowed the CRT screen. */
}

.menu li {
  padding: 10px 15px;
  color: #ffffff; /* White text for all items */
  border-bottom: 1px solid #333;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-family: 'Arial', sans-serif;
  padding-left: 18px;
}

.menu li:hover {
  background-color: rgba(42, 42, 42, 0.85);
  color: #ffffff;
  border-left: 3px solid #555;
}

.menu li.active {
  background-color: #90ee90; /* Light green background for active item */
  color: #000000; /* Black text for active item */
  font-weight: bold;
  border-left: 3px solid #90ee90;
}

/* Custom scrollbar for the menu */
.menu ul::-webkit-scrollbar {
  width: 8px;
}

.menu ul::-webkit-scrollbar-track {
  background: #222;
}

.menu ul::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

.menu ul::-webkit-scrollbar-thumb:hover {
  background: #555;
}
@font-face {
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/terminal_copy.ttf);
  font-family: 'Terminal';
}

@font-face {
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/sys.ttf) format('truetype');
  font-family: 'Sys';
}

.crt-tv {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 600px;
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
  border: 8px solid #333;
  border-radius: 25px;
  box-shadow: 
    inset 0 0 20px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(0, 255, 255, 0.2),
    0 10px 20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* Background when TV is off */
.crt-tv .screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
  background: #121010;
}

.crt-tv .screen::before {
  background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 15px;
}

.crt-display-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem; /* Much smaller text */
  font-weight: bold;
  text-shadow: 0 0 10px #00ff00;
  z-index: 15; /* Above video */
  pointer-events: none;
}

/* CRT scanlines */
.crt-tv.scanlines .overlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crt-tv.scanlines .overlay::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/crt.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  pointer-events: none;
}

.crt-tv.scanlines .overlay::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: " ";
  background: linear-gradient(
      rgba(18, 16, 16, 0) 50%,
      rgba(0, 0, 0, 0.25) 50%
    ),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.crt-tv .picture {
  height: 100%;
  overflow: hidden;
  width: 100%;
  z-index: -1;
  transform: scale(0, 0);
  background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
}

.crt-tv .content-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  border-radius: 15px;
  overflow: hidden;
  background: transparent;
}

/* iOS-specific video positioning - move video right by 25% */
@media only screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  .crt-tv .content-area {
    left: 25%;
    width: 75%;
  }
}

.crt-tv .text {
  color: lime;
  opacity: 0;
  filter: blur(0.5px);
  font-family: 'Sys', 'Terminal', 'VT323', monospace;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  left: 5%;
  position: absolute;
  text-shadow: 0 0 3px lime;
  top: 10%;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  z-index: 35;
}

/* Smaller text for STOP/PLAY */
.crt-tv .text.transport-text {
  font-size: clamp(0.9rem, 2.5vw, 1.4rem);
}

.crt-tv.on .text {
  opacity: 1;
  transition: opacity 10ms ease 2000ms;
}

.crt-tv.on .picture {
  animation: 3000ms linear 0ms normal forwards 1 running tv-on;
}

.crt-tv.off .picture {
  animation: 750ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms normal forwards 1 running tv-off;
}

@keyframes tv-on {
  0% {
    transform: scale(1, 0.8) translate3d(0, 0, 0);
    filter: brightness(4);
    opacity: 1;
  }
  3.5% {
    transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    transform: scale(1, 0.8) translate3d(0, -100%, 0);
    opacity: 1;
  }
  9% {
    transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
    filter: brightness(4);
    opacity: 0;
  }
  11% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(0) brightness(0);
    opacity: 0;
  }
  100% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 1;
  }
}

@keyframes tv-off {
  0% {
    transform: scale(1, 1);
    filter: brightness(1);
  }
  40% {
    transform: scale(1, 0.005);
    filter: brightness(100);
  }
  70% {
    transform: scale(1, 0.005);
  }
  90% {
    transform: scale(0.005, 0.005);
  }
  100% {
    transform: scale(0, 0);
  }
}

/* Text glitch effects */
.crt-tv .text span {
  filter: blur(1px);
  position: absolute;
}

.crt-tv .text span:nth-child(1) {
  color: red;
  margin-left: -2px;
  filter: blur(2px);
}

.crt-tv .text span:nth-child(2) {
  color: lime;
  margin-left: 2px;
  filter: blur(2px);
}

.crt-tv .text span:nth-child(3) {
  color: blue;
  filter: blur(1px);
}

.crt-tv .text span:nth-child(4) {
  color: #fff;
  filter: blur(1px);
  text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
}

.crt-tv .text span:nth-child(5) {
  color: rgba(255, 255, 255, 0.1);
  filter: blur(15px);
}

.crt-tv .text span {
  animation: blur 30ms infinite, jerk 50ms infinite;
}

@keyframes blur {
  0% {
    filter: blur(1px);
    opacity: 0.8;
  }
  50% {
    filter: blur(1px);
    opacity: 1;
  }
  100% {
    filter: blur(1px);
    opacity: 0.8;
  }
}

@keyframes jerk {
  50% {
    transform: translateX(1px);
  }
  51% {
    transform: translateX(0);
  }
}

@keyframes jerkup {
  0% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}

.crt-tv .text span:nth-child(2) {
  animation: jerkup 1s infinite;
}

.crt-tv .text span:nth-child(3) {
  animation: glitch1 1s infinite;
}

@keyframes glitch1 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}

.crt-tv .text span:nth-child(2) {
  animation: glitch2 1s infinite;
}

@keyframes glitch2 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(-10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10px);
  }
}

.crt-tv.on .overlay .text {
  animation: 5s ease 2000ms normal none infinite running glitch;
}

/* Static overlay for STOP state */
.static-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #121010;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="5" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
  background-size: 150px 150px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}

.static-overlay.active {
  opacity: 0.8;
  animation: staticNoise 0.1s infinite alternate;
}

@keyframes staticNoise {
  0% { 
    background-position: 0 0; 
    opacity: 0.8;
  }
  100% { 
    background-position: 8px 8px; 
    opacity: 0.9;
  }
}

@keyframes glitch {
  30% {
  }
  40% {
    opacity: 1;
    transform: scale(1, 1);
    transform: skew(0, 0);
  }
  41% {
    opacity: 0.8;
    transform: scale(1, 1.2);
    transform: skew(80deg, 0);
  }
  42% {
    opacity: 0.8;
    transform: scale(1, 1.2);
    transform: skew(-50deg, 0);
  }
  43% {
    opacity: 1;
    transform: scale(1, 1);
    transform: skew(0, 0);
  }
  65% {
  }
}