/* Minimalistic String Styling with Variable Thickness
 * Modern, clean design where lower strings have increased thickness
 * Maintains original layout
 */

/* String styling - base properties */
.highAString, 
.eString,
.bString, 
.gString,
.dString, 
.AString,
.ELowString, 
.lowBString {
  position: relative;
  border-top: none !important; /* REMOVE ORIGINAL BORDER */
  box-shadow: none;
  background-color: #1a1a1a !important; /* Dark background for string cells */
}

/* String thickness - variable thickness based on string position */
.highAString::after, 
.eString::after,
.bString::after, 
.gString::after,
.dString::after, 
.AString::after,
.ELowString::after, 
.lowBString::after {
  content: "";
  position: absolute;
  top: 0; /* Align to top like original border */
  left: 0;
  right: 0;
  background: linear-gradient(to right, 
                            rgba(255,255,255,0) 0%, 
                            rgba(255,255,255,0.9) 5%, 
                            rgba(255,255,255,0.9) 95%, 
                            rgba(255,255,255,0) 100%);
  z-index: 2;
  pointer-events: none; /* Allow clicks to pass through */
}

/* Thinnest strings (high to low) - progressively increase thickness */
.highAString::after { height: 1px; }
.eString::after { height: 1px; }
.bString::after { height: 1.2px; }
.gString::after { height: 1.4px; }
.dString::after { height: 1.7px; }
.AString::after { height: 2px; }
.ELowString::after { height: 2.5px; }
.lowBString::after { height: 3px; }

/* Ensure proper note positioning */
.fret .note {
  position: absolute;
}

/* Ensure spacing areas are transparent */
.spacing-top,
.spacing-bottom {
  background-color: transparent !important;
  border: none !important;
}

/* Ensure nofret area is transparent */
.nofret {
  background-color: transparent !important;
  border: none !important;
}

/* When strings are played/active, add a subtle glow effect */
.string-active::after {
  animation: string-vibration 0.5s ease-out;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

@keyframes string-vibration {
  0% { transform: scaleY(1.5); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0.9; }
}