.scene {
  width: 500px;
  height: 280px;
  perspective: 1000px;
  margin: 50px auto;
}

.cube {
  width: 500px;
  height: 280px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(-45deg);
  animation: spin 10s infinite linear;
}

.cube.paused {
  animation-play-state: paused;
}

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

.cover {
  width: 280px;
  height: 280px;
  transform: rotateY(90deg) translateZ(360px);
}

.cover-wrapper {
  width: 100%;
  height: 100%;
}

.main-cover {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.face {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /*border: 2px solid #333;*/
}

/* Front & Back: 500x280 */
.front, .back {
  width: 500px;
  height: 280px;
}
.front  { transform: rotateY(0deg) translateZ(140px); }
.back   { transform: rotateY(180deg) translateZ(140px); }

/* Left & Right: cuadradas 280x280 */
.left, .right {
  width: 280px;
  height: 280px;
}
.left  { transform: rotateY(-90deg) translateX(0) translateZ(140px); }
.right { transform: rotateY(90deg) translateZ(360px);
}

/* Top & Bottom: 500x280 */
.top, .bottom {
  width: 500px;
  height: 280px;
  background: transparent;
  border: none;
}
.top    { transform: rotateX(90deg) translateY(0) translateZ(140px) translateX(0); }
.bottom { transform: rotateX(-90deg) translateY(140px); }

/* Media inside faces */
.face video, .face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes spin {
  from { transform: rotateX(-30deg) rotateY(-45deg); }
  to   { transform: rotateX(-30deg) rotateY(315deg); }
}

.cube.paused {
  animation-play-state: paused;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  BOTONERA  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.block-controls {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

/* Base para todos los botones */
.btn-play,
.btn-rwd,
.btn-fwd {
  border-radius: 50%;
  background: linear-gradient(to bottom, #1a1a1a, #333);
  color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
  position: relative;
}

.btn-play:hover,
.btn-rwd:hover,
.btn-fwd:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px #3688ff;
}

/* Botón Rewind */
.btn-rwd {
    bottom: 10px;
  width: 55px;
  height: 55px;
  font-size: 1.2em;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(54, 136, 255, 0.3);
  font-size: 1.0em;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.btn-rwd:active {
  transform: scale(1.2);
}

.btn-rwd i.animate-spin {
  animation: spinOnceReverse 0.6s ease-out;
}

/* Botón Play */
.btn-play {
    left: 6px;
  width: 70px;
  height: 70px;
  font-size: 1.2em;
  background: linear-gradient(to right,
  #80b3ff 0%,     /* tono claro */
  #3688ff 50%,    /* tono medio (principal) */
  #0044cc 100%    /* tono profundo */
);
box-shadow:
  inset 0 0 6px rgba(255, 255, 255, 0.2),
  0 0 10px rgba(128, 179, 255, 0.8),   /* reemplazo de #ff80b3 */
  0 0 20px rgba(54, 136, 255, 0.4);    /* reemplazo de #ff4081 */
  border: 2px solid rgba(255,255,255,0.1);
  animation: bounceIn 0.6s ease;
}

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

/* Botón Música */
.btn-music {
  width: 55px;
  height: 55px;
  font-size: 1.2em;
  border-radius: 50%;
  background: linear-gradient(to bottom, #1a1a1a, #333);
  color: #fff;
  box-shadow: 0 0 6px rgba(54, 136, 255, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.3s ease;
}

.btn-music:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px #3688ff;
}

.btn-music:active {
  transform: scale(1.2);
}

/* Botón Forward */
.btn-fwd {
    top: 10px;
  width: 55px;
  height: 55px;
  font-size: 1.2em;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(54, 136, 255, 0.3);
  font-size: 1.0em;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.btn-fwd:active {
  transform: scale(1.2);
}

.btn-fwd i.animate-spin {
  animation: spinOnceForward 0.6s ease-out;
}

/* Animaciones simbólicas */
@keyframes spinOnceReverse {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes spinOnceForward {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(.9, .9, .9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(.97, .97, .97);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  METADATA  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.face.top {
  position: relative;
}
/* Información de la pista */
.track-info {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  height: 26px;
  color: #fff;
  box-shadow: 0 0 30px rgba(54, 136, 255, 0.9);
  font-size: 18px;
  text-align: center;
  overflow: hidden;
  z-index: 2;
}

.scrolling {
  width: 100%;
  overflow: hidden;
}

.meta {
  display: inline-block;
  white-space: nowrap;
  font-family: 'Reem Kufi', sans-serif;
  text-transform: uppercase;
  color: #fff;
  font-size: 1em;
  padding-left: 10px; /* ← Opcional para evitar que empiece pegado al borde */
}

.meta.animated {
  animation: scroll-left 12s linear infinite;
}

.meta.animated:hover {
  animation-play-state: paused;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Título de la estación */
.station {
  max-width: 600px;
  font-size: 24px;
  color: #FFFFFF;
  text-align: center;
  position: absolute;
  left: 138px;
  bottom: 495px;
  width: 320px;
  height: 43px;
  z-index: 8;
  font-family: 'Reem Kufi', sans-serif;
}

.track,
.artist {
  font-size: 1em;
  font-weight: 400;
  color: #3688ff;
    box-shadow: 0 0 30px rgba(54, 136, 255, 0.9);
  text-transform: uppercase;
  font-family: 'Reem Kufi', sans-serif;
}

/* Animaciones */
#animation {
  position: absolute;
  top: 90px;
  left: 150px;
  height: 93px;
  width: 369px;
  z-index: 999;
}

.effects {
  top: 320px;     /* ← Ajusta verticalmente según tu layout */
  left: 160px;    /* ← Ajusta horizontalmente para centrar */
  z-index: 999;   /* ← Muy por encima del reproductor */
}