/* virtual-dulcimer.css */

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);
}

/* ── Reverb toggle ── */
.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); }

/* ── Landscape banner ── */
.landscape-banner {
  background: #fefce8; border: 1px solid #fde68a; border-radius: 0.5rem;
  padding: 8px 14px; font-size: 0.75rem; color: #92400e;
  text-align: center; margin-bottom: 10px;
}

/* ── Dulcimer panel: labels + fretboard side by side ── */
.dulcimer-panel { display: block; }

/* ── String labels overlaid inside the body at left edge ── */
.dul-labels-inner {
  position: absolute;
  left: 10px; top: 0; bottom: 0;
  z-index: 6; pointer-events: none;
}
.dul-label-row {
  position: absolute; left: 0;
  transform: translateY(-50%); line-height: 1;
}
/* String centres: 12px / 60px / 108px within 120px body */
.dul-label-row.melody-lbl { top: 12px; }
.dul-label-row.mid-lbl    { top: 60px; }
.dul-label-row.bass-lbl   { top: 108px; }
.dul-ln { display: block; font-size: 8.5px; font-weight: 700; color: rgba(255,255,255,0.82); }
.dul-ls { display: block; font-size: 6.5px; color: rgba(255,215,110,0.65); white-space: nowrap; }

/* ── Fretboard section ── */
.dul-fret-section { display: contents; }

/* ── Dulcimer body ── */
.dulcimer-body {
  position: relative;
  height: 120px;
  background: linear-gradient(160deg, #7a4e20 0%, #4a2c0e 45%, #3a1e08 100%);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    inset 0 2px 10px rgba(255,170,70,0.08),
    inset 0 -6px 20px rgba(0,0,0,0.45),
    0 6px 20px rgba(0,0,0,0.18);
  cursor: crosshair;
}
/* Subtle wood grain */
.dulcimer-body::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg, transparent, transparent 5px,
    rgba(0,0,0,0.025) 5px, rgba(0,0,0,0.025) 10px
  );
  pointer-events: none; z-index: 0;
}
/* Top sheen */
.dulcimer-body::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,160,60,0.07) 0%, transparent 55%);
  pointer-events: none; z-index: 0;
}

/* ── Nut ── */
.dulcimer-nut {
  position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
  background: linear-gradient(180deg, #e0b870 0%, #a07838 50%, #d0a860 100%);
  z-index: 5; border-radius: 3px 0 0 3px;
  box-shadow: 2px 0 6px rgba(0,0,0,0.35), inset -1px 0 2px rgba(255,200,100,0.2);
}

/* ── Bridge ── */
.dulcimer-bridge {
  position: absolute; right: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, #c09858 0%, #806030 50%, #b08848 100%);
  z-index: 5; border-radius: 0 3px 3px 0;
  box-shadow: -1px 0 4px rgba(0,0,0,0.3);
}

/* ── Strings — highly visible with metallic sheen + glow ── */
.dstr {
  position: absolute; left: 8px; right: 6px;
  border-radius: 1px; z-index: 2; pointer-events: none;
  transition: box-shadow 0.1s;
}

/* Melody — thinnest, silver */
.melody-str {
  top: 11px; height: 2px;
  background: #d8d2c0;
  box-shadow:
    0 0 3px 1px rgba(255,248,210,0.3),
    0 2px 3px rgba(0,0,0,0.5);
}

/* Middle drone */
.mid-str {
  top: 59px; height: 2.5px;
  background: #c8c2ae;
  box-shadow:
    0 0 3px 1px rgba(248,235,190,0.25),
    0 2px 3px rgba(0,0,0,0.55);
}

/* Bass drone — bronze wound */
.bass-str {
  top: 107px; height: 3px;
  background: #a87830;
  box-shadow:
    0 0 3px 1px rgba(200,148,50,0.3),
    0 2px 3px rgba(0,0,0,0.55);
}

/* Hover — subtle brighten only */
.dstr.str-hover {
  box-shadow:
    0 0 6px 2px rgba(255,245,180,0.45),
    0 2px 3px rgba(0,0,0,0.45);
  filter: brightness(1.5);
}

/* Strike animation */
.dstr.str-struck { animation: strStruck 0.44s ease-out forwards; }
@keyframes strStruck {
  0%   { transform: translateY(0);      filter: brightness(3.2); }
  15%  { transform: translateY(-2.5px);                          }
  30%  { transform: translateY( 2.5px); filter: brightness(2.2); }
  50%  { transform: translateY(-1.2px);                          }
  68%  { transform: translateY( 0.8px); filter: brightness(1.6); }
  84%  { transform: translateY(-0.3px);                          }
  100% { transform: translateY(0);      filter: brightness(1);   }
}

/* ── Strum-zone dividers (hairline hints at pick vs strum areas) ── */
.strum-zone-line {
  position: absolute; left: 8px; right: 6px; height: 1px;
  background: linear-gradient(
    90deg, transparent 0%, rgba(255,210,120,0.14) 20%,
    rgba(255,210,120,0.22) 50%, rgba(255,210,120,0.14) 80%, transparent 100%
  );
  pointer-events: none; z-index: 1;
}

/* ── Fret lines ── */
.dfl {
  position: absolute; top: 5px; bottom: 5px; width: 2px;
  background: linear-gradient(180deg, #d4b060 0%, #966820 50%, #c8a050 100%);
  z-index: 3; pointer-events: none; border-radius: 1px;
  box-shadow: 0 0 4px rgba(180,130,40,0.25);
}

/* ── Octave dot ── */
.doct-dot {
  position: absolute; top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 7px; height: 7px; background: #c8a850;
  border-radius: 50%; z-index: 2; pointer-events: none;
  box-shadow: 0 0 6px rgba(210,170,60,0.55);
}

/* ── Clickable fret zones ── */
.dfz {
  position: absolute; top: 0; bottom: 0; z-index: 4;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.dfz.dfz-struck { animation: fzStruck 0.4s ease-out forwards; }
@keyframes fzStruck {
  0%   { background: rgba(255,200,80,0.26); }
  40%  { background: rgba(255,200,80,0.09); }
  100% { background: rgba(255,200,80,0);    }
}

/* ── Fret labels ── */
.dulcimer-fret-labels { position: relative; height: 30px; margin-top: 4px; }
.dfl-label {
  position: absolute; text-align: center;
  transform: translateX(-50%); line-height: 1.2; pointer-events: none;
}
.dfl-note { display: block; font-size: 8px; font-weight: 700; color: #374151; white-space: nowrap; }
.dfl-key  { display: block; font-size: 7px; font-family: monospace; font-weight: 600; color: #9ca3af; }

/* ── Ripple ── */
.fret-ripple {
  position: fixed; pointer-events: none; z-index: 50; border-radius: 3px;
  background: rgba(255,215,100,0.22);
  animation: fretRip 0.42s ease-out forwards;
}
@keyframes fretRip {
  from { opacity: 0.75; transform: scaleX(1)   scaleY(1);   }
  to   { opacity: 0;    transform: scaleX(1.35) scaleY(2.5); }
}

/* ── Table ── */
tbody tr:nth-child(even) { background: #f9fafb; }