/* Neumorphic player — как на старом скрине */

#player-audio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.neo-player {
  --neo-bg: #e4e9f0;
  --neo-card: #e8edf4;
  --neo-text: #1e2a44;
  --neo-muted: #5a6a88;
  --neo-accent: #2f6bff;
  --neo-script: #e11d48;
  --neo-shadow-dark: #c5ccd6;
  --neo-shadow-light: #ffffff;
  position: relative;
  z-index: 30;
}

.neo-player__card {
  background: var(--neo-card);
  border-radius: 28px;
  padding: 1.35rem 1.35rem 1.5rem;
  box-shadow: none !important;
}

/* кнопки в топе: без тени вверх — иначе ореол над карточкой */
.neo-player .neo-player__top .neo-btn {
  box-shadow:
    4px 5px 10px var(--neo-shadow-dark),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.neo-player__top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}
.neo-player__brand {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--neo-text);
  pointer-events: none; /* тап идёт в card → expand, без навигации */
}
.neo-player__brand .brand-logo {
  font-size: 1.55rem;
  color: var(--neo-text);
}
.neo-player__brand .brand-logo__tilde,
.neo-player__brand .brand-logo__word--accent {
  color: var(--accent);
}
.neo-player__brand .brand-logo__tilde {
  width: 24px;
  height: 13px;
}
#player-fav.is-active {
  color: #e11d48;
}

.player-more {
  position: relative;
  flex-shrink: 0;
}
.player-more__menu[hidden] { display: none !important; }
.player-more__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  z-index: 55;
  min-width: 220px;
  padding: 0.35rem;
  border-radius: 14px;
  background: var(--neo-card);
  box-shadow:
    6px 6px 16px var(--neo-shadow-dark),
    -4px -4px 12px var(--neo-shadow-light);
  display: grid;
  gap: 0.2rem;
}
.player-more__item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--neo-text);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
}
.player-more__item:hover {
  background: var(--neo-bg, #e4e9f0);
  color: var(--neo-accent);
  text-decoration: none;
}
.player-more__submenu {
  display: grid;
  gap: 0.15rem;
  margin: 0.15rem 0 0.25rem;
  padding: 0.25rem 0 0.25rem 0.45rem;
  border-left: 2px solid rgba(47, 107, 255, 0.25);
}
.player-more__submenu[hidden] { display: none !important; }
.player-more__submenu .player-more__item {
  font-size: 0.85rem;
  padding: 0.5rem 0.65rem;
}
.player-more__empty {
  display: block;
  padding: 0.45rem 0.65rem;
  color: var(--neo-muted, #5a6a88);
  font-size: 0.82rem;
  font-weight: 600;
}
#player-more-playlist[aria-expanded="true"] {
  color: var(--neo-accent, #2f6bff);
}

/* queue sheet */
.queue-sheet[hidden] { display: none !important; }
.queue-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
}
.queue-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 42, 68, 0.35);
  backdrop-filter: blur(2px);
}
.queue-sheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: min(72vh, 640px);
  background: var(--neo-card);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 40px rgba(30, 42, 68, 0.18);
  display: flex;
  flex-direction: column;
  padding:
    1rem 1rem
    max(1rem, env(safe-area-inset-bottom));
  animation: queueUp 0.22s ease;
}
@keyframes queueUp {
  from { transform: translateY(18px); opacity: 0.7; }
  to { transform: translateY(0); opacity: 1; }
}
.queue-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.queue-sheet__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--neo-muted);
}
.queue-sheet__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--neo-text);
}
.queue-sheet__list {
  overflow: auto;
  display: grid;
  gap: 0.45rem;
  min-height: 0;
}
.queue-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border-radius: 14px;
  border: none;
  background: var(--neo-bg, #e4e9f0);
  box-shadow:
    3px 3px 8px var(--neo-shadow-dark),
    -3px -3px 8px var(--neo-shadow-light);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--neo-text);
  width: 100%;
}
.queue-item.is-current {
  outline: 2px solid var(--neo-accent);
}
.queue-item__logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  background: #c5d0e0;
}
.queue-item__logo--empty {
  background: linear-gradient(135deg, #c5d0e0, #a8b4c8);
}
.queue-item__name {
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.25;
}
.queue-item__meta {
  font-size: 0.75rem;
  color: var(--neo-muted);
  font-weight: 600;
}
.queue-item__play {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--neo-accent);
}
.queue-sheet__empty {
  color: var(--neo-muted);
  font-weight: 600;
  padding: 1rem 0.25rem;
}

.neo-player__art {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #1a1f2a;
  box-shadow:
    inset 6px 6px 14px rgba(0, 0, 0, 0.35),
    inset -4px -4px 10px rgba(255, 255, 255, 0.08);
}

.neo-player__logo,
.neo-player__art-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0e121a;
}

.neo-player__art-fallback {
  object-fit: cover;
  background:
    radial-gradient(circle at 30% 20%, #3b4660 0%, transparent 50%),
    linear-gradient(145deg, #222836, #0e121a);
}

.neo-player__rec {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #ff8a7a;
  font-size: 0.8rem;
  font-weight: 700;
}

.neo-player__rec[hidden],
.neo-player__rec-inline[hidden] { display: none !important; }
.neo-player__rec-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d;
  animation: recpulse 1.2s ease-in-out infinite;
}
.neo-player__rec-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  color: #e11d48;
  font-size: 0.8rem;
  font-weight: 800;
}
@keyframes recpulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.neo-player__meta {
  text-align: center;
  margin: 1.25rem 0 1.35rem;
  padding: 0 0.25rem;
}

.neo-player__station {
  color: var(--neo-text);
  font-weight: 700;
  font-size: clamp(0.95rem, 2.8vw, 1.15rem);
  letter-spacing: -0.01em;
}

.neo-player__now {
  margin-top: 0.35rem;
  color: var(--neo-muted);
  font-size: 0.95rem;
  font-weight: 600;
  min-height: 1.3em;
}

.neo-player__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.neo-btn {
  --sz: 52px;
  width: var(--sz);
  height: var(--sz);
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #7a869c;
  background: var(--neo-card);
  box-shadow:
    6px 6px 14px var(--neo-shadow-dark),
    -6px -6px 14px var(--neo-shadow-light);
  transition: transform 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
  text-decoration: none;
  flex-shrink: 0;
}
.neo-btn:hover { color: var(--neo-text); text-decoration: none; }
.neo-btn:active {
  box-shadow:
    inset 4px 4px 10px var(--neo-shadow-dark),
    inset -4px -4px 10px var(--neo-shadow-light);
  transform: scale(0.97);
}
.neo-btn--sm { --sz: 44px; }
.neo-btn--main {
  --sz: 72px;
  color: var(--neo-accent);
  position: relative;
}
.neo-btn--main .ico-play,
.neo-btn--main .ico-pause {
  display: block;
  pointer-events: none;
}
.neo-btn--main .ico-pause { display: none; }
.neo-btn--main.is-playing .ico-play { display: none; }
.neo-btn--main.is-playing .ico-pause { display: block; }
.neo-btn--main.is-playing { color: #1e2a44; }
.neo-btn--rec.is-recording {
  color: #e11d48;
  box-shadow:
    inset 4px 4px 10px var(--neo-shadow-dark),
    inset -4px -4px 10px var(--neo-shadow-light);
  animation: recpulse 1.2s ease-in-out infinite;
}
.neo-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ===== layout modes ===== */
body.is-player {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  justify-content: center;
  align-items: center;
  padding: 1.25rem;
}
/* на fullscreen-плеере (домашний / expand) browse-bar спрятан — покажем меню слева в топе */
body.is-player .browse-bar {
  display: flex !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: transparent;
  border: none;
  backdrop-filter: none;
  padding: max(0.65rem, env(safe-area-inset-top)) 0.85rem 0.35rem;
  pointer-events: none;
}
body.is-player .browse-bar > * { pointer-events: auto; }
body.is-player .browse-bar__brand { display: none; }
body.is-player .main { display: none !important; }
body.is-player .flash-wrap {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: min(420px, calc(100% - 2rem));
  margin: 0;
  padding: 0;
}
body.is-player .neo-player {
  width: min(420px, 100%);
}

/* Mobile player — карточка по центру, не edge-to-edge */
@media (max-width: 640px) {
  body.is-player {
    padding: 0.75rem;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  body.is-player .neo-player {
    width: 100%;
    height: auto;
    max-height: 100dvh;
    display: flex;
    padding:
      max(3.25rem, calc(env(safe-area-inset-top) + 2.5rem))
      max(0.35rem, env(safe-area-inset-right))
      max(0.85rem, env(safe-area-inset-bottom))
      max(0.35rem, env(safe-area-inset-left));
  }
  body.is-player .neo-player__card {
    flex: 0 1 auto;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    min-height: 0;
    padding: 1.2rem 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body.is-player .neo-player__top {
    flex-shrink: 0;
    margin-bottom: 0.65rem;
  }
  body.is-player .neo-player__art {
    flex: 0 1 auto;
    width: 100%;
    max-height: min(52vh, 360px);
    aspect-ratio: 1;
    min-height: 0;
  }
  body.is-player .neo-player__meta {
    flex-shrink: 0;
    margin: 1.1rem 0 1.25rem;
  }
  body.is-player .neo-player__controls {
    flex-shrink: 0;
    padding-bottom: 0.25rem;
    gap: 0.28rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.is-player .neo-btn { --sz: 44px; }
  body.is-player .neo-btn--sm { --sz: 40px; }
  body.is-player .neo-btn--main { --sz: 64px; }
  body.is-player .neo-btn svg { width: 18px; height: 18px; }
  body.is-player .neo-btn--main svg { width: 24px; height: 24px; }
  body.is-player .flash-wrap {
    width: calc(100% - 1.5rem);
    top: max(0.5rem, env(safe-area-inset-top));
  }
}

@media (max-width: 380px) {
  body.is-player .neo-btn { --sz: 40px; }
  body.is-player .neo-btn--sm { --sz: 36px; }
  body.is-player .neo-btn--main { --sz: 58px; }
  body.is-player .neo-player__controls { gap: 0.2rem; }
}
body.is-browsing {
  padding-bottom: 0;
  --player-dock: 12rem;
}
body.is-browsing .neo-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom));
  background: transparent;
  pointer-events: auto;
}
body.is-browsing .main {
  padding-bottom: calc(var(--player-dock) + env(safe-area-inset-bottom, 0px) + 1.25rem);
}
html {
  scroll-padding-bottom: calc(var(--player-dock, 12rem) + env(safe-area-inset-bottom, 0px) + 1rem);
}
body.is-browsing .neo-player__card {
  pointer-events: auto;
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 0.55rem 0.75rem;
  border-radius: 20px;
  border: 1px solid rgba(30, 42, 68, 0.08);
  box-shadow: none;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-areas:
    "top top top"
    "art meta controls";
  gap: 0.45rem 0.75rem;
  align-items: center;
}
body.is-browsing .neo-player__top {
  grid-area: top;
  margin: 0;
  min-height: 0;
}
body.is-browsing .neo-player__top .neo-btn--sm { --sz: 32px; }
body.is-browsing .neo-player__brand .brand-logo { font-size: 1.25rem; }
body.is-browsing .neo-player__brand .brand-logo__tilde { width: 20px; height: 11px; }
body.is-browsing .neo-player__art {
  grid-area: art;
  width: 56px;
  aspect-ratio: 1;
  border-radius: 14px;
}
body.is-browsing .neo-player__rec { display: none !important; }
body.is-browsing .neo-player__meta {
  grid-area: meta;
  text-align: left;
  margin: 0;
  min-width: 0;
}
body.is-browsing .neo-player__station {
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.is-browsing .neo-player__now {
  font-size: 0.8rem;
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.is-browsing .neo-player__controls {
  grid-area: controls;
  gap: 0.35rem;
}
body.is-browsing .neo-btn { --sz: 40px; }
body.is-browsing .neo-btn--sm { --sz: 36px; }
body.is-browsing .neo-btn--main { --sz: 48px; }
body.is-browsing .neo-btn svg { width: 18px; height: 18px; }
body.is-browsing .neo-btn--main svg { width: 22px; height: 22px; }
body.is-player-expand #player-collapse { display: inline-flex; }
#player-collapse[hidden] { display: none !important; }
body.is-browsing .neo-player__card {
  cursor: pointer;
}
body.is-browsing .neo-player__card .neo-btn,
body.is-browsing .neo-player__card a {
  cursor: pointer;
}
/* мини-плеер у низа экрана — меню вверх */
body.is-browsing .player-more__menu {
  top: auto;
  bottom: calc(100% + 0.45rem);
}
body.is-browsing .neo-player__card,
body.is-browsing .neo-player[data-skin] .neo-player__card {
  box-shadow: none !important;
}
body.is-player .neo-player__card {
  cursor: default;
  box-shadow:
    20px 20px 40px var(--neo-shadow-dark),
    -16px -16px 32px var(--neo-shadow-light) !important;
}
body.is-player .neo-player .neo-player__top .neo-btn {
  box-shadow:
    4px 5px 10px var(--neo-shadow-dark),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

@media (max-width: 640px) {
  body.is-browsing {
    --player-dock: 15rem;
  }
  body.is-browsing .neo-player__card {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "top top"
      "art meta"
      "controls controls";
  }
  body.is-browsing .neo-player__controls { justify-content: center; }
}