/* =======================
   Default variables
   ======================= */
:root {
  --gradient-color-main: linear-gradient(355deg, rgba(255, 255, 255, 0.356) 0%, rgba(0, 0, 0, 0.445) 56%, rgba(255, 255, 255, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(255, 255, 255, 0.63) 0%, rgba(0, 0, 0, 0.767) 56%, rgba(255, 255, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(255, 255, 255, 0.527) 0%, rgba(129, 129, 129, 0.555) 56%, rgba(255, 255, 255, 0.61) 100%);
  --svg-icons-inactive: rgba(190, 190, 190, 0.329);
  --border-color-inactive: rgba(255, 255, 255, 0.267);
  --svg-icons-active: rgb(255, 255, 255);
  --accent-colors: rgb(221, 255, 99);
  --navbar-color: rgb(36, 36, 36);
}

/* =======================
   Themes
   ======================= */

/* Classic Titanium (default) */
:root[data-theme="classic-titanium"] {
  --gradient-color-main: linear-gradient(355deg, rgba(255, 255, 255, 0.356) 0%, rgba(0, 0, 0, 0.445) 56%, rgba(255, 255, 255, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(255, 255, 255, 0.63) 0%, rgba(0, 0, 0, 0.767) 56%, rgba(255, 255, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(255, 255, 255, 0.527) 0%, rgba(129, 129, 129, 0.555) 56%, rgba(255, 255, 255, 0.61) 100%);
  --svg-icons-inactive: rgba(190, 190, 190, 0.329);
  --border-color-inactive: rgba(255, 255, 255, 0.267);
  --svg-icons-active: rgb(255, 255, 255);
  --accent-colors: rgb(221, 255, 99);
  --navbar-color: rgb(36, 36, 36);
}

/* Aqua Jelly */
:root[data-theme="aqua-jelly"] {
  --gradient-color-main: linear-gradient(355deg, rgba(73, 188, 255, 0.356) 0%, rgba(2, 100, 145, 0.445) 56%, rgba(157, 255, 214, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(0, 135, 145, 0.63) 0%, rgba(15, 206, 181, 0.233) 56%, rgba(40, 248, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(118, 200, 255, 0.527) 0%, rgba(4, 161, 209, 0.555) 56%, rgba(60, 232, 255, 0.61) 100%);
  --svg-icons-inactive: rgba(13, 88, 65, 0.329);
  --border-color-inactive: rgba(255, 255, 255, 0.267);
  --svg-icons-active: rgb(158, 255, 234);
  --accent-colors: rgb(97, 255, 221);
  --navbar-color: rgb(0, 150, 170);
}

/* Crimson Love */
:root[data-theme="crimson-love"] {
  --gradient-color-main: linear-gradient(355deg, rgba(224, 0, 0, 0.356) 0%, rgba(255, 29, 29, 0.664) 56%, rgba(255, 27, 27, 0.753) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(255, 80, 80, 0.63) 0%, rgba(179, 10, 10, 0.767) 56%, rgba(255, 83, 83, 0.459) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(255, 0, 0, 0.527) 0%, rgba(255, 59, 59, 0.555) 56%, rgba(255, 136, 136, 0.61) 100%);
  --svg-icons-inactive: rgba(49, 28, 28, 0.329);
  --border-color-inactive: rgba(99, 19, 19, 0.267);
  --svg-icons-active: rgb(255, 223, 223);
  --accent-colors: rgb(255, 121, 104);
  --navbar-color: rgb(114, 20, 20);
}

/* Sunset Kiss */
:root[data-theme="sunset-kiss"] {
  --gradient-color-main: linear-gradient(355deg, rgba(255, 227, 68, 0.356) 0%, rgba(255, 130, 28, 0.445) 56%, rgba(241, 255, 112, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(255, 189, 114, 0.63) 0%, rgba(175, 140, 43, 0.945) 56%, rgb(255, 187, 147) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(255, 204, 64, 0.527) 0%, rgba(255, 121, 44, 0.836) 56%, rgba(252, 255, 55, 0.61) 100%);
  --svg-icons-inactive: rgba(151, 72, 19, 0.329);
  --border-color-inactive: rgba(104, 50, 14, 0.267);
  --svg-icons-active: rgb(255, 223, 41);
  --accent-colors: rgb(255, 187, 86);
  --navbar-color: rgb(201, 99, 40);
}

/* Midnight Sky */
:root[data-theme="midnight-sky"] {
  --gradient-color-main: linear-gradient(355deg, rgba(21, 14, 112, 0.815) 0%, rgba(26, 52, 92, 0.815) 56%, rgba(31, 15, 172, 0.884) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(16, 25, 153, 0.63) 0%, rgba(47, 41, 100, 0.788) 56%, rgba(71, 58, 252, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(19, 1, 43, 0.527) 0%, rgba(53, 67, 131, 0.555) 56%, rgba(79, 82, 231, 0.61) 100%);
  --svg-icons-inactive: rgba(84, 85, 177, 0.329);
  --border-color-inactive: rgba(73, 41, 190, 0.267);
  --svg-icons-active: rgb(144, 167, 230);
  --accent-colors: rgb(140, 76, 224);
  --navbar-color: rgb(9, 8, 88);
}

/* Bubblegum Flavor */
:root[data-theme="bubblegum-flavor"] {
  --gradient-color-main: linear-gradient(355deg, rgba(212, 78, 172, 0.356) 0%, rgba(185, 40, 120, 0.445) 56%, rgba(255, 133, 235, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(166, 215, 255, 0.63) 0%, rgba(15, 97, 129, 0.801) 56%, rgba(176, 243, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(88, 222, 255, 0.747) 0%, rgba(255, 171, 251, 0.836) 56%, rgba(134, 255, 249, 0.808) 100%);
  --svg-icons-inactive: rgba(190, 107, 158, 0.329);
  --border-color-inactive: rgba(172, 104, 166, 0.267);
  --svg-icons-active: rgb(255, 211, 226);
  --accent-colors: rgb(156, 255, 250);
  --navbar-color: rgb(61, 116, 189);
}

/* Serene Woods */
:root[data-theme="serene-woods"] {
  --gradient-color-main: linear-gradient(355deg, rgba(2, 77, 2, 0.685) 0%, rgba(42, 158, 67, 0.795) 56%, rgba(173, 247, 151, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(241, 197, 139, 0.63) 0%, rgba(119, 86, 24, 0.863) 56%, rgba(233, 186, 132, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(26, 202, 35, 0.527) 0%, rgba(22, 122, 22, 0.555) 56%, rgba(119, 255, 153, 0.61) 100%);
  --svg-icons-inactive: rgba(131, 161, 118, 0.445);
  --border-color-inactive: rgba(102, 138, 93, 0.753);
  --svg-icons-active: rgb(238, 184, 134);
  --accent-colors: rgb(162, 190, 125);
  --navbar-color: rgb(82, 72, 53);
}

/* Royal Genesis */
:root[data-theme="royal-genesis"] {
  --gradient-color-main: linear-gradient(355deg, rgba(187, 101, 148, 0.356) 0%, rgba(69, 10, 83, 0.445) 56%, rgba(255, 242, 250, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(242, 188, 255, 0.63) 0%, rgba(63, 15, 55, 0.349) 56%, rgba(255, 255, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(189, 69, 219, 0.527) 0%, rgba(199, 134, 185, 0.555) 56%, rgba(233, 152, 255, 0.61) 100%);
  --svg-icons-inactive: rgba(100, 33, 95, 0.329);
  --border-color-inactive: rgba(121, 31, 106, 0.267);
  --svg-icons-active: rgb(226, 182, 255);
  --accent-colors: rgb(252, 216, 255);
  --navbar-color: rgb(84, 38, 88);
}


* {
  margin: 0;
  padding: 0;
  font-family: Oxanium;
  -webkit-tap-highlight-color: transparent;
  font-weight: 300;
}

body {
    background: transparent;
}

section {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

a {
  text-decoration: none;
}

#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}


/*song obssessions styles*/
.song-obssessions-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

.song-obssessions-nest {
  display: flex;
  gap: clamp(0.625rem, 0.467rem + 0.6868vw, 1.25rem);
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  width: 100%;
  height: 100dvh;
  padding: clamp(0.5rem, 0.2313rem + 1.1681vw, 1.563rem);
  box-sizing: border-box;
  overflow: hidden;
}

.tracks-stats, .genre-stats {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 50%;
  height: 100%;
  background-color: var(--border-color-inactive);
  border-radius: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
  border: 2px solid var(--border-color-inactive);
  padding: clamp(0.7rem, 0.4978rem + 0.8791vw, 1.5rem);
  box-sizing: border-box;
  position: relative;
}

#now-playing {
  transition: opacity 0.1s ease-in-out;
  width: 100%;
}

.now-playing-img {
  position: absolute;
  bottom: 0;
  right: 0;
  height: clamp(8rem, 6.2308rem + 7.6923vw, 15rem);
}

.track-card {
  height: clamp(4rem, 2.4835rem + 6.5934vw, 10rem);
  display: flex;
  align-items: center;
  column-gap: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
  border-radius: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
  background-color: var(--accent-colors);
  overflow-x: hidden;
}

.album-art {
  border-radius: clamp(0.5rem, 0.3736rem + 0.5495vw, 1rem);
  width: clamp(5rem, 3.8942rem + 4.8077vw, 9.375rem);
  height: 100%;
  object-fit: cover;
}

.tracks-stats {
  row-gap: clamp(0.5rem, 0.3736rem + 0.5495vw, 1rem);
}

.track-name { 
  font-weight: bold; 
  font-size: clamp(0.7rem, 0.5736rem + 0.5495vw, 1.2rem); 
  color: var(--navbar-color);
}

.artist-name { 
  font-size: clamp(0.7rem, 0.5736rem + 0.5495vw, 1.2rem); 
  color: var(--navbar-color); 
}
.track-status { 
  font-size: clamp(0.7rem, 0.5736rem + 0.5495vw, 1.2rem); 
}

.track-status.playing { 
  color: var(--navbar-color); 
}
.track-status.stopped { 
  color: var(--navbar-color); 
}

.artist-card {
  display: flex;
  align-items: center;
  column-gap: clamp(0.5rem, 0.1209rem + 1.6484vw, 2rem);
  background: var(--navbar-color);
  border-radius: 12px;
  border: 2px solid var(--border-color-inactive);
  text-align: center;
  height: 7rem;
  overflow: hidden;
}

.artist-art {
  height: 100%;
}

.top-songs-list {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  height: 100%;
  width: 100%;
  border-radius: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
  padding: clamp(0.5rem, 0.1209rem + 1.6484vw, 2rem);
  box-sizing: border-box;
  background-color: var(--svg-icons-inactive);
  border: 2px solid var(--border-color-inactive);
}


.top-songs-list h2 {
  font-size: clamp(0.7rem, 0.3714rem + 1.4286vw, 2rem);
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  color: var(--accent-colors);
}

#top-tracks {
  display: flex;
  flex-direction: column;
  row-gap: clamp(0.2rem, -0.0022rem + 0.8791vw, 1rem);
}

.top-track-desc {
  display: flex;
  align-content: center;
  flex-direction: column;
  text-align: left;
}

.top-artist-rank {
  color: var(--accent-colors);
  font-size: clamp(0.7rem, 0.3714rem + 1.4286vw, 2rem);
  font-weight: 500;
}
.top-song-name {
  color: var(--svg-icons-active);
  font-size: clamp(0.65rem, 0.5615rem + 0.3846vw, 1rem);
  font-weight: bold;
}
.top-artist-name, .top-artist-plays {
  color: var(--svg-icons-active);
  font-weight: 500;
  font-size: clamp(0.65rem, 0.5615rem + 0.3846vw, 1rem);
}

.genre-stats h2 span{
  font-weight: bold;
}

.genre-stats h2 {
  text-align: center;
  font-size: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
  padding: clamp(0.5rem, 0.3736rem + 0.5495vw, 1rem);
  background-color: var(--navbar-color);
  color: var(--accent-colors);
  border-radius: 1rem;
  margin-bottom: 15px;
}

#top-genres {
  display: flex;
  justify-content: center;
  flex-direction: column;
  row-gap: clamp(2rem, 1.8736rem + 0.5495vw, 2.5rem);
}

.genre-bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.4945rem + 2.1978vw, 3rem);
}

.genre-label {
  min-width: clamp(5rem, 4.2418rem + 3.2967vw, 8rem);
  color: var(--accent-colors);
  font-weight: bold;
  text-transform: uppercase;
  font-size: clamp(0.8rem, 0.7495rem + 0.2198vw, 1rem);
}

.bar-wrapper {
  background: var(--border-color-inactive);
  border: 2px solid var(--border-color-inactive);
  height: 1rem;
  flex: 1;
}

.bar-inner {
  height: 100%;
  border-radius: 0;
  background-color: var(--accent-colors);
  transition: width 0.5s ease;
}

.count-label {
  margin-left: 6px;
  width: 20px;
  font-size: 1rem;
  color: var(--accent-colors);
  font-weight: bold;
}


@media (max-width: 1000px) {
    .song-obssessions-nest {
        flex-direction: column;
        row-gap: 5px;
    }

    .tracks-stats, .genre-stats {
        width: 100%;
    }

    .genre-stats {
        height: 50%;
        overflow-y: scroll;
    }

    .genre-stats::-webkit-scrollbar {
    width: 9px;             
    }

    .genre-stats::-webkit-scrollbar-track {
    background: transparent;
    margin: 5px;
    }

    .genre-stats::-webkit-scrollbar-thumb {
    background: var(--accent-colors);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 10px;
    }


    .artist-card {
        height: 3.5rem;
    }

    #top-genres {
        row-gap: 0;
    }

    .bar-wrapper {
        height: .5rem;
    }
}