:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

@media (max-width: 720px), (pointer: coarse) and (max-width: 900px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
  }

  body {
    touch-action: manipulation;
  }

  .app-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100dvh;
    padding-bottom: calc(62px + var(--safe-bottom));
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .app-header {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 62px;
    padding: calc(10px + var(--safe-top)) calc(12px + var(--safe-right)) 10px calc(12px + var(--safe-left));
    flex-wrap: wrap;
    gap: 10px;
    background: var(--header-bg);
  }

  .brand-block {
    min-width: 0;
    flex: 1 1 auto;
    gap: 10px;
  }

  .theme-picker {
    width: 44px;
    height: 42px;
    flex: 0 0 44px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 0;
  }

  .theme-picker > svg {
    width: 20px;
    height: 20px;
  }

  .theme-picker .theme-swatch {
    position: absolute;
    right: 7px;
    bottom: 6px;
    width: 9px;
    height: 9px;
  }

  .theme-picker select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  .brand-mark {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
  }

  .brand-mark svg {
    width: 21px;
    height: 21px;
  }

  h1 {
    font-size: 18px;
  }

  .brand-block p {
    display: none;
  }

  .app-nav {
    position: fixed;
    z-index: 50;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(62px + var(--safe-bottom));
    margin: 0;
    padding: 7px calc(10px + var(--safe-right)) calc(7px + var(--safe-bottom)) calc(10px + var(--safe-left));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: var(--nav-bg);
    box-shadow: var(--nav-shadow);
  }

  .nav-button {
    width: 100%;
    height: 48px;
    justify-content: center;
    font-size: 12px;
  }

  .nav-button svg {
    width: 18px;
    height: 18px;
  }

  .file-actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--line);
  }

  .file-summary {
    width: 100%;
    min-width: 0;
    max-width: none;
    text-align: left;
  }

  .file-summary strong {
    max-width: 100%;
    font-size: 12px;
  }

  .file-summary span {
    font-size: 9px;
  }

  .file-actions .button {
    max-width: 118px;
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    white-space: nowrap;
  }

  .random-page.active,
  .workspace.active {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    padding: 12px calc(12px + var(--safe-right)) 20px calc(12px + var(--safe-left));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
  }

  .generator-panel,
  .generator-settings,
  .player-panel,
  .metronome-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: auto;
    padding: 14px;
    border-radius: 8px;
    box-shadow: var(--shadow);
  }

  .generator-panel {
    display: grid;
    grid-template-rows: auto auto auto auto;
  }

  .generator-settings,
  .metronome-panel {
    margin-top: 12px;
  }

  .metronome-panel {
    overflow: visible;
  }

  .section-heading,
  .generator-heading {
    min-height: 44px;
  }

  .section-heading h2 {
    font-size: 17px;
  }

  .random-note-stage {
    width: 100%;
    min-height: 250px;
    aspect-ratio: auto;
  }

  .random-note-display,
  .random-note-display .single-note,
  .note-placeholder {
    font-size: 88px;
  }

  .stage-corner {
    top: 14px;
    font-size: 8px;
  }

  .stage-corner-left {
    left: 23px;
  }

  .stage-corner-right {
    right: 20px;
  }

  .generator-actions {
    min-height: 72px;
    grid-template-columns: 0.9fr 1.1fr;
  }

  .generator-actions .button,
  .count-stepper input,
  .count-stepper .step-button {
    min-height: 44px;
  }

  .history-band {
    min-height: 102px;
  }

  .random-fretboard-view {
    min-height: 248px;
    padding: 35px 8px 17px;
    grid-template-rows: 48px minmax(0, 1fr);
    gap: 5px;
  }

  .fretboard-result-row {
    gap: 8px;
  }

  .fretboard-result-copy {
    gap: 8px;
  }

  .fretboard-result-copy > span {
    font-size: 10px;
  }

  .fretboard-result-copy output {
    font-size: 32px;
  }

  .fretboard-reveal-button {
    min-width: 102px;
    min-height: 40px;
    padding: 0 10px;
    font-size: 11px;
  }

  .fretboard-canvas-shell svg {
    min-height: 150px;
  }

  .random-history {
    flex-wrap: wrap;
  }

  .random-setting-group {
    padding: 16px 0;
  }

  .count-presets button,
  .speed-presets button,
  .pitch-presets button,
  .segmented button {
    min-height: 38px;
  }

  input[type="range"] {
    height: 28px;
    touch-action: pan-y;
  }

  .random-mode-selector button,
  .note-selection-presets button {
    min-height: 40px;
  }

  .pitch-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .selectable-pitch-list span {
    height: 34px;
    font-size: 10px;
  }

  .player-panel {
    display: block;
  }

  .track-badges {
    min-width: 0;
    max-width: 190px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .status-badge {
    min-width: 54px;
    padding: 4px 6px;
    font-size: 9px;
  }

  .waveform-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 220px;
    min-height: 0;
    margin-top: 8px;
    touch-action: pan-y;
  }

  #waveformCanvas {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    touch-action: none;
  }

  .waveform-empty {
    padding: 20px;
    text-align: center;
  }

  .waveform-empty strong {
    font-size: 12px;
  }

  .waveform-empty span {
    font-size: 9px;
  }

  .timeline-row {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    gap: 4px;
    font-size: 9px;
  }

  .selection-readout {
    min-width: 0;
    gap: 6px;
    font-size: 9px;
  }

  .transport-band {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 14px 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px 12px;
  }

  .transport-controls {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .transport-controls .icon-button {
    width: 44px;
    height: 44px;
  }

  .play-button {
    width: 52px;
    height: 52px;
  }

  .speed-controls,
  .pitch-controls {
    min-width: 0;
  }

  .speed-presets,
  .pitch-presets {
    gap: 3px;
  }

  .speed-presets button,
  .pitch-presets button {
    padding: 0 2px;
    font-size: 9px;
  }

  .volume-control {
    display: block;
    grid-column: 1 / -1;
  }

  .loop-band {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: block;
    padding-top: 14px;
  }

  .loop-copy {
    min-width: 0;
  }

  .loop-copy > span:last-child {
    display: none;
  }

  .loop-actions {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 44px;
    gap: 7px;
  }

  .loop-controls {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .loop-actions .button,
  .loop-actions .icon-button {
    width: 100%;
    min-height: 44px;
  }

  .loop-actions .switch-control {
    grid-column: 1 / -1;
    min-height: 40px;
  }

  .loop-range-editor {
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
    padding: 9px 8px;
  }

  .loop-range-row {
    grid-template-columns: 20px minmax(0, 1fr) 58px;
    gap: 7px;
  }

  .loop-range-row output {
    font-size: 9px;
  }

  .bpm-display {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .bpm-display .step-button {
    width: 44px;
    height: 44px;
  }

  .metro-sound-picker {
    width: min(190px, 66%);
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 7px;
  }

  .metro-sound-picker select,
  .sound-preview-button {
    height: 42px;
  }

  .sound-preview-button {
    width: 42px;
  }

  .metronome-option-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .compact-setting-group .segmented button {
    min-height: 40px;
    font-size: 10px;
  }

  .metronome-visual-stage {
    height: 88px;
    min-height: 88px;
    margin-top: 16px;
  }

  .count-in-display {
    grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
    padding: 0 10px;
  }

  .count-in-display strong {
    font-size: 46px;
  }

  .metro-actions .button {
    min-height: 46px;
  }

  .status-bar {
    min-height: 34px;
    padding: 0 calc(12px + var(--safe-right)) 0 calc(12px + var(--safe-left));
    gap: 0;
    font-size: 9px;
  }

  .status-bar #statusMessage {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pitch-state {
    display: none;
  }
}

@media (max-width: 380px) {
  .random-page.active,
  .workspace.active {
    padding-right: 9px;
    padding-left: 9px;
  }

  .generator-panel,
  .generator-settings,
  .player-panel,
  .metronome-panel {
    padding: 12px;
  }

  .selection-readout span:nth-child(3) {
    display: none;
  }

  .random-note-display,
  .random-note-display .single-note,
  .note-placeholder {
    font-size: 78px;
  }

  .random-mode-selector button {
    padding: 0 3px;
    font-size: 10px;
  }

  .fretboard-result-copy {
    align-items: center;
  }

  .fretboard-result-copy > span {
    max-width: 76px;
    line-height: 1.25;
  }
}