/* virtual-electric-guitar.css */
body { font-family: Inter, sans-serif; }

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

/* ── Toggle groups (shared) ── */
.toggle-wrap {
  display: flex; align-items: center; gap: 1px;
  background: #f3f4f6; border-radius: 8px; padding: 3px;
}
.toggle-btn {
  padding: 5px 12px; border-radius: 6px; font-size: .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;
}
.toggle-btn.active { background: #fff; color: #065f46; box-shadow: 0 1px 4px rgba(0,0,0,.10); }
.toggle-btn.tone-dist.active { color: #b91c1c; } /* Crunch = red tint */

/* ── Chord grid ── */
.chord-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin-bottom: 14px;
  touch-action: none;
}
@media (max-width: 480px) { .chord-grid { grid-template-columns: repeat(4, 1fr); } }

.chord-btn {
  background: #f9fafb; border: 1.5px solid #e5e7eb;
  border-radius: 8px; padding: 7px 4px;
  font-size: .72rem; font-weight: 700; color: #374151;
  cursor: pointer; text-align: center;
  user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background .1s, border-color .1s, transform .06s;
  touch-action: manipulation;
}
.chord-btn:hover { background: #f0fdf4; border-color: #6ee7b7; }
.chord-btn:active { transform: scale(.94); }
.chord-btn.chord-active {
  background: #ecfdf5; border-color: #059669; color: #065f46;
  box-shadow: 0 0 0 2px #a7f3d0;
}
/* Chord quality sub-label */
.chord-btn span {
  display: block; font-size: 6.5px; font-weight: 500;
  color: #9ca3af; margin-top: 1px; letter-spacing: .03em;
}

/* ── Fretboard ── */
.fretboard-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  touch-action: none;
}
.fretboard {
  display: grid;
  /* cols: string-label | open | fret1 | fret2 | fret3 | fret4 */
  grid-template-columns: 28px repeat(5, 1fr);
  grid-template-rows: repeat(6, 38px);
  background: linear-gradient(170deg, #3b1e08 0%, #2a1305 50%, #1e0e04 100%);
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

/* Wood grain overlay */
.fretboard::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 37px,
    rgba(0,0,0,.12) 37px, rgba(0,0,0,.12) 38px
  );
}

/* Nut (thick left bar) */
.fretboard::after {
  content: ''; position: absolute;
  left: 28px; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, #e0c070 0%, #a08030 50%, #d0b060 100%);
  z-index: 3; pointer-events: none;
}

/* String label cells (col 1) */
.str-lbl {
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 6px; font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,.75); z-index: 2; position: relative;
  grid-column: 1;
}

/* Fret cells */
.fret-cell {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  border-left: 2px solid rgba(180,140,60,.55); /* fret wire */
  transition: background .08s;
}
.fret-cell:hover { background: rgba(255,210,80,.09); }
.fret-cell.cell-struck { animation: cellStruck .38s ease-out forwards; }
@keyframes cellStruck {
  0%   { background: rgba(255,200,60,.38); }
  60%  { background: rgba(255,200,60,.12); }
  100% { background: rgba(255,200,60,0);   }
}

/* Open string cells (col 2) — no left border (behind nut) */
.fret-cell.open-cell { border-left: none; }

/* The actual string line running through cells */
.str-line {
  position: absolute; left: 0; right: 0;
  border-radius: 1px; pointer-events: none; z-index: 1;
}
/* String thicknesses & colours (bass=warm/thick, treble=bright/thin) */
.str-E2 { top: 50%; transform: translateY(-50%); height: 3px;   background: #c0a040; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.str-A2 { top: 50%; transform: translateY(-50%); height: 2.5px; background: #b8a050; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.str-D3 { top: 50%; transform: translateY(-50%); height: 2px;   background: #d0c080; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.str-G3 { top: 50%; transform: translateY(-50%); height: 1.5px; background: #e0d8b8; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.str-B3 { top: 50%; transform: translateY(-50%); height: 1.2px; background: #e8e0c8; box-shadow: 0 0 2px rgba(255,240,200,.25); }
.str-E4 { top: 50%; transform: translateY(-50%); height: 1px;   background: #f0e8d0; box-shadow: 0 0 2px rgba(255,245,210,.2); }

/* Fret position dot (3rd fret inlay) */
.fret-dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,220,120,.22); left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 0;
}

/* Fret number labels above fretboard */
.fret-header {
  display: grid;
  grid-template-columns: 28px repeat(5, 1fr);
  margin-bottom: 3px;
}
.fret-num {
  font-size: 8px; color: #9ca3af; text-align: center; padding: 0 2px;
}

/* ── Landscape banner ── */
.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; }