/* virtual-harp.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 .15s, color .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,.10); }

/* ── Harp body SVG container ── */
.harp-wrap {
  position: relative;
  width: 100%;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.harp-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ── String colours ── */
.harp-string { stroke-linecap: round; transition: filter .06s; }
.harp-string.sc-c    { stroke: #d63031; }          /* C strings — red    */
.harp-string.sc-f    { stroke: #2d3436; }          /* F strings — black  */
.harp-string.sc-nat  { stroke: #d4c5a0; }          /* naturals — cream   */
.harp-string.sc-nat:hover { stroke: #f0dfb8; }

/* Pluck animation applied via JS class */
.harp-string.hs-pluck { animation: harpPluck .55s ease-out forwards; }
@keyframes harpPluck {
  0%   { filter: brightness(3.5) drop-shadow(0 0 4px rgba(255,240,160,.9)); transform-origin: center; }
  10%  { transform: scaleX(1.04); }
  25%  { transform: scaleX(.97); filter: brightness(2.2); }
  45%  { transform: scaleX(1.02); }
  65%  { transform: scaleX(.99); filter: brightness(1.4); }
  85%  { transform: scaleX(1.005); }
  100% { transform: scaleX(1);    filter: brightness(1); }
}

/* ── Note labels below each string ── */
.harp-label {
  font-size: 8px; font-weight: 700; text-anchor: middle;
  pointer-events: none; user-select: none;
}
.harp-label.lbl-c   { fill: #b02020; }
.harp-label.lbl-f   { fill: #1a1a2e; }
.harp-label.lbl-nat { fill: #6b7280; }

/* ── Octave dots on C strings ── */
.harp-oct-dot { pointer-events: none; }

/* ── Glissando ripple ── */
.harp-ripple {
  position: fixed; pointer-events: none; z-index: 50;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,220,100,.55);
  transform: translate(-50%, -50%);
  animation: hRipple .4s ease-out forwards;
}
@keyframes hRipple {
  from { opacity: .8; transform: translate(-50%,-50%) scale(1);   }
  to   { opacity: 0;  transform: translate(-50%,-50%) scale(2.8); }
}

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

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