body { font-family: Inter, sans-serif; }

.tool-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 3px 12px rgba(0,0,0,.04);
}

/* ── Toggle buttons (reverb / jawari) ── */
.reverb-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 1px;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 3px;
}
.reverb-btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.reverb-btn.active {
  background: #fff;
  color: #065f46;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* ── Outer wrapper ── */
.sitar-neck-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.sitar-neck-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  padding-left: 52px;
  padding-right: 8px;
}
.sitar-neck-header-nut,
.sitar-neck-header-bridge {
  font-size: 10px;
  color: #9ca3af;
  letter-spacing: 0.04em;
}
.sitar-neck-header-bridge { margin-left: auto; }

/* ── The neck — rows of strings stacked vertically ── */
.sitar-neck {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,170,60,0.12), transparent 55%),
    linear-gradient(180deg, #5a2e12 0%, #6d3a18 40%, #4e2810 70%, #3a1c0a 100%);
  border: 3px solid #2a1206;
  border-radius: 6px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 12px 0;
  touch-action: none;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* Wood grain */
.sitar-neck::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.07) 2px,
    rgba(0,0,0,0.07) 3px
  );
  pointer-events: none;
  z-index: 1;
}

/* Nut — vertical bar on the left */
.sitar-nut {
  position: absolute;
  left: 52px;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(to bottom, #e8d5a8, #c9a86a, #e8d5a8);
  border-right: 1px solid #8a6a30;
  z-index: 10;
  pointer-events: none;
}

/* Fret reference lines */
.sitar-fret-lines {
  position: absolute;
  left: 52px;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}
.sitar-fret-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.08);
}
.sitar-fret-line.major {
  background: rgba(255,220,150,0.22);
}

/* Each string row — full-width hitbox */
.sitar-string-hitbox {
  position: relative;
  width: 100%;
  height: 38px;
  z-index: 10;
  cursor: crosshair;
  display: flex;
  align-items: center;
}
.sitar-string-hitbox + .sitar-string-hitbox {
  border-top: 1px solid rgba(0,0,0,0.2);
}

/* Open-note label on the left */
.sitar-string-label {
  width: 52px;
  flex-shrink: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #e8c88a;
  font-family: monospace;
  z-index: 12;
  pointer-events: none;
  letter-spacing: 0.03em;
}

/* Track area right of the label */
.sitar-string-track {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;
}

/* The visual string line */
.sitar-string-line {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  border-radius: 1px;
  transition: background 0.1s;
}

/* Thicker bass strings, thinner treble — sitar brass/steel look */
.sitar-string-hitbox[data-thick="3"] .sitar-string-line {
  height: 3.5px;
  background: linear-gradient(to right, #8a7040, #f0d890, #c0a050, #f0d890, #8a7040);
  top: 50%;
  transform: translateY(-50%);
}
.sitar-string-hitbox[data-thick="2"] .sitar-string-line {
  height: 2.5px;
  background: linear-gradient(to right, #907848, #f4e0a0, #c8a858, #f4e0a0, #907848);
  top: 50%;
  transform: translateY(-50%);
}
.sitar-string-hitbox[data-thick="1"] .sitar-string-line {
  height: 1.5px;
  background: linear-gradient(to right, #a08850, #f8ecc0, #d0b060, #f8ecc0, #a08850);
  top: 50%;
  transform: translateY(-50%);
}

/* Pluck animation */
.sitar-string-hitbox.plucked .sitar-string-line {
  animation: sitar-vibrate 0.4s ease-out;
  background: linear-gradient(to right, transparent, #ffffff 20%, #ffffff 80%, transparent) !important;
}

@keyframes sitar-vibrate {
  0%   { transform: translateY(-50%); }
  20%  { transform: translateY(calc(-50% - 3px)); }
  40%  { transform: translateY(calc(-50% + 2px)); }
  60%  { transform: translateY(calc(-50% - 2px)); }
  80%  { transform: translateY(calc(-50% + 1px)); }
  100% { transform: translateY(-50%); }
}

/* Pitch cursor while sliding */
.sitar-pitch-cursor {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: rgba(245, 158, 11, 0.9);
  border-radius: 1px;
  pointer-events: none;
  z-index: 20;
  display: none;
}
.sitar-string-hitbox.active .sitar-pitch-cursor {
  display: block;
}

/* Semitone markers below the neck */
.sitar-markers {
  display: flex;
  position: relative;
  margin-left: 52px;
  height: 18px;
  margin-top: 4px;
  pointer-events: none;
}
.sitar-marker {
  position: absolute;
  font-size: 9px;
  color: #9ca3af;
  transform: translateX(-50%);
  white-space: nowrap;
}
.sitar-marker.major {
  font-weight: 700;
  color: #f59e0b;
}

/* Ripple on pluck */
.sitar-ripple {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(245, 158, 11, 0.75);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.1);
  opacity: 1;
  animation: sitarRipple 0.4s ease-out forwards;
  z-index: 15;
}
@keyframes sitarRipple {
  to { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

@media (max-width: 600px) {
  .sitar-string-hitbox { height: 30px; }
  .sitar-string-label { font-size: 10px; width: 40px; }
  .sitar-nut { left: 40px; }
  .sitar-fret-lines { left: 40px; }
  .sitar-markers { margin-left: 40px; }
}