/* ======================================================
   mobile.css — additive mobile-only responsive styles
   All rules live inside @media queries so they only
   activate on narrow screens and never touch desktop.
   ====================================================== */

/* ---- Large phones / small tablets (≤ 600px) ---- */
@media (max-width: 600px) {

  /* Use small viewport height so content isn't hidden behind browser chrome */
  .screen {
    height: 100svh;
  }

  /* --- Corner icons ---------------------------------- */
  /* 5 icons × 44px + 4 × 12px gap = 268px — too wide on phones */
  .corner-icons {
    gap: 8px;
    top: 14px;
    right: 14px;
  }

  .corner-icon {
    width: 36px;
    height: 36px;
  }

  .corner-icon svg {
    width: 18px;
    height: 18px;
  }

  /* --- General layout ------------------------------- */
  .container {
    padding: 16px;
  }

  .header {
    margin-bottom: 24px;
  }

  .header h1 {
    font-size: 1.6rem;
  }

  /* --- Mode selection screen ------------------------ */
  .mode-buttons {
    gap: 14px;
    max-width: 100%;
  }

  /* Remove fixed min-width so buttons fill the screen width */
  .mode-button {
    min-width: unset;
    width: 100%;
    padding: 20px 24px;
    font-size: 1.1rem;
  }

  /* Hide the tip on mobile — it overlaps content and isn't needed on small screens */
  .progress-tip {
    display: none !important;
  }

  /* Streak is absolutely positioned; pull it into flow so it doesn't overlap buttons */
  .streak-display {
    position: relative;
    bottom: auto;
    margin-top: 20px;
    padding-bottom: 8px;
  }

  /* --- Chord area ----------------------------------- */
  /* The 768px rule sets this to 60px 20px; 60px vertical is too tall
     on a short phone screen, bring it down. */
  .chord-area {
    padding: 20px 16px;
    min-height: 0;
    margin-bottom: 16px;
  }

  /* --- Chord display -------------------------------- */
  /* 3.5rem keeps real chord names (≤6 chars) large and readable while
     keeping "Press Start" (11 chars) on one line at 430-600px widths.
     At 390px it may still wrap slightly — the ≤430px block fixes that. */
  #chord-display,
  #cp-chord-display,
  #session-chord-display {
    font-size: 3.5rem;
  }

  #chord-display .chord-quality,
  #cp-chord-display .chord-quality,
  #session-chord-display .chord-quality {
    font-size: 2.2rem;
  }

  #chord-display .chord-subtext,
  #cp-chord-display .chord-subtext,
  #session-chord-display .chord-subtext {
    font-size: 1.3rem;
    margin-top: 8px;
  }

  /* Inversion and notes displays have min-heights to prevent layout shift
     on desktop. On mobile we need the space back — they start empty anyway. */
  #inversion-display,
  #session-inversion-display,
  #cp-inversion-display {
    min-height: 0;
  }

  #notes-display,
  #cp-notes-display,
  #session-notes-display {
    min-height: 0;
    margin-top: 8px;
  }

  /* session-next-key uses visibility:hidden (not display:none) so it
     still occupies space even when empty. Collapse it on mobile. */
  .session-next-key.hidden {
    display: none !important;
  }

  #timer-display,
  #cp-timer-display,
  #session-timer-display {
    font-size: 2rem;
    margin-top: 8px;
  }

  /* --- Controls ------------------------------------- */
  .controls {
    gap: 10px;
    margin-bottom: 14px;
  }

  .secondary-controls {
    gap: 10px;
  }

  /* Ensure regular buttons meet the 48px minimum touch target.
     Exclude .corner-icon (fixed circular icons) and .progress-back-top
     (fixed 44×44 icon button) — both have explicit sizes that must not
     be overridden by min-height or padding. */
  button:not(.corner-icon):not(.progress-back-top) {
    min-height: 48px;
    padding: 12px 22px;
  }

  /* Keyboard shortcut hints are irrelevant on a touchscreen */
  .keyboard-shortcuts-hint {
    display: none;
  }

  /* --- Beat indicators ------------------------------ */
  .beat-indicators {
    gap: 14px;
  }

  /* --- Chord preview -------------------------------- */
  .chord-preview {
    padding: 10px;
    gap: 8px;
    margin: 14px 0;
  }

  /* --- Piano keyboard ------------------------------- */
  /* Two octaves of 28px-wide keys = ~392px — overflows a 390px phone.
     Scale down and compensate for the collapsed whitespace below. */
  .piano-keyboard {
    transform: scale(0.72);
    transform-origin: center top;
    /* (1 - 0.72) × 80px key height ≈ 22px to reclaim */
    margin-bottom: -22px;
  }

  /* --- Guitar fretboard ----------------------------- */
  .guitar-fretboard {
    transform: scale(0.9);
    transform-origin: center top;
  }

  /* --- Progress screen ------------------------------ */
  #progress {
    padding-top: 70px;
  }

  .progress-header h1 {
    font-size: 1.6rem;
  }

  /* Allow filter pill rows to wrap rather than overflow */
  .progress-mode-filter,
  .progress-chord-type-filter {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* --- Modals --------------------------------------- */
  .modal-content {
    padding: 24px 18px;
    max-height: 88vh;
  }

  /* --- Donation toast ------------------------------- */
  /* white-space: nowrap on the message can cause overflow on phones */
  .donation-toast-message {
    white-space: normal;
  }
}

/* ---- Phone landscape (short viewport, any width) ---- */
/* Catches phones rotated sideways (e.g. 852×393).
   Portrait rules don't fire here (width > 600px).
   Goal: fit the entire practice screen on one viewport — no scrolling. */
@media (orientation: landscape) and (max-height: 500px) {

  /* Always hide these in landscape */
  .progress-tip        { display: none !important; }
  .keyboard-shortcuts-hint { display: none; }

  /* Streak: pull into flow for the home screen */
  .streak-display {
    position: relative;
    bottom: auto;
    margin-top: 10px;
    padding-bottom: 4px;
  }

  /* Corner icons: smaller so they don't crowd the top edge */
  .corner-icons {
    gap: 6px;
    top: 8px;
    right: 10px;
  }

  .corner-icon { width: 30px; height: 30px; }
  .corner-icon svg { width: 15px; height: 15px; }

  /* ---- Two-column layout for practice screens ----------
     Left column:  chord area (takes the bulk of the width)
     Right column: header → controls → secondary-controls  */
  #basic-practice .container,
  #custom-practice .container,
  #session-practice .container {
    display: grid;
    grid-template-columns: 1fr 190px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "chord  header"
      "chord  controls"
      "chord  secondary";
    column-gap: 14px;
    row-gap: 8px;
    padding: 8px 12px;
    max-width: none;
    align-items: start;
    height: 100%;
  }

  #basic-practice .chord-area,
  #custom-practice .chord-area,
  #session-practice .chord-area {
    grid-area: chord;
    padding: 14px 16px;
    min-height: 0;
    /* Fill remaining height so it looks intentional */
    align-self: stretch;
  }

  #basic-practice .header,
  #custom-practice .header,
  #session-practice .header {
    grid-area: header;
    margin-bottom: 0;
    text-align: center;
  }

  #basic-practice .controls,
  #custom-practice .controls,
  #session-practice .controls {
    grid-area: controls;
    flex-direction: column;
    margin-bottom: 0;
    gap: 6px;
  }

  #basic-practice .secondary-controls,
  #custom-practice .secondary-controls,
  #session-practice .secondary-controls {
    grid-area: secondary;
    flex-direction: column;
    gap: 6px;
    align-self: start;
  }

  /* Banner spans both columns if it ever appears */
  #basic-practice .midi-status-banner,
  #custom-practice .midi-status-banner {
    grid-column: 1 / -1;
  }

  /* Compact header text */
  #basic-practice .header h1,
  #custom-practice .header h1,
  #session-practice .header h1 {
    font-size: 1.1rem;
    margin-bottom: 2px;
  }

  .key-mode-summary,
  .session-info {
    font-size: 0.8rem;
  }

  .session-timer {
    font-size: 0.9rem;
    margin-top: 2px;
  }

  /* Smaller buttons in landscape — they're stacked so height matters */
  #basic-practice button:not(.corner-icon),
  #custom-practice button:not(.corner-icon),
  #session-practice button:not(.corner-icon) {
    padding: 9px 14px;
    min-height: 38px;
    font-size: 0.9rem;
  }

  /* Chord display: large enough to read, small enough to share the screen */
  #chord-display,
  #cp-chord-display,
  #session-chord-display {
    font-size: 2.8rem;
  }

  #chord-display .chord-quality,
  #cp-chord-display .chord-quality,
  #session-chord-display .chord-quality {
    font-size: 1.8rem;
  }

  #chord-display .chord-subtext,
  #cp-chord-display .chord-subtext,
  #session-chord-display .chord-subtext {
    font-size: 1.1rem;
  }

  #notes-display,
  #cp-notes-display,
  #session-notes-display {
    font-size: 1rem;
    margin-top: 6px;
  }

  #timer-display,
  #cp-timer-display {
    font-size: 1.8rem;
    margin-top: 8px;
  }

  /* ---- Home screen in landscape --------------------
     Stack the 4 mode buttons in a 2×2 grid so they
     don't require scrolling at 393px height. */
  #mode-selection .mode-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 100%;
  }

  #mode-selection .mode-button {
    min-width: unset;
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
  }

  #mode-selection .header h1 {
    font-size: 1.3rem;
    margin-bottom: 10px;
  }

  #mode-selection .header {
    margin-bottom: 12px;
  }
}

/* ---- Short viewports — iPad landscape, MacBook Air, small Electron windows ----
   Fires only on wider screens (≥601px) where height is the constraint.
   Compresses vertical spacing so all controls stay on-screen without scrolling.
   Phones in portrait (≤600px) and landscape (max-height ≤500px) are handled above. */
@media (min-width: 601px) and (max-height: 850px) and (min-height: 501px) {

  /* Header: halve the bottom margin */
  .header {
    margin-bottom: 20px;
  }

  /* Chord area: reduce padding and release the min-height reservation */
  .chord-area {
    padding: 22px 30px;
    min-height: 0;
    margin-bottom: 16px;
  }

  /* Chord display container: tighter gap below the chord name */
  .chord-display-container {
    margin-bottom: 10px;
  }

  /* Chord font: step down from 5rem → 4rem */
  #chord-display,
  #cp-chord-display,
  #session-chord-display {
    font-size: 4rem;
  }

  #chord-display .chord-quality,
  #cp-chord-display .chord-quality,
  #session-chord-display .chord-quality {
    font-size: 2.4rem;
  }

  #chord-display .chord-subtext,
  #cp-chord-display .chord-subtext,
  #session-chord-display .chord-subtext {
    font-size: 1.6rem;
    margin-top: 6px;
  }

  /* Release reserved space for inversion and notes (they start empty) */
  #inversion-display,
  #session-inversion-display,
  #cp-inversion-display {
    min-height: 0;
  }

  #notes-display,
  #cp-notes-display,
  #session-notes-display {
    min-height: 0;
    margin-top: 10px;
  }

  /* Timer: step down from 3rem → 2.2rem and tighten top margin */
  #timer-display,
  #cp-timer-display {
    font-size: 2.2rem;
    margin-top: 10px;
  }

  #session-timer-display {
    margin-top: 10px;
  }

  /* "Next:" chord preview: tighter margins and padding */
  .chord-preview {
    margin: 10px 0;
    padding: 10px;
  }

  /* Collapse the invisible session-next-key placeholder so it takes no space */
  .session-next-key.hidden {
    display: none !important;
  }

  /* Controls: tighter gaps and smaller buttons */
  .controls {
    gap: 12px;
    margin-bottom: 12px;
  }

  .secondary-controls {
    gap: 12px;
  }

  button {
    padding: 12px 22px;
  }

  /* Mode selection home screen: compact buttons */
  .mode-button {
    padding: 22px 32px;
    font-size: 1.2rem;
  }

  .mode-buttons {
    gap: 14px;
  }

  /* Keyboard shortcut hint: tighter top margin */
  .keyboard-shortcuts-hint {
    margin-top: 12px;
  }

  /* Piano: slight scale-down to recover a few pixels */
  .piano-keyboard {
    transform: scale(0.88);
    transform-origin: center top;
    margin-bottom: -10px;
  }
}

/* ---- Small phones (≤ 430px) ---- */
@media (max-width: 430px) {

  /* Shrink corner icons a touch more on the smallest screens */
  .corner-icons {
    gap: 6px;
    top: 12px;
    right: 12px;
  }

  .corner-icon {
    width: 32px;
    height: 32px;
  }

  .corner-icon svg {
    width: 16px;
    height: 16px;
  }

  /* At 390px, "Press Start" (11 chars) at 3.5rem = ~338px which still
     overflows the ~326px available width and wraps to 2 lines, doubling
     the chord area height and pushing Settings/Back off screen.
     3rem (48px) × 11 × 0.56 ≈ 296px — fits cleanly. */
  #chord-display,
  #cp-chord-display,
  #session-chord-display {
    font-size: 3rem;
  }

  #chord-display .chord-quality,
  #cp-chord-display .chord-quality,
  #session-chord-display .chord-quality {
    font-size: 1.9rem;
  }

  /* Tighten chord area padding further */
  .chord-area {
    padding: 20px 12px;
  }

  /* Piano: scale down more for narrowest screens
     (1 - 0.62) × 80px ≈ 30px to reclaim) */
  .piano-keyboard {
    transform: scale(0.62);
    margin-bottom: -30px;
  }

  /* Heatmap: slightly smaller so it comfortably fits */
  .practice-heatmap {
    transform: scale(0.88);
    transform-origin: center top;
    /* (1 - 0.88) × approximate height of heatmap ≈ -12px */
    margin-bottom: -12px;
  }
}