/* ============================================================================
   MOBILE RESPONSIVE ADAPTATIONS (<768px) (responsive.css)
   ============================================================================ */
@media (max-width: 768px) {
  .app-container,
  .main-container {
    padding: 76px 12px 110px;
  }

  .app-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .search-container,
  .search-box-container {
    max-width: 100%;
  }

  .btn-search-label {
    display: none;
  }

  .btn-recognize-label {
    display: none;
  }

  .btn-recognize {
    padding: 10px 12px;
  }

  .tracks-grid,
  .music-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
  }

  .track-card {
    padding: 10px;
    border-radius: var(--radius-md);
  }

  .card-play-btn,
  .btn-card-play {
    opacity: 1;
    transform: none;
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
    bottom: 52px;
    left: 16px;
  }

  .btn-card-add-playlist {
    opacity: 1;
  }

  .dynamic-island-capsule {
    width: min(240px, calc(100vw - 20px - 52px));
  }

  .profile-creds-row,
  .theme-picker-grid {
    grid-template-columns: 1fr;
  }

  .artist-card-hero {
    flex-direction: column;
    text-align: center;
  }

  /* Mobile Player Dock — compact mini bar, constrained cover */
  #player-bar:not(.hidden),
  .music-player-bar:not(.hidden) {
    display: flex !important;
    position: fixed !important;
    bottom: 12px !important;
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
    width: calc(100% - 20px) !important;
    max-width: 100% !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    padding: 0 12px !important;
    border-radius: 20px !important;
    background: rgba(18, 18, 22, 0.96) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
    z-index: 1000 !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .music-player-bar .player-container,
  #player-bar .player-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    direction: ltr !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
  }

  .music-player-bar .track-info,
  #player-bar .track-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    justify-content: flex-start !important;
  }

  .cover-wrapper-player {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .cover-wrapper-player .track-cover,
  .cover-wrapper-player img {
    width: 46px !important;
    height: 46px !important;
    object-fit: cover !important;
  }

  .music-player-bar .player-controls,
  #player-bar .player-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    gap: 4px !important;
  }

  .music-player-bar .control-buttons,
  #player-bar .control-buttons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    direction: ltr !important;
    gap: 8px !important;
  }

  .music-player-bar .btn-play,
  #btn-play-pause.btn-play {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    font-size: 0.95rem !important;
  }

  .music-player-bar .player-options,
  .music-player-bar .progress-container,
  .music-player-bar .btn-shuffle,
  .music-player-bar .btn-repeat-wrapper,
  .music-player-bar .btn-prev,
  .music-player-bar .btn-close-player,
  .music-player-bar .btn-like-heart {
    display: none !important;
  }

  body.mobile-player-open .music-player-bar,
  body.mobile-player-open #player-bar {
    display: none !important;
  }

  .mobile-fullscreen-player {
    padding: calc(10px + var(--safe-top)) 16px calc(14px + var(--safe-bottom)) !important;
  }

  .mobile-fullscreen-player .mfp-artwork-container {
    max-height: min(40vh, 300px) !important;
  }

  .mobile-fullscreen-player .mfp-artwork-wrapper {
    width: min(74vw, 280px) !important;
    max-height: min(40vh, 280px) !important;
  }

  .mobile-fullscreen-player .mfp-title {
    font-size: 1.22rem !important;
  }

  .mobile-fullscreen-player .mfp-controls {
    gap: 16px !important;
    margin: 10px 0 14px !important;
  }

  .mobile-fullscreen-player .mfp-play {
    width: 64px !important;
    height: 64px !important;
  }
}

/* ===== Mobile performance (FPS) ===== */
@media (max-width: 768px) {
  #player-bar:not(.hidden),
  .music-player-bar:not(.hidden) {
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  }

  .dynamic-island-capsule,
  .island-top-cluster,
  .mfp-top-bar,
  .mfp-bg-blur {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .mfp-bg-blur {
    filter: blur(28px) saturate(1.15) brightness(0.55) !important;
  }

  .island-logo-disc.spinning {
    animation-duration: 8s !important;
  }

  .lyrics-line,
  .spotify-lyric-line {
    transition: color 0.12s linear, background 0.12s linear, opacity 0.12s linear !important;
    transform: none !important;
  }

  .lyrics-line.active,
  .spotify-lyric-line.active {
    transform: none !important;
  }

  .track-card,
  .playlist-card,
  .public-playlist-card {
    content-visibility: auto;
    contain-intrinsic-size: 160px 210px;
  }

  .tracks-grid,
  .music-grid,
  .playlists-grid {
    will-change: auto;
  }

  /* Kill heavy hover transforms on touch devices */
  .track-card:hover,
  .playlist-card:hover {
    transform: none !important;
  }
}

body.perf-mobile .spotify-lyrics-body {
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}