minor small screen optimizations

src/App.jsx

@@ -589,7 +589,7 @@ export default function App() {
   }
 
   return (
-    <div className={`min-h-screen bg-surface text-white p-3${jamView ? ' xl:h-screen xl:overflow-hidden xl:flex xl:flex-col' : ''}`}>
+    <div className={`min-h-screen bg-surface text-white p-3 max-sm:p-2${jamView ? ' xl:h-screen xl:overflow-hidden xl:flex xl:flex-col' : ''}`}>
 
       {/* ── Header ── */}
       <header className="mb-2 flex items-center justify-between gap-2 flex-wrap">
@@ -628,7 +628,7 @@ export default function App() {
       </header>
 
       {/* ── Controls bar ── */}
-      <div className="mb-2 flex flex-wrap gap-2 items-center p-2 bg-panel border border-border rounded-xl">
+      <div className="mb-2 relative flex flex-wrap gap-2 items-center p-2 max-sm:p-1.5 bg-panel border border-border rounded-xl">
 
         {/* Instrument select */}
         <div className="relative">
@@ -731,7 +731,7 @@ export default function App() {
         )}
 
         {/* ── Jam roulette (L-60, jam-roulette.md §1.1/§1.2) ── */}
-        <div className="relative ml-auto" ref={rouletteRef}>
+        <div className="static sm:relative ml-auto" ref={rouletteRef}>
           <button
             type="button"
             onClick={() => setRouletteMenuOpen(o => !o)}
@@ -910,7 +910,7 @@ export default function App() {
           <span>{showDebug ? '▲' : '▼'}</span>
         </button>
         {showDebug && (
-          <div className="border-t border-border p-4">
+          <div className="border-t border-border p-4 max-sm:p-3">
             <Suspense fallback={null}>
               <DebugView
                 chroma={debugChroma}
@@ -937,7 +937,7 @@ export default function App() {
           <span>{showDrumView ? '▲' : '▼'}</span>
         </button>
         {showDrumView && (
-          <div className="border-t border-border p-4">
+          <div className="border-t border-border p-4 max-sm:p-3">
             <Suspense fallback={null}>
               <DrumView waveform={debugWaveform} bpm={bpm} />
             </Suspense>

src/components/ChordDetailModal.jsx

@@ -757,13 +757,13 @@ export default function ChordDetailModal({ chord, onClose, onChordClick, keyInfo
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-start justify-center bg-black/70 backdrop-blur-sm p-4 overflow-y-auto"
+      className="fixed inset-0 z-50 flex items-start justify-center bg-black/70 backdrop-blur-sm p-4 max-sm:p-2 overflow-y-auto"
       onClick={e => { if (e.target === e.currentTarget) onClose() }}
     >
-      <div className="w-full max-w-3xl bg-panel border border-border rounded-2xl shadow-2xl mt-8 mb-8">
+      <div className="w-full max-w-3xl bg-panel border border-border rounded-2xl shadow-2xl mt-8 mb-8 max-sm:my-2">
 
         {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+        <div className="flex items-center justify-between px-6 py-4 max-sm:px-4 max-sm:py-3 border-b border-border">
           <div>
             <h2 className="text-3xl font-black text-accent leading-none">{chord}</h2>
             <p className="text-xs text-gray-500 mt-0.5">{typeName} chord · tap a voicing to study it</p>
@@ -778,7 +778,7 @@ export default function ChordDetailModal({ chord, onClose, onChordClick, keyInfo
         </div>
 
         {/* Tab bar */}
-        <div className="flex gap-1 px-6 pt-4 overflow-x-auto">
+        <div className="flex gap-1 px-6 pt-4 max-sm:px-4 max-sm:pt-3 overflow-x-auto">
           {[
             { key: 'guitar',       label: '🎸 Guitar'       },
             { key: 'piano',        label: '🎹 Piano'         },
@@ -800,7 +800,7 @@ export default function ChordDetailModal({ chord, onClose, onChordClick, keyInfo
         </div>
 
         {/* Content */}
-        <div className="px-6 py-5">
+        <div className="px-6 py-5 max-sm:px-4 max-sm:py-4">
           {tab === 'guitar'       && <GuitarTab           chordName={chord} />}
           {tab === 'piano'        && <PianoTab             chordName={chord} />}
           {tab === 'theory'       && <TheoryTab            chordName={chord} />}

src/components/JamGuide.jsx

@@ -856,7 +856,7 @@ export function KnowledgeDock({ keyInfo, chordHistory = [], currentChord, onChor
         <div className="border-t border-border flex flex-col" style={{ height: '70vh' }}>
 
           {/* ── Section nav (Knowledge Center pills, D-20 §1) ── */}
-          <div className="flex items-center gap-1 px-4 py-2 border-b border-border overflow-x-auto">
+          <div className="flex items-center gap-1 px-4 py-2 max-sm:px-3 border-b border-border overflow-x-auto">
             {SECTIONS.map(s => {
               const active = section === s.id
               return (
@@ -879,7 +879,7 @@ export function KnowledgeDock({ keyInfo, chordHistory = [], currentChord, onChor
 
           {/* ── Explore — KB progression browser + famous progressions ── */}
           {section === 'explore' && (
-            <div className="flex-1 min-h-0 p-4 overflow-auto">
+            <div className="flex-1 min-h-0 p-4 max-sm:p-3 overflow-auto">
               <ExploreSection
                 keyInfo={keyInfo}
                 levels={levels}
@@ -891,7 +891,7 @@ export function KnowledgeDock({ keyInfo, chordHistory = [], currentChord, onChor
 
           {/* ── Voicings — picker (follows live chord) → VoicingBrowser ── */}
           {section === 'voicings' && (
-            <div className="flex-1 min-h-0 p-4 overflow-auto">
+            <div className="flex-1 min-h-0 p-4 max-sm:p-3 overflow-auto">
               <VoicingsSection
                 keyInfo={keyInfo}
                 chordHistory={chordHistory}
@@ -903,7 +903,7 @@ export function KnowledgeDock({ keyInfo, chordHistory = [], currentChord, onChor
 
           {/* ── Licks & Techniques — per-style LickCard grid ── */}
           {section === 'licks' && (
-            <div className="flex-1 min-h-0 p-4 overflow-auto">
+            <div className="flex-1 min-h-0 p-4 max-sm:p-3 overflow-auto">
               <LicksSection styles={styles} levels={levels} onToggleLevel={toggleLevel} />
             </div>
           )}

src/components/TryThis.jsx

@@ -156,10 +156,10 @@ function SubRow({ sub, instrument, onChordClick }) {
   const tag = CATEGORY_TAG[sub.category] ?? sub.category
   return (
     <div
-      className={`flex items-center gap-3 rounded-lg border border-border bg-border/30 p-2 ${ROW_MIN_H[instrument] ?? ROW_MIN_H.guitar}`}
+      className={`flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3 rounded-lg border border-border bg-border/30 p-2 ${ROW_MIN_H[instrument] ?? ROW_MIN_H.guitar}`}
     >
       {/* Left identity block (~180px) */}
-      <div className="flex w-[180px] shrink-0 flex-col gap-1">
+      <div className="flex w-full sm:w-[180px] shrink-0 flex-col gap-1">
         <div className="flex items-center gap-1.5">
           <button
             type="button"