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;
   }
 }