:root {
 --b: #0e0e0e;
 --x: #262626;
 --y: #fff;
 --f: #1dcd5c;
 --bo: solid var(--b) calc(1px + 1 * ((100vw - 300px)/ 1620));
 --p40to20: calc(20% + (100vw - 300px) * (20 / 1620));
}

* {
 padding: 0;
 box-sizing: border-box;
 margin: 0;
 font-style: normal;
 font-variant: normal;
 font-family: ff,Arial;
 font-size: calc(10px + (16 - 10) * ((100vw - 300px) / (1920 - 300)));
 font-weight: 400;
 scrollbar-width: none;
 overscroll-behavior: none;
 color: var(--y);
 user-select: none;
 -webkit-user-select: none;
 text-decoration: none;
 outline: 0;
 border: none;
}

body,html {
 height: 100%;
 min-height: 100%;
 max-height: 100%;
}

@font-face {
 font-family:ff;src:url('n.woff') format('woff');
}

::-webkit-scrollbar {
 display: none;
}

html {
 background: var(--b);
 overflow-x: hidden;
 overflow-y: hidden;
}
@media (max-height: 176px) {
 html {overflow-y: scroll;}
}

::selection {
 background: #45f5;
}

* img {
 pointer-events: none;
}

@media (max-width:299px) {
 body {
  display: none;
 }
}








.app {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}











/* PLAYER (33.33% wysokości) */
#player {
  height: 33.33%;
  width: 100%;
  position: relative;
}

#player::before {
  content: "";
  position: absolute;
  inset: 0;
  background:linear-gradient(0deg,var(--b) 10%, transparent 100%);

  z-index: 0;
}



/* PLAYER ACTION BUTTONS */
#btn {
  display: flex;
  position: absolute;
  width: 100%;
  height: 25%;
  display: flex;    
  padding: 0.5% 0.25%;
  bottom: 0;
}

#btn * {
  width: 20%;
  height: 100%;
  margin: 0 0.25%;
  background: none;
  cursor: pointer;
}

#btn-prev, #btn-next {
  z-index: 99;
  display: flex;
}
#btn-prev {
  background: url('assets/icons/btn-prev.svg') center center / auto 35% no-repeat;
}
#btn-next {
  background: url('assets/icons/btn-next.svg') center center / auto 35% no-repeat;
}

#btn-play {
  background: center center / auto 50% no-repeat;
}
#btn-play.is-playing {
  background-image: url('assets/icons/btn-play2.svg');
}
#btn-play.is-paused {
  background-image: url('assets/icons/btn-play.svg');
}

#btn-shuffle, #btn-loop {
  background: center center / auto 35% no-repeat;
}

#btn-shuffle {
  background-image: url('assets/icons/btn-shuffle2.svg');
}
#btn-shuffle.inactive {
  background-image: url('assets/icons/btn-shuffle.svg');
}

#btn-loop {
  background-image: url('assets/icons/btn-loop2.svg');
}
#btn-loop.inactive {
  background-image: url('assets/icons/btn-loop.svg');
}



/* WATCHING PROGRESS BAR */
#timeline {
  display: flex;
  position: absolute;
  align-items: end;
  width: 100%;
  height: 25%;
  display: flex;    
  padding: 0.5% 0.25%;
  bottom: 25%;
}
#progress {
  flex: 1;
  height: 3px;
  min-width: 97%;
  max-width: 97%;
  margin: 0 auto;
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: 12px;
  appearance: none;
  z-index: 99;
}
#progress::-webkit-slider-thumb, 
#progress::-moz-range-thumb {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 99;
}

#current-time,
#duration {
  position: absolute;
  min-width: 40px;
  text-align: center;
  white-space: nowrap;
  z-index: 0;
  margin-bottom: clamp(8px, calc(6px + (100vw - 300px) * (3.6 / 1620)), 9.6px);
}
#current-time {
  text-align: left;
  left: 1.8%;
}
#duration {
  text-align: right;
  right: 1.8%;
}

.current-song {
  position: absolute;
  left: 50%;
  margin-bottom: clamp(8px, calc(6px + (100vw - 300px) * (3.6 / 1620)), 9.6px);
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  white-space: nowrap;
  pointer-events: none;
}




/* SONG PIC */
.picture {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60%;
  display: flex;    
  padding: 0.5% 0.25%;
  top: 0;
}

#picture {
  display: flex;
  position: absolute;

  height: 90%;
  width: 100%;
  border-radius: 12px;

}






  /* Volume slider w lewym dolnym rogu */
  .volume {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 100px;   /* zgodnie z wymaganiem */
    height: 30px;
  }

  /* Środkowe kontrolki na dole */
  .controls {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display:flex;
    gap: 10px;
  }/*
  .controls button {
    width: 30px; height: 30px;
    border: none; background: #00e600; color: #003300;
    border-radius: 4px; cursor: pointer;
    display: grid; place-items: center; font-size: 16px;
  }*/




  
  /* PLAYLIST (66.66% wysokości) */
  .playlist {
    height: 66.66%;
    width: 100%;
    overflow-y: auto;
  }

  /* Track: 1/5 wysokości playlisty = 20% (przy 5 elementach wypełnia całą) */
  .track {
    height: 20%;
    min-height: 72px; /* zabezpieczenie przy małych widokach */
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
  }
  .track img { width: 60px; height: 60px; object-fit: cover; border-radius:6px; flex-shrink:0; }
  .track-info { flex:1; overflow:hidden; }
  .track-title { font-weight:700; white-space:nowrap; text-overflow: ellipsis; overflow:hidden; }
  .track-artist { font-size:0.9rem; color:#666; margin-top:6px; white-space:nowrap; text-overflow: ellipsis; overflow:hidden; }


  
.track button.play-track {
  background: url('assets/icons/btn-play.svg') center center / auto 70% no-repeat;
  width: 30px;
  height: 30px;
  cursor: pointer;
  border: none;
}
.track button.play-track.isplaying {
  background: url('assets/icons/btn-play2.svg') center center / auto 70% no-repeat;
}



  /* Podświetlenie odtwarzanego utworu */
  .track.playing { border-left: 1px solid #00e600; }

  /* responsywność: gdy bardzo mała wysokość, zmniejsz min-height */
  @media (max-height: 500px) {
    .track { min-height: 56px; }
    .track img { width:48px; height:48px; }
  }

  /* Estetyka scrollbar */
  .playlist::-webkit-scrollbar { width: 10px; }
  .playlist::-webkit-scrollbar-thumb { background: #f0aaf0; border-radius:6px; }