/* KHÔNG ĐỔI CÁC PHẦN CÒN LẠI (chúng sẽ tự động bị thu nhỏ theo unit cha) */
.arm-base {
  width: 40px;
  height: 40px;
  background: black;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
}
.arm-base::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: lightgray;
  border-radius: 50%;
  top: 26px;
  left: 28px;
}

.pivot-base {
  width: 20px;
  height: 20px;
  background: lightgray; /* <--- ĐÃ ĐỔI THÀNH LIGHTGRAY */
  border-radius: 50%;
  position: absolute;
  left: 10px;
  top: 9px;
}

.pivot-mech {
  width: 7px;
  height: 20px;
  background: white; /* <--- ĐÃ ĐỔI THÀNH WHITE */
  border-radius: 8px;
  position: absolute;
  left: 20px;
  top: 4px;
  transform: rotate(-44deg);
  transform-origin: bottom left;
}

/* Phần đối trọng đã bị loại bỏ theo yêu cầu trước */

.tone-arm {
  width: 7px;
  height: 120px;
  background: white; /* <--- ĐÃ ĐỔI THÀNH WHITE */
  border-radius: 0 0 2px 0;
  position: absolute;
  left: 16px;
  top: 28px;
}
.tone-arm::before {
  content: "";
  width: 7px;
  height: 30px;
  background: white; /* <--- ĐÃ ĐỔI THÀNH WHITE */
  border-radius: 0 5px 0 0;
  position: absolute;
  left: 3px;
  top: 116px;
  transform: rotate(38deg);
  transform-origin: top;
}

.headshell {
  width: 10px;
  height: 20px;
  background: black; /* Giữ đầu kim màu đen để tạo độ tương phản và thực tế */
  border-radius: 10px 10px 8px 8px;
  position: absolute;
  left: -13px;
  top: 160px;
  transform: rotate(44deg);
  transform-origin: bottom;
}




.arm-base {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;

  /* 💡 Hiệu ứng nhựa phẳng, sáng trên, tối dưới */
  background: linear-gradient(
    to bottom,
    #222 0%,   /* sáng nhẹ trên */
    #000 60%,  /* đen sâu giữa */
    #000 100%  /* đều màu phía dưới */
  );

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.3), /* ánh sáng mảnh ở viền trên */
    0 2px 4px rgba(0,0,0,0.6);             /* bóng ngoài nhẹ */
}








.headshell {
  width: 10px;
  height: 20px;
  background: black;
  border-radius: 10px 10px 8px 8px;
  position: absolute;
  left: -13px;
  top: 160px;
  transform: rotate(44deg);
  transform-origin: bottom;
}

/* 💡 LED nháy cam */
.headshell::after {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  left: 2px;
  top: 15px;
  border-radius: 50%;
  background: #000;
  animation: headshell-light 10s linear infinite;
}

/* ⚡ LED bật/tắt ngay lập tức */
@keyframes headshell-light {
  0%, 19%, 25%, 35%, 55%, 65%, 75%, 81%, 84%, 86%, 88%, 91%, 100% {
    background: #000;          /* tắt: đen hoàn toàn */
    box-shadow: none;          /* không ánh sáng */
    transform: scale(1);
  }

  20%, 24%, 30%, 34%, 40%, 64%, 70%, 74%, 80%, 83%, 85%, 87%, 90% {
    background: #f99f3e;       /* sáng cam */
    box-shadow: 0 0 6px 2px rgba(249,159,62,0.8);
    transform: scale(1.1);
  }
}



.tonearm-unit {
  position: absolute;
  width: 40px;
  height: 40px;
  
  /* ĐIỀU CHỈNH VỊ TRÍ TỔNG THỂ (chia đôi so với code gốc) */
  right: -9px;
  top: -9px;


  transform-origin: center;
  /* 🔥 ÁP DỤNG THU NHỎ 50% VÀ ĐẶT VỊ TRÍ BAN ĐẦU */
  transform: rotate(-8deg) scale(0.5); 
  
  z-index: 6;
  transition: transform 0.6s ease;
}

/* 💿 Xoay khi phát / dừng (Giữ nguyên scale 0.5) */
.tonearm-unit.playing { transform: rotate(11deg) scale(0.5); }
.tonearm-unit.paused { transform: rotate(-6deg) scale(0.5); }