/* styles.css - ИСПРАВЛЕННАЯ ВЕРСИЯ (STICKY FOOTER) */

/* 1. ПОДКЛЮЧЕНИЕ ШРИФТА BENZIN EXTRA BOLD */
@font-face {
    font-family: 'Benzin';
    src: url('fonts/Benzin-ExtraBold.woff2') format('woff2'),
         url('fonts/Benzin-ExtraBold.woff') format('woff');
    font-weight: 800; /* Extra Bold */
    font-style: normal;
    font-display: swap; 
}

/* 2. ПЕРЕМЕННЫЕ И ОСНОВНЫЕ СТИЛИ */
:root{
  --bg:#1f1b20;
  --card:#252129;
  --muted:#9b98a0;
  --accent:#e6e6e6;
  --accent-2:#ff8a00;
  --live-red: #ff5757;
  --player-height: 80px; 
  --footer-height: 48px;
}
*{box-sizing:border-box}

body{
  margin:0;
  /* ОСНОВНОЙ ТЕКСТ - СИСТЕМНЫЙ ШРИФТ */
  font-family:system-ui, Arial, Helvetica, sans-serif; 
  background:linear-gradient(180deg, #1e1b1f, #0f0d11);
  color:var(--accent);
  min-height:100vh;
  
  /* --- ИСПРАВЛЕНИЕ ДЛЯ ФУТЕРА (FLEXBOX) --- */
  display: flex;
  flex-direction: column;
  /* ---------------------------------------- */

  /* Резервируем место ТОЛЬКО для фиксированного плеера */
  padding-bottom: var(--player-height); 
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* 3. TOPBAR (ЗАКРЕПЛЕННАЯ ВЕРХНЯЯ ПАНЕЛЬ) */
.topbar{
    padding:18px 0;
    /* ФОН ДЛЯ ЗАКРЕПЛЕНИЯ */
    background: #141214; 
    position:sticky;
    top:0;
    z-index:30;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5); 
}
.top-inner{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;gap:12px;align-items:center}
.brand-logo { height: 48px; width: auto; }

/* nav buttons */
.main-nav{display:flex;gap:18px;align-items:center}
.nav-btn{
  background:transparent;border:none;color:var(--muted);
  padding:6px 10px;border-radius:6px;cursor:pointer;
  transition:color 0.2s, background 0.2s
}
.nav-btn.active{color:var(--accent-2);background:rgba(255,138,0,0.06)}
.nav-btn:hover{color:var(--accent-2);background:rgba(255,138,0,0.06)}


/* 4. КОНТЕНТ И ЗАГОЛОВКИ */
.content{
  padding:28px 0;
  
  /* --- ИСПРАВЛЕНИЕ: Растягиваем контент, чтобы толкнуть футер вниз --- */
  flex: 1;
  width: 100%;
  /* ------------------------------------------------------------------ */
}

h2{
    margin:18px 0;
    /* BENZIN ТОЛЬКО ДЛЯ H2 */
    font-family:'Benzin', Arial, Helvetica, sans-serif; 
    font-size: 24px;
}

/* carousel controls */
.carousel-controls{display:flex;align-items:center;gap:12px}
.carousel-wrap{overflow-x:scroll;flex:1; -webkit-overflow-scrolling: touch; padding-bottom: 12px;} 
.carousel-wrap::-webkit-scrollbar { display: none; }
.carousel{display:flex;gap:16px;align-items:center;padding:6px 0;scroll-behavior:smooth}

/* cards */
.card{
  width:170px;min-width:170px;height:170px;background:var(--card);border-radius:12px;
  padding:8px;color:#fff;
  position:relative;cursor:pointer
}
.cover{width:100%;height:110px;border-radius:8px;overflow:hidden;position:relative}
.card img{width:100%;height:100%;object-fit:cover} 
.play-overlay{
  position:absolute;top:0;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.4);color:white;font-size:32px;
  opacity:0;transition:opacity 0.2s;
}
.card:hover .play-overlay{opacity:1;}
.meta{font-size:13px;margin-top:8px}
.title{font-weight:700}
.artist{color:var(--muted);font-size:12px}


/* chart */
.chart{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.chart-col {
    display: flex;
    flex-direction: column;
}
.track-row{
  display:flex;align-items:center;gap:16px;padding:12px 8px;border-bottom:1px solid rgba(255,255,255,0.03);cursor:pointer;
  position: relative;
}
.chart-col .track-row:last-child {
    border-bottom: none; 
}
.num{font-size:40px;width:56px;color:var(--accent);font-weight:900;} 
.thumb{width:56px;height:56px;border-radius:8px;overflow:hidden}
.track-row img{width:100%;height:100%;object-fit:cover;} 
.info{flex:1}
.info .t{font-weight:700}
.info .a{color:var(--muted);font-size:13px}
.heart { display: none; }


/* history */
.history-list{display:flex;flex-direction:column;gap:8px}
.history-item{
  display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;
  background:var(--card);cursor:pointer;
}
.history-item img{width:56px;height:56px;border-radius:8px;object-fit:cover}
.htime{font-size:14px;color:var(--muted);width:40px;text-align:right} 
.hmeta .ht{font-weight:700}
.hmeta .ha{color:var(--muted);font-size:13px}

/* 5. PLAYER (НИЖНЯЯ ПАНЕЛЬ) */
.player-wrap{
  position:fixed; left:0;right:0; bottom:0; /* Плеер на самом дне */
  height: var(--player-height);
  /* ФОН НА ВСЮ ШИРИНУ */
  background:linear-gradient(180deg,#0b0b0c,#141214); 
  backdrop-filter:blur(6px);z-index:60; padding:0;
}
.player-inner{
  display:flex;align-items:center;gap:12px;
  padding:10px 20px;
  height:100%;
}
.play-btn{
  width:56px;height:56px; border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04);
}
.play-btn .icon{font-size:20px;display:flex;align-items:center;justify-content:center;height:100%;width:100%}

/* player elements */
.pcover{width:56px;height:56px;border-radius:8px;object-fit:cover}
.pmeta{flex:1;min-width:0}
.ptitle{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.partist{color:var(--muted);font-size:13px}

/* Выравнивание элементов в правой части плеера */
.pright{
    display:flex;
    align-items:center; 
    gap:12px
}
.controls {
    display: flex; 
    align-items: center;
    gap: 8px; 
}

/* Кнопка Live */
.live-btn {
  background: none; 
  border: none;
  padding: 0; 
  margin-right: 10px;
  cursor: pointer;
  height: 24px;
  display: flex; 
  align-items: center;
}
.live-icon {
    height: 24px; 
    width: auto;
    vertical-align: middle;
}

/* СТИЛИ ДЛЯ КНОПКИ ГРОМКОСТИ С PNG */
.mute-btn {
  background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 4px; transition: color 0.2s;
  height: 24px; 
  display: flex;
  align-items: center;
}
.mute-btn:hover { color: var(--accent); }
.mute-btn .icon { 
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; 
    width: 24px; /* Фиксированная ширина для иконки */
}


/* СТИЛИ ДЛЯ ПОЛЗУНКА ГРОМКОСТИ (INPUT[TYPE="RANGE"]) */
input[type=range] {
  -webkit-appearance: none;
  width: 100px;
  background: transparent;
  cursor: pointer;
}

/* Трек (дорожка) для Chrome, Safari, Opera */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

/* Ползунок (бегунок) для Chrome, Safari, Opera */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -6px; 
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ffffff; /* БЕЛЫЙ ЦВЕТ */
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

/* Трек (дорожка) для Firefox */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

/* Ползунок (бегунок) для Firefox */
input[type=range]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ffffff; /* БЕЛЫЙ ЦВЕТ */
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
  border: none;
}

/* 6. FOOTER */
.legal-footer{
  background:linear-gradient(180deg,#0f0f10,#0b0b0c);
  padding:10px 0; 
  border-top:1px solid rgba(255,255,255,0.02); 
  z-index: 50;
  /* Убрали лишнее, теперь позиционируется через Flexbox */
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
  font-size:13px;
  min-height: var(--footer-height); 
}

/* socials */
.socials a{
  text-decoration: none; 
  margin-left: 10px; 
  transition: opacity 0.2s; 
  opacity: 0.7; 
}
.socials a:hover{
  opacity: 1; 
}

.social-icon {
    height: 20px; 
    width: auto;
    vertical-align: middle;
}

/* responsive */
@media(max-width:900px){.chart{grid-template-columns:1fr} .player-inner{padding:8px}}

.hidden {
  display: none !important;
}

/* --- PWA & MOBILE FIXES --- */

/* 1. Скрываем управление громкостью на мобильных (< 900px) */
@media(max-width:900px){
    /* Скрываем весь блок controls (кнопка mute + ползунок) */
    .controls {
        display: none !important;
    }
    
    /* Делаем кнопку Live поближе к краю, раз громкости нет */
    .pright {
        gap: 0;
    }
}

/* 2. Стили для умной бегущей строки */
.marquee-wrap {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    /* Маска для красивого затухания краев текста */
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

/* Класс, который JS добавит, если текст длинный */
.is-scrolling {
    display: inline-block;
    padding-left: 100%; /* Начинаем за пределами экрана справа */
    animation: marquee-scroll 12s linear infinite;
}

@keyframes marquee-scroll {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}