Improve virtual guitar UX

src/App.css

@@ -336,6 +336,16 @@ button {
   transform: translateY(-2px);
 }
 
+.hint-button.active {
+  background-color: var(--color-primary);
+  color: white;
+  box-shadow: 0 4px 12px rgba(var(--hue-primary), 0.3);
+}
+
+.hint-button.active:hover {
+  background-color: var(--color-primary-dark);
+}
+
 .zen-button {
   background-color: transparent;
   border: 2px solid var(--color-text-muted);

src/App.tsx

@@ -57,6 +57,7 @@ function App() {
   const [matchStartTime, setMatchStartTime] = useState<number | null>(null);
   const [feedbackMessage, setFeedbackMessage] = useState<string>("");
   const [revealed, setRevealed] = useState(false);
+  const [virtualNote, setVirtualNote] = useState<number | null>(null);
 
   const currentTuning = TUNINGS[settings.tuningId];
   const currentInstrumentDef = INSTRUMENT_DEFINITIONS[settings.instrument];
@@ -233,6 +234,12 @@ function App() {
   // Virtual Guitar Handler
   const handleVirtualGuitarPlay = useCallback((playedMidi: number) => {
     playNote(playedMidi, 0.5); // Feedback sound
+    setVirtualNote(playedMidi);
+
+    // Clear the note visualization after a short delay
+    setTimeout(() => {
+      setVirtualNote(null);
+    }, 500);
 
     if (playedMidi === targetMidi) {
       // Instant match
@@ -378,11 +385,11 @@ function App() {
       )}
 
       <main className="main-stage">
-        <div className={`card sheet-music-card ${settings.showHint ? 'has-hint' : ''} ${settings.zenMode ? 'zen-mode' : ''}`}>
+        <div className={`card sheet-music-card ${(settings.showHint || settings.showFretboard) ? 'has-hint' : ''} ${settings.zenMode ? 'zen-mode' : ''}`}>
           <div className="sheet-music-container">
             <SheetMusic
               targetMidi={targetMidi}
-              playedMidi={pitchData?.midi}
+              playedMidi={virtualNote ?? pitchData?.midi}
               keySignature={settings.keySignature}
               clef={currentInstrumentDef.clefMode}
               transpose={currentInstrumentDef.transpose}
@@ -420,6 +427,7 @@ function App() {
                   interactive={settings.showFretboard}
                   onPlayNote={handleVirtualGuitarPlay}
                   showHints={settings.showHint}
+                  maxFrets={15}
                 />
               )}
             </div>
@@ -429,15 +437,7 @@ function App() {
 
           {!settings.zenMode && (
             <div className="action-row" style={{ marginTop: '24px', display: 'flex', justifyContent: 'center', gap: '16px' }}>
-              <button
-                className={`hint-button ${settings.showHint ? 'active' : ''}`}
-                onClick={() => setSettings(s => ({ ...s, showHint: !s.showHint }))}
-                title="Keyboard Shortcut: H"
-              >
-                <HelpCircle size={18} />
-                {settings.showHint ? "Hide Hint" : "Show Hint"}
-              </button>
-
+              {currentInstrumentDef.showTuning && (
                 <button
                   className={`hint-button ${settings.showFretboard ? 'active' : ''}`}
                   onClick={() => setSettings(s => ({ ...s, showFretboard: !s.showFretboard }))}
@@ -446,6 +446,16 @@ function App() {
                   <Guitar size={18} />
                   Guitar
                 </button>
+              )}
+
+              <button
+                className={`hint-button ${settings.showHint ? 'active' : ''}`}
+                onClick={() => setSettings(s => ({ ...s, showHint: !s.showHint }))}
+                title="Keyboard Shortcut: H"
+              >
+                <HelpCircle size={18} />
+                {settings.showHint ? "Hide Hint" : "Show Hint"}
+              </button>
 
               <button
                 className="hint-button"