/* Large iPad landscape and desktop should use desktop styles */
@media (min-width: 1200px) and (orientation: landscape) {
  /* Force desktop layout for large screens only */
  .desktop-only {
    display: block !important;
  }

  .mobile-only {
    display: none !important;
  }

  /* Ensure histogram uses desktop layout */
  .histogram-container {
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 12px !important;
    padding: 2rem !important;
  }
}

/* Mobile-specific styles - applied to mobile devices, iPad portrait, iPad landscape, and phone landscape */
@media (max-width: 1199px) and (orientation: portrait),
  (max-width: 1199px) and (orientation: landscape),
  (max-width: 480px) {
  /* Global overflow prevention */
  * {
    box-sizing: border-box;
  }

  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .App {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .App-header {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0.5rem !important;
    padding-top: 1rem !important;
  }

  /* Hide desktop-only elements on mobile */
  .desktop-only {
    display: none !important;
  }

  /* Show mobile-only elements */
  .mobile-only {
    display: block !important;
  }

  /* Hide main tab titles on mobile for more concise interface */
  .exercise-panel h2,
  .settings-panel h2,
  .stats-panel h2 {
    display: none !important;
  }

  /* Hide description text on mobile */
  .settings-panel p {
    display: none !important;
  }

  /* Keep useful section titles visible on mobile */
  .note-selection-panel h2,
  .chord-progression h2,
  .key-selector h3,
  .progression-selector h3 {
    display: block !important;
  }

  /* Compact header */
  .App-header h1 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
  }

  .App-header p {
    font-size: 1rem;
  }

  .hero-section {
    margin-bottom: 1rem;
  }

  /* Tab navigation */
  .tab-navigation {
    margin-bottom: 1.5rem;
    padding: 6px;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
  }

  .tab-button {
    padding: 8px 20px;
    font-size: 0.9rem;
    flex: 1;
    max-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Mobile layout - Exercise panel takes full width */
  .panels-container {
    flex-direction: column;
    gap: 1rem;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
  }

  .left-panel,
  .right-panel {
    min-width: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 0.5rem !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  /* Exercise Panel - Full width on mobile */
  .exercise-panel {
    padding: 1rem !important;
    margin: 0 !important;
    min-height: auto;
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Exercise panel content alignment */
  .exercise-panel h2 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    text-align: center;
  }

  /* Score card alignment */
  .score-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .score-display {
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.5rem;
    justify-content: space-between;
    overflow-x: hidden !important;
  }

  .score-item {
    flex: 1;
    min-width: 0;
    padding: 0.5rem;
    text-align: center;
    overflow-x: hidden !important;
  }

  .score-label {
    font-size: 0.8rem;
  }

  .score-value {
    font-size: 1.2rem;
  }

  /* Exercise controls alignment */
  .exercise-controls-compact {
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.5rem;
    justify-content: center;
    margin: 1rem 0;
    flex-wrap: wrap;
    overflow-x: hidden !important;
  }

  .control-button {
    flex: 1;
    max-width: 120px;
    min-width: 80px;
    margin: 2px;
    overflow-x: hidden !important;
  }

  /* Make all control buttons the same size on mobile */
  .control-button.reset-button,
  .control-button.start-button,
  .control-button.stop-button,
  .control-button.repeat-button {
    flex: 1;
    min-width: 80px;
    max-width: 120px;
    padding: 8px 16px;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  /* Ensure repeat button is visible */
  .control-button.repeat-button {
    display: block !important;
    visibility: visible !important;
  }

  /* Answer buttons - in fixed panel */
  .answer-buttons {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 0.5rem;
    width: 100% !important;
    max-width: 100% !important;
  }

  .answer-button {
    padding: 8px 4px;
    font-size: 0.8rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Answer Section - Fixed positioning that doesn't block controls */
  .answer-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.8rem;
    z-index: 1000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .answer-section h3 {
    font-size: clamp(0.9rem, 2.5vw, 1.2rem) !important;
    margin-bottom: 0.8rem !important;
    color: #1f2937 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0 0.5rem !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    background: none !important;
    font-weight: 600 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    -webkit-text-fill-color: #1f2937 !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
  }

  /* Settings Panel Styles */
  .settings-container {
    padding: 0 0.5rem;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
  }

  .settings-panel {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 1.5rem;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Force equal width for all panels in settings */
  .note-selection-panel,
  .chord-progression {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    box-sizing: border-box !important;
    flex: none !important;
  }

  /* Mobile-specific font size adjustments */
  .note-selection-panel h2 {
    font-size: 1.6rem !important;
    margin-bottom: 0.6rem !important;
  }

  .chord-progression h2 {
    font-size: 1.3rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.2 !important;
  }

  .key-selector h3,
  .progression-selector h3 {
    font-size: 1.1rem !important;
    margin-bottom: 0.4rem !important;
  }

  .settings-panel h2 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: #ffffff;
    background: linear-gradient(135deg, #ffffff 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .settings-panel p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    opacity: 0.8;
    color: #d1d5db;
    font-weight: 400;
  }

  /* Note selection - more compact */
  .note-buttons {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .note-button {
    padding: 8px 4px;
    font-size: 0.9rem;
    min-height: 40px;
  }

  /* Progression buttons - 2 columns */
  .progression-buttons {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .progression-button {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  /* Key buttons - compact */
  .key-buttons {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }

  .key-button {
    padding: 6px 8px;
    font-size: 0.8rem;
    min-height: 32px;
  }

  .play-button {
    padding: 12px 20px;
    font-size: 0.9rem;
    margin-top: 0.5rem;
  }

  /* Reduce spacing */
  .key-selector,
  .progression-selector {
    margin-bottom: 1rem;
  }

  /* Ensure proper spacing between panels in settings */
  .note-selection-panel,
  .chord-progression {
    margin-bottom: 1.5rem !important;
  }

  .note-selection {
    margin-bottom: 0.5rem;
  }

  /* Feedback - more compact */
  .feedback {
    padding: 0.5rem;
    font-size: 0.9rem;
    margin: 0.5rem 0;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  /* Additional overflow fixes for small screens */
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .App {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .App-header {
    padding: 0.5rem;
    padding-top: 1rem;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .App-header h1 {
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
  }

  .hero-section {
    margin-bottom: 0.5rem;
  }

  .tab-navigation {
    margin-bottom: 1rem;
    padding: 4px;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
  }

  .tab-button {
    padding: 6px 12px;
    font-size: 0.8rem;
    flex: 1;
    max-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .panels-container {
    gap: 0.5rem;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .left-panel,
  .right-panel {
    min-width: auto;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 0.25rem !important;
    overflow-x: hidden !important;
  }

  .note-selection-panel,
  .exercise-panel,
  .chord-progression {
    padding: 0.75rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    margin-bottom: 1rem !important;
  }

  /* Exercise panel specific fixes for small screens */
  .exercise-panel h2 {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
  }

  .score-card {
    padding: 0.75rem;
  }

  .score-display {
    gap: 0.25rem;
  }

  .score-item {
    padding: 0.3rem;
    min-width: 0;
  }

  .exercise-controls-compact {
    gap: 0.25rem;
    margin: 0.75rem 0;
  }

  .control-button {
    max-width: 100px;
    min-width: 70px;
    padding: 6px 8px;
    font-size: 0.8rem;
  }

  /* Make all control buttons the same size on small mobile */
  .control-button.reset-button,
  .control-button.start-button,
  .control-button.stop-button,
  .control-button.repeat-button {
    flex: 1;
    min-width: 70px;
    max-width: 100px;
    padding: 6px 12px;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .settings-container {
    padding: 0 0.25rem;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .settings-panel {
    padding: 1rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Force equal width for all panels in settings on small mobile */
  .note-selection-panel,
  .chord-progression {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    box-sizing: border-box !important;
    flex: none !important;
  }

  /* Even smaller font sizes for small mobile devices */
  .note-selection-panel h2 {
    font-size: 1.4rem !important;
    margin-bottom: 0.5rem !important;
  }

  .chord-progression h2 {
    font-size: 1.1rem !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.1 !important;
  }

  .key-selector h3,
  .progression-selector h3 {
    font-size: 1rem !important;
    margin-bottom: 0.3rem !important;
  }

  .settings-panel h2 {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
  }

  .settings-panel p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  .note-selection-panel h2,
  .exercise-panel h2,
  .chord-progression h2 {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
  }

  .key-selector h3,
  .progression-selector h3 {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
  }

  .score-display {
    gap: 0.25rem;
  }

  .score-item {
    padding: 0.3rem;
    min-width: 50px;
  }

  .score-label {
    font-size: 0.7rem;
  }

  .score-value {
    font-size: 1rem;
  }

  .exercise-controls-compact {
    gap: 0.25rem;
  }

  .control-button {
    padding: 6px 12px;
    font-size: 0.8rem;
    min-width: 70px;
  }

  .answer-buttons {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }

  .answer-button {
    padding: 6px 3px;
    font-size: 0.7rem;
  }

  .note-buttons {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  .note-button {
    padding: 6px 2px;
    font-size: 0.8rem;
    min-height: 36px;
  }

  .progression-buttons {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .progression-button {
    padding: 6px 8px;
    font-size: 0.7rem;
  }

  .key-buttons {
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
  }

  .key-button {
    padding: 4px 6px;
    font-size: 0.7rem;
    min-height: 28px;
  }

  .play-button {
    padding: 10px 16px;
    font-size: 0.8rem;
  }

  .answer-section {
    padding: 0.75rem;
  }

  .key-selector,
  .progression-selector {
    margin-bottom: 0.75rem;
  }

  .note-selection {
    margin-bottom: 0.3rem;
  }

  .feedback {
    padding: 0.3rem;
    font-size: 0.8rem;
    margin: 0.3rem 0;
  }
}

/* Stats panel mobile styles */
@media (max-width: 1199px) and (orientation: portrait),
  (max-width: 1199px) and (orientation: landscape),
  (max-width: 480px) {
  .stats-container {
    padding: 0 0.5rem;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
  }

  .stats-panel {
    padding: 1.5rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  .stats-panel h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }

  .summary-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .summary-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
  }

  .summary-stats {
    flex-direction: row;
    gap: 0.5rem;
    justify-content: space-between;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    flex-wrap: wrap;
  }

  .summary-item {
    min-width: auto;
    padding: 0.5rem;
    flex: 1;
    text-align: center;
    min-width: 80px;
    box-sizing: border-box !important;
  }

  .summary-label {
    font-size: 0.8rem;
    word-wrap: break-word;
    white-space: normal;
    line-height: 1.2;
  }

  .summary-label {
    font-size: 0.8rem;
  }

  .summary-value {
    font-size: 1.2rem;
  }

  .note-histogram h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  /* Histogram - Split into multiple rows on mobile */
  .histogram-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    padding: 0.5rem;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .histogram-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .bar-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 1px;
  }

  .bar {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 2px;
    border-radius: 2px;
  }

  .bar-label {
    font-size: 0.7rem;
    text-align: center;
    word-wrap: break-word;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bar-stats {
    font-size: 0.6rem;
    text-align: center;
    width: 100% !important;
    max-width: 100% !important;
  }

  .analysis-section {
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Force vertical layout for analysis cards on mobile */
  .analysis-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .analysis-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .analysis-card {
    padding: 1rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .analysis-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }

  .confusion-item {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 6px 8px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .confusion-details {
    align-items: center;
  }

  .confusion-pair {
    gap: 0.3rem;
    display: flex;
    align-items: center;
  }

  .actual-note,
  .guessed-note {
    font-size: 0.7rem;
    padding: 0.1rem 0.3rem;
    min-width: 20px;
  }

  .confusion-count {
    font-size: 0.8rem;
  }

  .confusion-desc {
    font-size: 0.6rem;
  }

  .note-item {
    padding: 0.5rem;
    font-size: 0.9rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .note-name {
    font-size: 0.9rem;
  }

  .note-accuracy {
    font-size: 0.8rem;
  }

  .note-total {
    font-size: 0.7rem;
  }

  .reset-stats-button {
    padding: 12px 20px;
    font-size: 0.9rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .stats-container {
    padding: 0 0.25rem;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .stats-panel {
    padding: 1rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .stats-panel h2 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
  }

  .summary-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .summary-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }

  .summary-stats {
    gap: 0.25rem;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    flex-wrap: wrap;
  }

  .summary-item {
    padding: 0.3rem;
    flex: 1;
    text-align: center;
    min-width: 70px;
    box-sizing: border-box !important;
  }

  .summary-label {
    font-size: 0.7rem;
    word-wrap: break-word;
    white-space: normal;
    line-height: 1.1;
  }

  .summary-label {
    font-size: 0.7rem;
  }

  .summary-value {
    font-size: 1rem;
  }

  .note-histogram h3 {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
  }

  /* Histogram - Even more compact for small screens */
  .histogram-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    padding: 0.3rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .histogram-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .bar-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 1px;
  }

  .bar {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 2px;
    border-radius: 2px;
  }

  .bar-label {
    font-size: 0.6rem;
    text-align: center;
    word-wrap: break-word;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bar-stats {
    font-size: 0.5rem;
    text-align: center;
    width: 100% !important;
    max-width: 100% !important;
  }

  .analysis-card {
    padding: 0.75rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Force vertical layout for analysis cards on small mobile */
  .analysis-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .analysis-card h3 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
  }

  .confusion-item {
    padding: 4px 6px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .actual-note,
  .guessed-note {
    font-size: 0.6rem;
    padding: 0.1rem 0.2rem;
    min-width: 18px;
  }

  .confusion-count {
    font-size: 0.7rem;
  }

  .confusion-desc {
    font-size: 0.5rem;
  }

  .note-item {
    padding: 0.3rem;
    font-size: 0.8rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .note-name {
    font-size: 0.8rem;
  }

  .note-accuracy {
    font-size: 0.7rem;
  }

  .note-total {
    font-size: 0.6rem;
  }

  .reset-stats-button {
    padding: 10px 16px;
    font-size: 0.8rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}