.player-section {
  display:flex;
  justify-content:center;
  margin-top:20px;
  margin-bottom:40px;
}

.player-container {
  position:relative;
  width:500px;   /* ahora doble de ancho */
  height:500px;
  border:3px solid #ff6600; /* marco naranja */
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
}

/* Imagen de fondo */
.player-bg {
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

/* Canvas Matrix */
#matrixCanvas {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  z-index:2;
}



/* Contenido reproductor */
.player-content {
  position:relative;
  z-index:4;
  width:90%;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:10px;
}

/* Nombre de la pista */
#now-playing {
  color:#ff6600;
  font-weight:bold;
  margin-bottom:10px;
  text-align:center;
}

/* Controles */
.controls {
  display:flex;
  justify-content:center;
  gap:15px;
  margin-bottom:10px;
}

.controls .btn {
  font-size:20px;
  padding:12px 16px;
  border-radius:50%;          /* botones redondeados */
  border:2px solid #fff;      /* contorno blanco */
  cursor:pointer;
  background: rgba(0,0,0,0.6);/* fondo negro translúcido */
  color:#ff6600;
  transition: all 0.2s ease, box-shadow 0.3s ease;
}

.controls .btn:hover {
  background: rgba(0,0,0,0.8);
}

.controls .btn:active {
  box-shadow: 0 0 15px #ff6600; /* brillo al presionar */
  transform: scale(0.95);
}

/* Barra de progreso y tiempo */
.progress-wrapper {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}

.progress-container {
  flex:1;
  height:6px;
  background: rgba(255,255,255,0.2);
  border-radius:3px;
  overflow:hidden;
}

#progress {
  width:0%;
  height:100%;
  background:#ff6600;
  border-radius:3px;
}

.time-display {
  font-size:12px;
  color:#fff;
  width:65px;
  text-align:right;
}

/* Ajustes móviles */
@media screen and (max-width:600px){
  .player-container { width:95%; height:400px; }
  .controls .btn { font-size:18px; padding:10px; }
  .time-display { font-size:10px; width:50px; }
}