/* Phone layout: notation and answers stay adjacent; secondary controls follow. */
@media (max-width: 680px) {
 .topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; min-height:0; padding:12px 4% 8px; gap:8px; }
 .brand { font-size:25px; gap:8px; }
 .brand-symbol { width:32px; height:32px; }
 .header-actions { display:contents; }
 #help { grid-column:2; grid-row:1; justify-self:end; min-height:36px; font-size:12px; padding:6px 0 6px 8px; }
 #choose-theme { grid-column:1; grid-row:2; justify-self:start; }
 #connect { grid-column:2; grid-row:2; justify-self:end; }
 .topbar .midi-button { padding:7px 10px; min-height:38px; gap:6px; font-size:12px; }
 main { padding:4px 4% 16px; }
 .mode-bar { margin-bottom:10px; gap:6px; }
 .mode-bar > .segmented { padding:3px; }
 .mode-bar > .segmented button { padding:7px 14px; min-height:36px; font-size:13px; }
 .timed-actions { gap:6px; }
 .timed-actions .note-action { padding:8px 10px; min-height:38px; }
 .run-clock { font-size:22px; min-width:58px; }
 .scoreboard { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; padding:0 2px 10px; align-items:start; }
 .metric-label { display:flex; align-items:center; min-height:25px; margin:0 0 2px; font-size:9px; letter-spacing:0; line-height:1.25; }
 .scoreboard strong { font-size:21px; white-space:nowrap; }
 .scoreboard small { font-size:10px; margin-left:2px; }
 .answer-metric { min-width:0; margin:0; padding:0; }
 .answer-metric::before { width:38px; height:26px; bottom:0; left:-3px; }
 .session-actions { grid-column:1/-1; width:auto; margin:0; justify-content:space-between; gap:8px; }
 .session-actions .session-count { flex-direction:row; align-items:baseline; gap:4px; font-size:11px; }
 .session-count > span:first-child { font-size:14px; }
 .session-actions .reset-button { min-height:32px; padding:5px 9px; font-size:11px; }
 .workspace { gap:0; }
 .sheet { display:grid; grid-template-columns:minmax(0,1fr); min-height:0; flex:none; border-radius:22px; }
 .sheet-top { grid-row:1; padding:8px 12px 2px; gap:4px; }
 .key-signature-header { min-width:0; gap:5px; }
 .key-name-reveal { min-height:28px; }
 .practice-tag { font-size:13px; }
 .compact-settings { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; width:100%; }
 .compact-settings .compact-clef { grid-column:1/4; min-width:0; }
 .clef-choice { flex:1; min-height:36px; padding:3px 8px; }
 .compact-sound { grid-column:4; grid-row:1; padding:0; justify-content:flex-end; min-height:36px; gap:5px; }
 .compact-settings select { width:100%; max-width:none; min-width:0; height:36px; padding:5px 22px 5px 8px; }
 #key-signature { grid-column:1/3; grid-row:2; }
 #range { grid-column:3/5; grid-row:2; }
 /* Place MIDI matching with the practice settings, above the notation. */
 .sheet-bottom { display:contents; }
 .sheet-bottom .practice-toggles { grid-row:2; padding:0 12px; justify-content:flex-end; }
 .practice-toggle { min-height:30px; font-size:11px; gap:7px; }
 .staff { grid-row:3; grid-column:1; min-height:clamp(128px, 40vw, 184px); padding:4px 6px; }
 .staff svg { width:100%; height:auto; max-height:none; }
 .feedback { grid-row:4; min-height:0; padding:0 12px; font-size:12px; }
 .feedback:not(:empty) { padding-bottom:6px; }
 .sheet-bottom .note-actions { grid-row:5; width:auto; margin:0; padding:0 12px 10px; gap:8px; }
 .note-actions .note-action { min-height:38px; padding:8px 12px; font-size:13px; }
 .run-overlay { position:relative; grid-row:3; grid-column:1; inset:auto; margin:0 12px; gap:8px; padding:8px; }
 .run-overlay > strong { font-size:26px; }
 .keyboard-panel { display:flex; flex-direction:column; gap:8px; margin-top:8px; padding:10px 12px; border-radius:22px; }
 .keyboard-toolbar, .keyboard-controls { display:contents; }
 .keyboard-controls .input-switch { order:0; width:100%; }
 .keyboard-controls .input-switch button { min-height:36px; padding:7px 6px; font-size:12px; }
 .piano-scroll, .note-choices { order:1; width:100%; }
 .keyboard-toolbar > div:first-child { order:2; width:100%; justify-content:flex-start; gap:0 14px; }
 .keyboard-label-toggle { min-height:34px; font-size:11px; gap:6px; }
 .octave-control { order:3; justify-content:center; min-height:34px; }
 .octave-control button { width:34px; height:34px; }
 .keyboard-footer { display:none; }
 .notes-mode .keyboard-toolbar > div:first-child { display:none; }
 .note-choices { gap:5px; }
 .note-choice { min-height:44px; font-size:19px; border-radius:11px; }
 .keyboard-panel:not(.typing-mode):not(.notes-mode) .piano-scroll { padding:8px 8px 6px; border-radius:13px; }
 .input-switch [data-input='typing'],
 .keyboard-label-toggle:has(#keyboard-exact),
 .keyboard-label-toggle:has(#octaves),
 .octave-control { display:none; }
 .piano { height:145px; min-width:0; gap:2px; }
 .piano-key.black { width:9.15%; }
 .piano-key .key-name { font-size:15px; }
 .piano-key.black .key-name { font-size:12px; }
 .typing-keyboard { padding:10px 16px; }
}
@media (max-width: 350px) {
 .brand { font-size:22px; }
 .topbar .midi-button { font-size:11px; padding:7px; gap:4px; }
 .scoreboard strong { font-size:19px; }
 .metric-label { font-size:8px; }
 .note-choice { font-size:17px; }
}