/* virtual-guitar: scoped under #virtual-guitar */
#virtual-guitar .vg-display { padding: 10px 18px; text-align: left; flex: 1 1 220px; min-height: 52px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
#virtual-guitar .vg-name { font: 600 26px/1.2 var(--sans); }
#virtual-guitar .vg-chords { margin-top: 12px; }
#virtual-guitar .vg-chord { min-height: 44px; min-width: 56px; justify-content: center; font-size: 16px; }
#virtual-guitar .vg-key { font-size: 10px; opacity: .6; font-weight: 600; }
#virtual-guitar .vg-strum { position: relative; height: 230px; margin: 14px 0 6px; border-radius: 20px; background: var(--board); touch-action: none;
  user-select: none; -webkit-user-select: none; cursor: grab; overflow: hidden; border: 1px solid var(--line); }
#virtual-guitar .vg-strum::before { content: ''; position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%;
  background: var(--canvas); opacity: .55; pointer-events: none; }
#virtual-guitar .vg-string { position: absolute; left: 0; right: 0; height: 0; pointer-events: none; }
#virtual-guitar .vg-line { position: absolute; left: 44px; right: 12px; top: 0; height: var(--w, 2px); transform: translateY(-50%); background: var(--muted); border-radius: 2px; }
#virtual-guitar .vg-string.muted .vg-line { opacity: .35; background: repeating-linear-gradient(90deg, var(--muted) 0 10px, transparent 10px 16px); }
#virtual-guitar .vg-lab { position: absolute; left: 10px; top: 0; transform: translateY(-50%); font: 600 12px var(--sans); color: var(--muted); white-space: nowrap; }
#virtual-guitar .vg-string.ring .vg-line { animation: vg-ring .45s ease-out; background: var(--ink); }
@keyframes vg-ring {
  0% { transform: translateY(-50%) scaleY(3); } 20% { transform: translateY(-40%) scaleY(2.4); } 40% { transform: translateY(-60%) scaleY(1.8); }
  60% { transform: translateY(-45%) scaleY(1.4); } 100% { transform: translateY(-50%) scaleY(1); }
}
#virtual-guitar .vg-row { margin: 8px 0 4px; }
#virtual-guitar .fb .dot { pointer-events: none; }
@media (max-width: 640px) {
  #virtual-guitar .vg-strum { height: 210px; }
  #virtual-guitar .vg-chord { min-width: 48px; font-size: 15px; padding: 6px 10px; }
  #virtual-guitar label.field { width: 100%; justify-content: space-between; }
  #virtual-guitar label.field select { flex: 1; min-width: 0; }
}