/* ============ МОБІЛЬНА ВЕРСІЯ ============ */
/* на десктопі мобільні елементи сховані */
.m-cover, .player__bg, .tracklist, .tbtn, .player__close .i-up { display: none; }

@keyframes m-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes m-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

@media (max-width: 700px) and (min-height: 501px), (max-width: 700px) and (orientation: portrait) {
  html { scroll-snap-type: y mandatory; }
  html.snap-off { scroll-snap-type: none; }   /* всередині плеєра (нижче його верху) — вільна прокрутка; див. syncSnap у mobile.js */
  body { display: block; height: auto; min-height: 100dvh; }
  .topbar, .home, .strip { display: none; }

  /* ---------- екран 1: карусель обкладинки (1. фон + напис, 2. текст) + стрілка до плеєра ---------- */
  .m-cover {
    --pad: 76px;                         /* однаковий відступ зверху й знизу — обкладинка рівно по центру */
    position: relative; display: block;
    height: 100vh; height: 100dvh;       /* dvh враховує адресний рядок iOS/Android */
    background: var(--bg);
    scroll-snap-align: start;
  }
  .m-cover__track {
    position: absolute; inset: 0; display: flex;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .m-cover__track::-webkit-scrollbar { display: none; }
  .m-cover__slide {
    flex: 0 0 100%; min-width: 0; box-sizing: border-box;
    display: grid; place-items: center;
    padding: calc(var(--pad) + env(safe-area-inset-top)) 20px calc(var(--pad) + env(safe-area-inset-bottom));
    scroll-snap-align: center; scroll-snap-stop: always;
  }
  .m-cover__art {
    --cover-ratio: .793;
    --avail: calc(100vh - 2 * var(--pad) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    --avail: calc(100dvh - 2 * var(--pad) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    width: min(100%, calc(var(--avail) * var(--cover-ratio)));
    aspect-ratio: var(--cover-ratio);
    background: #fff no-repeat;
  }
  .m-dots {
    position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: 8px;
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 60px); pointer-events: none;
  }
  .m-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .25; transition: opacity .25s; }
  .m-dots i.is-on { opacity: .9; }
  .m-dots:empty { display: none; }
  .m-down {
    position: absolute; left: 50%; translate: -50% 0;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 56px; height: 56px; display: grid; place-items: center;
    -webkit-tap-highlight-color: transparent;
  }
  .m-down svg {
    width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round; animation: m-nudge 1.8s ease-in-out infinite;
  }

  /* ---------- екран 2: плеєр у стилі Spotify ---------- */
  .player, .player.is-open {
    position: relative; inset: auto; z-index: 0; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 100dvh; scroll-snap-align: start;
    opacity: 1; visibility: visible; transition: none;
    background: #eaf3fb;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: max(10px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom));
  }
  .player__bg {
    display: block; position: absolute; inset: -12%; z-index: -2;
    background: var(--bg-img, none) center / cover no-repeat;
    filter: blur(34px) saturate(1.3); transform: scale(1.1); opacity: .85;
    transition: background-image .4s;
  }
  .player::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .25), rgba(255, 255, 255, .78) 62%);
  }

  .player__close { position: static; align-self: flex-start; margin: 0 0 0 10px; }
  .player__close .i-x { display: none; }
  .player__close .i-up { display: block; }
  .player__stage { display: block; }
  .nav { display: none; }

  .slides {
    --w: 86vw;
    padding: 6px calc((100% - var(--w)) / 2) 14px;
    margin-block: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .slide { box-shadow: 0 22px 50px -24px rgba(20, 86, 143, .5), 0 1px 6px rgba(20, 86, 143, .12); }

  .player__bar { position: static; translate: none; left: auto; bottom: auto; transition: none; display: flex; flex-direction: column; gap: 18px; width: auto; margin: 0; padding: 8px 24px 0;
    background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bar-top { display: contents; }
  .bar-top .now { flex: none; }
  .now { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13px; }
  .now__n { font-size: 12px; opacity: .65; }
  .now__t { position: static; width: auto; height: auto; clip-path: none; display: flex; flex-direction: column-reverse; gap: 3px; white-space: normal; overflow: visible; }
  .now__title { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: .005em; }
  .now__artist { font-size: 14px; opacity: .8; }
  .now__sep { display: none; }

  .transport {
    order: 1;
    display: grid; grid-template-columns: 1fr 56px 76px 56px 1fr; align-items: center; row-gap: 4px;
  }
  .seek { grid-area: 1 / 1 / 2 / 6; width: 100%; }
  #tCur { grid-area: 2 / 1; }
  #tDur { grid-area: 2 / 5; justify-self: end; }
  .tbtn { display: grid; place-items: center; width: 56px; height: 56px; margin-top: 8px; }
  .tbtn svg { width: 30px; height: 30px; fill: currentColor; }
  .tbtn:disabled { opacity: .25; }
  .tbtn--prev { grid-area: 3 / 2; }
  .play { grid-area: 3 / 3; justify-self: center; width: 72px; height: 72px; margin-top: 8px; background: var(--ink); color: #fff; border: 0; }
  .play svg { width: 30px; height: 30px; }
  .play:hover:not(:disabled) { background: var(--ink); }
  .tbtn--next { grid-area: 3 / 4; }

  .vol { order: 2; width: 100%; gap: 10px; }
  .vol__range { flex: 1; width: auto; }

  /* лого лейблу — в самому низу плеєра */
  .tracklist { flex: 1 0 auto; }
  .label-logo--m { display: block; --h: 44px; margin: 34px auto 0; }

  /* список треків */
  .tracklist { display: block; list-style: none; margin: 26px 0 0; padding: 0 12px; }
  .tl {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    width: 100%; padding: 11px 12px; border-radius: 12px; text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  .tl.is-active { background: rgba(255, 255, 255, .6); }
  .tl__n { font-size: 13px; opacity: .6; font-variant-numeric: tabular-nums; }
  .tl__t b { display: block; font-weight: 600; font-size: 15px; line-height: 1.25; }
  .tl__t span { display: block; font-size: 12px; opacity: .7; margin-top: 1px; }
  .tl__s em { font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
  .tl--soon { opacity: .45; }
  .eq { display: none; width: 16px; height: 14px; align-items: flex-end; gap: 2px; }
  .eq u { display: block; width: 3px; height: 25%; background: currentColor; text-decoration: none; }
  .eq u:nth-child(1) { height: 45%; } .eq u:nth-child(2) { height: 85%; } .eq u:nth-child(3) { height: 60%; }
  .tl.is-active .eq { display: inline-flex; }
  .player.is-playing .tl.is-active .eq u { animation-name: m-eq; animation-duration: .9s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
  .player.is-playing .tl.is-active .eq u:nth-child(2) { animation-delay: -.35s; }
  .player.is-playing .tl.is-active .eq u:nth-child(3) { animation-delay: -.7s; }
}