mobile UI improvements

src/App.css

@@ -505,81 +505,206 @@ button {
   box-shadow: var(--shadow-sm);
 }
 
+/* Mobile Landscape Optimization */
+/* Staff Row Wrapper (Removed) */
+/* .side-hint-note (Removed) */
+
+
 /* Mobile Landscape Optimization */
 @media (max-height: 500px) and (orientation: landscape) {
   .app-header {
-    padding: 4px var(--spacing-md);
+    padding: 2px var(--spacing-md);
+  }
+
+  /* Hide Title/Logo to save space for content */
+  .app-header-left {
+    display: none;
   }
 
   .main-stage {
-    padding: 4px;
-    flex-direction: row;
-    /* Side-by-side if screen is wide enough */
-    align-items: stretch;
-    gap: var(--spacing-md);
+    padding: 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0;
   }
 
   .card.sheet-music-card {
     max-width: 95vw;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0;
+    width: 100%;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  /* Staff Row: Horizontal Layout for Staff + Note Name */
+  .staff-row {
     flex-direction: row;
-    flex-wrap: wrap;
     justify-content: center;
     align-items: center;
-    padding: var(--spacing-sm);
+    width: 100%;
+    margin-bottom: -10px;
+    gap: 16px;
+    /* Space between note and staff */
+  }
+
+  .side-hint-note {
+    display: block;
+    /* Show it here */
+    font-size: 1.5rem;
+    /* Reduced from 3rem */
+    margin-right: 0;
+    z-index: 10;
+    /* Prevent shrinking */
+    flex-shrink: 0;
   }
 
   /* Specific adjustment for sheet music container */
   .sheet-music-container {
-    width: auto;
-    flex: 1;
-    min-width: 250px;
-    max-width: 50%;
-    display: flex;
+    width: 100%;
+    flex: 0 0 auto;
+    transform: scale(1.1);
+    transform-origin: center top;
+    /* Center it again */
     justify-content: center;
+    margin-bottom: -15px;
+    /* Negative margin to reduce gap (adjusted from -30px to prevent overlap) */
   }
 
-  /* Hint card should be on the side */
+  /* In Zen Mode, the feedback area is missing, so we need less negative margin (or even positive) to prevent overlap */
+  .card.sheet-music-card.zen-mode .sheet-music-container {
+    margin-bottom: 5px;
+    /* Add some breathing room since the feedback spacer is gone */
+  }
+
+  /* Hint card container (Fretboard + Note Name) */
   .hint-card {
     margin-top: 0;
-    margin-left: var(--spacing-md);
+    /* Remove top margin */
     flex: 1;
-    min-width: 250px;
-    max-width: 45%;
-    padding: var(--spacing-xs);
+    width: 100%;
+    max-width: 100%;
+    padding: 0;
+    background: transparent;
+    display: flex;
+    flex-direction: row;
+    /* Side-by-side */
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    /* Reduced gap from 16px */
   }
 
-  .hint-note {
-    font-size: 1.2rem;
-    margin-bottom: 2px;
+  /* The note name inside hint card */
+  .hint-card .hint-note {
+    display: block;
+    font-size: 2rem;
+    /* Visible size */
+    margin-bottom: 0;
+    flex-shrink: 0;
+    font-weight: 800;
+    width: 4rem;
+    /* Fixed width to stabilize fretboard */
+    text-align: center;
   }
 
-  /* Make sure hint isn't huge and scrolls if needed */
+  /* Make fretboard larger */
   .fretboard-container {
-    max-height: 150px;
+    max-height: 180px;
     overflow-y: hidden;
     display: flex;
     justify-content: center;
+    align-items: center;
+    transform: scale(1.3);
+    /* Larger scale as requested */
+    transform-origin: center center;
+    flex-grow: 1;
+    /* Allow it to take space */
+    max-width: none;
+    /* Remove constraints */
   }
 
   .fretboard-container svg {
-    height: 100%;
+    height: 130px;
     width: auto;
     max-width: 100%;
   }
 
+  /* Hide Instruction Text ("Play note above") */
+  .instruction-text {
+    display: none;
+  }
+
   /* Move feedback and actions */
   .feedback-area {
     width: 100%;
     height: 30px;
-    order: 3;
-    /* Force to bottom */
-    margin-top: 5px;
+    margin-top: 15px;
+    /* Increased from 10px */
+    margin-bottom: 2px;
+    z-index: 20;
+    justify-content: center;
   }
 
   .action-row {
     margin-top: 5px !important;
-    order: 4;
+    /* Increased slightly */
     width: 100%;
+    padding-bottom: 4px;
+  }
+
+  /* Hide Zen Toggle in Landscape Mobile to prevent cutoff/clutter
+     User can rotate to portrait to access it or we move it. 
+     For now, hiding it cleans up the view.
+  */
+  /* Restore Zen Toggle in Landscape Mobile */
+  .exit-zen-button {
+    display: block;
+    transform: scale(0.8);
+    /* Scale down slightly */
+    bottom: 5px;
+    /* Stick to bottom */
+    right: 5px;
+    /* Stick to right */
+    padding: 6px 12px;
+    font-size: 0.8rem;
+    background: rgba(255, 255, 255, 0.9);
+    /* Opaque enough to see */
+    border: 1px solid #ccc;
+    z-index: 100;
+  }
+
+  .hint-button,
+  .skip-button {
+    padding: 4px 16px;
+    font-size: 0.9rem;
+  }
+
+  /* Pitch monitor: Keep visible but compact */
+  .pitch-monitor-bar {
+    display: flex;
+    margin-top: 2px;
+    gap: var(--spacing-sm);
+    transform: scale(0.7);
+  }
+
+  .mic-button {
+    width: 48px;
+    height: 48px;
+  }
+
+  .pitch-readout {
+    flex-direction: row;
+    gap: 8px;
+    align-items: baseline;
+  }
+
+  .detected-note {
+    font-size: 1.5rem;
   }
 }
 

src/App.tsx

@@ -342,7 +342,7 @@ function App() {
       )}
 
       <main className="main-stage">
-        <div className={`card sheet-music-card ${settings.showHint ? 'has-hint' : ''}`}>
+        <div className={`card sheet-music-card ${settings.showHint ? 'has-hint' : ''} ${settings.zenMode ? 'zen-mode' : ''}`}>
           <div className="sheet-music-container">
             <SheetMusic
               targetMidi={targetMidi}
@@ -351,7 +351,7 @@ function App() {
               clef={currentInstrumentDef.clefMode}
               transpose={currentInstrumentDef.transpose}
               width={Math.min(window.innerWidth - 40, 500)}
-              height={currentInstrumentDef.clefMode === 'grand' ? 300 : 250}
+              height={currentInstrumentDef.clefMode === 'grand' ? 260 : 180}
               hideTargetNote={settings.gameMode === 'ear_training' && !revealed}
             />
           </div>
@@ -383,7 +383,7 @@ function App() {
 
           {settings.showHint && (
             <div className="hint-card">
-              <div className="hint-note">
+              <div className="hint-note landscape-hint-note">
                 {getNoteDetails(targetMidi + currentInstrumentDef.transpose).scientific}
               </div>
               {currentInstrumentDef.showTuning && currentTuning && (

src/components/SheetMusic.tsx

@@ -56,12 +56,12 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
 
         if (clef === 'grand') {
             // Create Treble Stave
-            const topStave = new Stave(20, 40, width - 30);
+            const topStave = new Stave(20, 20, width - 30);
             topStave.addClef('treble').addKeySignature(keySignature);
             topStave.setContext(context).draw();
 
             // Create Bass Stave
-            const bottomStave = new Stave(20, 150, width - 30);
+            const bottomStave = new Stave(20, 110, width - 30);
             bottomStave.addClef('bass').addKeySignature(keySignature);
             bottomStave.setContext(context).draw();
 
@@ -82,7 +82,7 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
 
         } else {
             // Single Stave
-            const stave = new Stave(10, 80, width - 20); // Centered vertically
+            const stave = new Stave(10, 30, width - 20); // Centered vertically (tighter)
             stave.addClef(clef).addKeySignature(keySignature);
             stave.setContext(context).draw();
             // Map the single clef to the key matching the 'clef' prop so logic below works