/* 1. KHUNG CHÍNH (THÂN MÁY - mặt ngoài) */
.turntable {
  position: relative;
  overflow: visible;
  width: 130px;
  height: 130px;
  /* Nhựa đen mờ với ánh sáng viền nhẹ */
  background: radial-gradient(circle at 30% 30%, #111 0%, #000 90%);
  box-shadow:
    inset 0 1px 4px rgba(255,255,255,0.05), /* phản sáng nhẹ ở viền */
    0 4px 10px rgba(0,0,0,0.8); /* bóng đổ tổng thể */
}

/* 2. BASE (lớp trong thân) */
.turntable-base {
  position: absolute;
  inset: 3px;
  /* hiệu ứng nhựa sâu hơn ở giữa */
  background: radial-gradient(circle at 50% 50%, #050505 0%, #000 80%);
  border-radius: 0;
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.05), /* ánh sáng mềm nhẹ */
    inset 0 -3px 8px rgba(0,0,0,0.8); /* chiều sâu */
  z-index: 1;
}

/* 3. 🟢 MÂM (PLATTER - chỗ đặt đĩa) */
.turntable-platter {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Đen nhám - nhựa ABS */
  background: radial-gradient(circle at 50% 60%, #080808 0%, #000 85%);
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,0.08), /* phản sáng nhẹ ở viền */
    inset 0 -3px 6px rgba(0,0,0,0.9); /* bóng lõm */
  z-index: 2;
}

/* 4. 💿 ĐĨA NHẠC (giữ nguyên) */
.disc-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 108px;
  height: 108px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  z-index: 3;
  box-shadow: 0 0 8px rgba(0,0,0,0.7);
}

#music-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  animation: spin 4s linear infinite;
  border: 1px solid #000;
}

/* 5. 🎯 NHÃN MỜ */
.disc-label-blur {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45px;
  height: 45px;
  background-color: rgba(255,255,255,0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
  z-index: 4;
}

/* 6. 🕳 LỖ GIỮA */
.disc-hole {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #444 0%, #222 40%, #000 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}


/* 💿 ĐĨA NHẠC */
#music-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #000;
  animation: spin 4s linear infinite paused; /* mặc định ngừng */
}

/* Khi phát nhạc thì quay */
.turntable.playing #music-disc {
  animation-play-state: running;
}

/* Animation quay đĩa */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}