.card {
  opacity: 0;
  transform: translateY(40px) scale(0.96) rotateX(8deg) skewY(2deg);
  filter: blur(12px) brightness(0.7) grayscale(0.2);
  pointer-events: none;
  transition:
    opacity 0.55s cubic-bezier(0.77,0,0.175,1),
    transform 0.7s cubic-bezier(0.77,0,0.175,1),
    filter 0.6s cubic-bezier(0.77,0,0.175,1);
      position: sticky;
  top: 10%;
  bottom: 10%;
  overflow: auto;
  overflow-x: hidden;
  /* Скрыть полосу прокрутки для WebKit браузеров */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  height: 100vh;
}

.card-text p,
.card .subtitle { 
    text-align: left;
    font-weight: var(--rg) !important;
    position: relative;
    mix-blend-mode: color-dodge;
    opacity: 0.7 !important;
    /* Используем динамический размер шрифта как в основном контенте */
    font-size: var(--dynamic-font-size) !important;
    line-height: var(--dynamic-line-height) !important;
}

/* Скрыть полосу прокрутки для WebKit браузеров (Chrome, Safari, Edge) */
.card::-webkit-scrollbar {
  display: none;
}


.card.visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0) skewY(0);
    filter: blur(0) brightness(1) grayscale(0);
    pointer-events: auto;
    display: flex
;
    flex-direction: column;
    border: 1px solid #f3000000;
    border-image: linear-gradient(45deg, #92f7ff14, #92f7ff4a) 1;
    border-image-slice: 1;
     background: var(--back);
     backdrop-filter: blur(9px); 
    background-repeat: round;
    background-size: cover;
     width: 100%;
     top: 0;


}




.card .heading {

  top: 0; /* Прилипает к верху */
  z-index: 50; /* Очень высокий z-index */
  background: linear-gradient(180deg, rgba(0, 13, 12, 0.100) 0%, rgba(0, 13, 12, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
  overflow: visible; /* Показываем содержимое */
  min-height: 60px; /* Минимальная высота для видимости */
  height: auto;
  display: flex; /* Делаем flex для размещения содержимого */
  align-items: center; /* Центрируем по вертикали */
  justify-content: space-between; /* Распределяем содержимое */
      padding-right: var(--xxl);
      padding-left: var(--xxl);
  pointer-events: auto;
  opacity: 1; /* Всегда видимый */
  visibility: visible; /* Всегда видимый */
  margin: 0 -1px; /* Компенсируем границы карточки */
  /* Никаких анимаций, переходов или скролл-эффектов */
}

/* Блюр для заголовка карточки */


/* Содержимое заголовка должно быть поверх блюра */
.card .heading > * { 
  position: relative; 
  z-index: 1; 
}

/* Футер карточки: фиксируем снизу с обратным градиентом и блюром */
.card .footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: linear-gradient(0deg, rgba(0, 13, 12, 0.100) 0%, rgba(0, 13, 12, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
  overflow: hidden;
  min-height: 88px;
}
.card .footer::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  mask: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0) 100%);
  z-index: -1;
}
.card .footer > * { position: relative; z-index: 1; }
.card .card-footer-slot { 
    width: 100%; 
    display: flex; 
    align-items: center; 
    gap: var(--lg);
    overflow: hidden;
    min-width: 0;
}

/* Отступ для контента карточки, чтобы он не перекрывался заголовком */
.card .fs__md.fw__rg.white {
  padding-top: 0;
}

/* Контейнер для кнопок в заголовке */
.header-buttons {
  display: flex !important;
  align-items: center !important;
  gap: var(--sm) !important;
  flex-shrink: 0 !important; /* Не сжимаем кнопки */
  overflow: visible !important; /* Показываем все кнопки */
  z-index: 20 !important; /* Поверх всего остального */
}

/* Кнопка воспроизведения в заголовке карточки - стабильная */
.card .play.audio-play-btn.btn--third {
  position: relative !important;
  --audio-play-btn-width: 32px;
  --audio-play-btn-height: 32px;
  --audio-play-btn-radius: var(--hg);
  --audio-play-btn-bg: #ffffff0f;
  --audio-play-btn-bg-hover: rgba(255, 255, 255, 0.15);
  --audio-play-btn-color: #ffffff80;
  --audio-play-btn-color-hover: #ffffff;
  --audio-play-btn-border: 1px solid #ffffff1c;
  --audio-play-btn-border-hover: 1px solid rgba(255, 255, 255, 0.3);
  --audio-play-btn-icon-size: 14px;
  --audio-play-btn-active-scale: 1;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  flex-shrink: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  transition: none !important;
}

.card .play.audio-play-btn.btn--third:hover {
  transform: none !important;
}

.card .play.audio-play-btn.btn--third i {
  margin-left: 1px;
}

.card-close {
    position: relative;
    width: 32px;
    height: 32px;
    border: 0;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
    border: var(--hg);
    background: #ffffff0f;
    border-radius: var(--hg);

    backdrop-filter: blur(5px);
    border: 1px solid #ffffff1c;
}

.close__icon {
    position: relative;
    width: 28px;
    height: 28px;
    border: 0;
    background: #00000075;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: var(--hg);
    border: 1px solid #ffffff30;
}

/* Отключаем эффекты свечения/масштаба для кнопки закрытия */
.card .card-close.btn--third,
.card .card-close.btn--third i {
  box-shadow: none !important;
  transform: none !important;
  transition: color 0.22s ease;
}

.card .card-close.btn--third i {
  font-size: 16px !important; /* Такой же размер как у других пунктов меню */
}
.card .card-close.btn--third:hover,
.card .card-close.btn--third:active {
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
  color: var(--white);
}


@media (min-width: 300px) and (max-width: 576px) {
  .card {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 100vh;
    top: 0px;
    bottom: 0px;
  }
  
  .card::-webkit-scrollbar {
    display: none;
  }


  

}

@media (min-width: 577px) and (max-width: 768px) {
  .card {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 100vh;
    top: 0px;
    bottom: 0px;
  }
  
  .card::-webkit-scrollbar {
    display: none;
  }



}

@media (min-width: 769px) and (max-width: 1024px) {
 .card {
    max-height: 100vh;  /* Добавляем max-height вместо min-height */
    height: 100vh; 
    min-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* Скрыть полосу прокрутки */
    scrollbar-width: none;
    -ms-overflow-style: none;
    border: none;
  }
  
  .card::-webkit-scrollbar {
    display: none;
  }
}


@media (min-width: 1024px) {
  .card {
    max-height: 100vh;  /* Добавляем max-height вместо min-height */
    min-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* Скрыть полосу прокрутки */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .card::-webkit-scrollbar {
    display: none;
  }

  /* Отступы для карточки только в веб-версии */
  .card.visible {
    padding-top: calc(var(--hg) * 1.5);
    padding-bottom: var(--hg);
  }
}