@media (min-width: 1101px) {
  .playlist-toggle {
    display: none;
  }
}

@media (orientation: landscape) and (min-width: 821px) and (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  body {
    overflow: hidden;
  }

  .layout {
    height: 100svh;
    overflow: hidden;
  }

  .player-panel {
    padding: 16px;
    gap: 10px;
    height: calc(100svh - 32px);
  }

  .hero-grid {
    grid-template-columns: minmax(170px, 0.66fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }

  .cover-wrap {
    max-height: min(28vh, 240px);
  }

  .track-meta {
    gap: 10px;
    align-content: start;
    min-width: 0;
  }

  .track-copy {
    gap: 5px;
    min-width: 0;
  }

  h1.track-title,
  .track-title {
    font-size: clamp(2.7rem, 4.3vw, 4.75rem) !important;
    line-height: 0.96;
    letter-spacing: -0.04em;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .track-artist {
    font-size: 0.86rem;
  }

  .track-album,
  .track-date {
    font-size: 0.78rem;
  }

  .service-links {
    gap: 8px;
  }

  .service-link {
    min-height: 40px;
    padding: 0 12px;
    font-size: 0.78rem;
  }

  .controls-panel {
    gap: 8px;
    padding: 12px 14px;
  }

  .transport-button {
    width: 42px;
    height: 42px;
  }

  .transport-button.is-primary {
    width: 52px;
    height: 52px;
  }

  .progress-wrap {
    gap: 8px;
  }
}

@media (max-width: 1100px) {
  .layout {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
  }

  /* Hardware buttons control volume on touch devices — hide the slider */
  .volume-block {
    display: none;
  }
  .transport-row {
    justify-content: center;
  }

  .player-panel {
    height: calc(100svh - 40px);
  }

  .playlist-toggle {
    display: inline-flex;
  }

  .playlist-panel {
    position: fixed;
    left: 20px;
    right: 20px;
    top: max(20px, env(safe-area-inset-top));
    bottom: max(20px, env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    max-height: none;
    overflow: hidden;
    overscroll-behavior: contain;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(24px);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
    padding: 20px;
  }

  /* Only the song list scrolls — search input stays above the scroll context */
  .playlist-groups {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    align-content: start;
  }

  /* KEY: styles.css sets body.playlist-open { overflow: hidden } globally.
     That rule has no media query so it fires on mobile too, and every iOS
     browser dismisses the keyboard when body overflow is hidden.
     Override it here so body stays scrollable while the panel is open —
     the fixed panel + overscroll-behavior:contain on groups prevents bleed. */
  body.playlist-open {
    overflow: auto;
  }

  /* iOS zooms into inputs with font-size < 16px, causing a viewport change that
     dismisses the keyboard in Brave (bottom toolbar + zoom = double reflow) */
  .playlist-search {
    font-size: 1rem;
  }

  body.playlist-open .playlist-panel,
  .playlist-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
  }

  body.playlist-open .playlist-close,
  .playlist-panel.is-open .playlist-close {
    display: inline-flex;
  }
}

@media (max-width: 1100px) and (orientation: portrait) {
  html, body {
    height: auto;
    min-height: 100%;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-shell {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  .layout {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  .player-panel {
    height: auto;
    min-height: calc(100svh - 40px);
  }
}

/* iPad / tablet only — between phone (≤820px) and desktop (≥1101px) */
@media (min-width: 821px) and (max-width: 1100px) {
  .cover-wrap {
    max-width: 500px;
  }
}

@media (max-width: 820px) {
  .layout {
    padding: 16px;
    gap: 16px;
  }

  .player-panel,
  .playlist-panel {
    border-radius: 24px;
  }

  .player-panel {
    padding: 18px;
    gap: 20px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .track-title {
    font-size: clamp(1.8rem, 8vw, 2.65rem);
  }

  .controls-panel {
    padding: 18px;
  }
}

@media (max-width: 560px) {
  .eyebrow-row {
    align-items: stretch;
    flex-direction: column;
  }

  .playlist-toggle {
    width: 100%;
  }

  /* Transport (192px) + volume (132px at 96px slider) = 324px > ~278px available.
     Tighten controls padding and shrink slider so everything fits without overflow. */
  .controls-panel {
    padding: 12px;
  }

  .volume-input {
    width: 44px;
  }

  .service-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .service-link {
    justify-content: center;
  }

  .transport {
    justify-content: space-between;
  }

  .time-row {
    font-size: 0.82rem;
  }

  .playlist-panel {
    left: 10px;
    right: 10px;
    top: max(10px, env(safe-area-inset-top));
    bottom: max(10px, env(safe-area-inset-bottom));
    padding: 18px;
  }
}


/* min-width: 500px distinguishes true physical landscape (iPhone width ~667–852px)
   from Brave iPhone portrait + keyboard (viewport width stays ~375–393px but
   height shrinks below 430px, making CSS report orientation:landscape) */
@media (min-width: 500px) and (max-width: 932px) and (max-height: 430px) and (orientation: landscape) {
  body {
    overflow: hidden;
  }

  .app-shell {
    display: none;
  }

  .orientation-lock {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #050505;
  }

  .orientation-lock__card {
    width: min(420px, 100%);
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #fff;
    text-align: center;
    backdrop-filter: blur(16px);
  }

  .orientation-lock__eyebrow {
    margin: 0 0 10px;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    opacity: 0.7;
  }

  .orientation-lock h2 {
    margin: 0 0 10px;
    font-size: 1.4rem;
  }

  .orientation-lock p {
    margin: 0;
    color: rgba(255,255,255,0.78);
  }
}


@media (max-width: 1100px) {
  html, body {
    touch-action: pan-y;
  }
}

/* Better scrubber hit-area on touch devices */
@media (max-width: 1100px) {
  .progress-input {
    height: 28px; /* taller invisible hit area — track stays 6px via track rule */
  }

  .progress-input::-webkit-slider-runnable-track {
    height: 6px;
  }

  .progress-input::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -9px;
  }

  .progress-input::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 1100px) {
  .lyrics-panel {
    inset: unset;
    top: max(20px, env(safe-area-inset-top));
    bottom: max(20px, env(safe-area-inset-bottom));
    left: 20px;
    right: 20px;
    width: auto;
    height: auto;
    max-height: none;
    margin: 0;
    overflow: hidden; /* .lyrics-content (flex:1) is the real scroll container */
  }

  /* body overflow:hidden on iOS locks ALL touch-based scrolling — including
     inside fixed-position panels — and can break touch event propagation.
     Use overflow:auto + overscroll-behavior:contain on the panel instead,
     matching the same fix applied to the playlist panel. */
  body.lyrics-open {
    overflow: auto;
  }
}

@media (max-width: 560px) {
  .lyrics-panel {
    left: 10px;
    right: 10px;
    top: max(10px, env(safe-area-inset-top));
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .playlist-toggle {
    width: 100%;
  }
}


@media (max-width: 1100px) and (orientation: portrait) {
  .eyebrow-row {
    margin-bottom: 0;
  }

  .brandline {
    gap: 8px;
  }

  .playlist-toggle-bottom {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 6px;
  }
}

@media (max-width: 820px) and (orientation: portrait) {
  .brandline {
    gap: 6px;
  }

  .brandline .eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.16em;
  }

  .brandline-separator {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
  }

  .brandline .eyebrow-subtitle {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
  }
}


/* Hide header on desktop + tablet landscape */
@media (min-width: 1101px) {
  .playlist-header {
    display: none;
  }
}

@media (orientation: landscape) and (min-width: 821px) {
  .playlist-header {
    display: none;
  }
}