@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap";

:root {
  --primary-color: #ff5722;
  --primary-alpha: #1db9541a;
  --bg-dark: #0f172a;
  --bg-card: #1e293bb3;
  --text-main: #f1f5f9;
  --text-dim: #94a3b8;
  --glass-border: #ffffff1a;
  --shadow-premium: 0 25px 50px -12px #00000080
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-dark);
  background-image: radial-gradient(circle at 0% 0%, var(--primary-alpha) 0%, transparent 50%), radial-gradient(circle at 100% 100%, var(--primary-alpha) 0%, transparent 50%);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  overflow: hidden
}

.player-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 32px;
  padding: 2.5rem;
  width: 90%;
  max-width: 420px;
  box-shadow: var(--shadow-premium);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  position: relative
}

.player-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(20px) brightness(0.5);
  transform: scale(1.1);
  z-index: 0;
  transition: background-image .8s ease-in-out
}

.cover-container {
  width: 180px;
  box-shadow: 0 20px 25px -5px #0006;
  position: relative;
  margin: 0 auto;
  border: 3px solid #ffffff1a
}

#visualizer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: initial;
  opacity: .6
}

.cover-container,
.track-info,
.controls,
.volume-control {
  position: relative;
  z-index: 10
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover
}

@keyframes pulse-art {
  0% {
    transform: scale(1)
  }

  100% {
    transform: scale(1.08)
  }
}

.track-info {
  text-align: center;
  width: 100%
}

.track-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: .5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(to right, #fff, var(--text-dim));
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 1px 1px #000
}

.track-artist {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .5px;
  text-shadow: 0 1px 1px #000
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center
}

.btn-play {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--primary-color);
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 20px var(--primary-alpha);
  text-shadow: 0 1px 1px #000
}

.btn-play:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px var(--primary-color)
}

.btn-play:active {
  transform: scale(0.95)
}

.controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10
}

.style-selector {
  display: flex;
  align-items: center;
  background: transparent;
  padding: 0;
  width: 50px;
  height: 50px;
  justify-content: center;
  cursor: pointer;
  transition: all .3s ease
}

.spacer-right {
  width: 50px
}

.style-selector:hover {
  transform: scale(1.1)
}

.selector-icon {
  color: var(--text-main);
  font-size: 1.5rem;
  opacity: .8
}

.volume-control {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem
}

.volume-icon {
  color: var(--primary-color);
  text-shadow: 0 0 1px #000;
  font-size: 1.2rem;
  width: 24px
}

#volumeSlider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 10px;
  background: #ffffff1a;
  outline: none;
  cursor: pointer
}

#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  transition: transform .2s;
  box-shadow: 0 0 1px #000
}

#volumeSlider::-webkit-slider-thumb:hover {
  transform: scale(1.3);
  box-shadow: 0 0 5px #000
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center
}

.player-card {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
  margin: 0;
  gap: 1.5rem;
  justify-content: center
}

@media (max-height: 350px) {
  .player-card {
    flex-direction: row;
    padding: 1rem 2rem;
    align-items: center;
    gap: 2rem;
    text-align: left
  }

  .cover-container {
      overflow: hidden;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    max-height: 120px
  }

  .track-info {
    flex: 1;
    text-align: left
  }

  .track-title {
    font-size: 1.2rem
  }

  .controls {
    order: 2
  }

  .btn-play {
    width: 60px;
    height: 60px;
    font-size: 1.5rem
  }

  .volume-control {
    width: 180px;
    order: 3
  }
}

@media (max-height: 150px) {
  .player-card {
    padding: .5rem 1rem;
    gap: 1rem
  }

  .track-title {
    font-size: 1rem;
    margin-bottom: 0
  }

  .track-artist {
    font-size: .8rem
  }

  .controls-row {
    width: 100px
  }
}

.controls-row {
  justify-content: center
}

@media (max-width: 300px) {
  .player-card {
    padding: 1.5rem;
    gap: 1rem
  }

  .track-title {
    font-size: 1.1rem
  }

  .btn-play {
    width: 70px;
    height: 70px
  }
}

@media (max-width: 480px) and (max-height: 150px) {
  .volume-control {
    display: none
  }

  .cover-container {
    display: none
  }
}

/* ---- Barra de progreso ---- */
.progress-section {
  width: 100%;
  padding: 0 .5rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  position: relative;
  z-index: 10
}

.progress-bar-wrap {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, .12);
  border-radius: 10px;
  overflow: hidden
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--primary-color);
  border-radius: 10px;
  transition: width .8s linear;
  box-shadow: 0 0 6px var(--primary-color)
}

.progress-times {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--text-dim);
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums
}

/* ---- Proxima cancion ---- */
.next-track {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  position: relative;
  z-index: 10;
  backdrop-filter: blur(4px)
}

.next-label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: .8px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .35rem;
  opacity: .9
}

.next-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem
}

.next-title {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.next-artist {
  font-size: .72rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

@media (max-height:350px) {

  .progress-section,
  .next-track {
    display: none !important
  }
}