.turntable {
  position: absolute;
  width: 27vw;
  height: 27vw;
  top: 15vw;
  left: 56vw;
  z-index: 1;
}

.turntable_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0s linear;
  transform-origin: center center;
  z-index: 1;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .3));
}

.turntable_play {
  position: absolute;
  width: 24%;
  height: 29.2%;
  top: 33%;
  left: 38%;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease;
  animation: turntable_play_shine_effect 2s ease-in-out infinite;
}

.turntable_play:hover {
  transform: scale(1.1);
}

.turntable_play:active {
  transform: scale(0.9);
}

/* 轉盤旋轉動畫 */
.turntable_spinning {
  animation: turntable_spin linear;
}

@keyframes turntable_spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 閃光效果動畫關鍵幀 - 純亮度變化 */
@keyframes turntable_play_shine_effect {
  0% {
    filter: brightness(1);
  }

  15% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.4);
  }

  85% {
    filter: brightness(1);
  }

  100% {
    filter: brightness(1);
  }
}

/* 停止閃光效果的類 */
.turntable_play_no_glow {
  animation: none !important;
  filter: none !important;
}

/* 轉盤成功完成後的狀態 */
.turntable_play_completed {
  animation: none !important;
  filter: none !important;
  cursor: default;
}

/* 每日限制已達狀態 */
.turntable_play_daily_limit {
  animation: none !important;
  filter: grayscale(100%) !important;
  cursor: not-allowed !important;
}

.turntable_play_daily_limit:hover {
  transform: none !important;
  cursor: no-drop;
}

/* 按鈕鎖定狀態樣式 */
.turntable_play_locked {
  animation: none !important;
  filter: brightness(0.6) saturate(0.5) !important;
  cursor: not-allowed !important;
  pointer-events: none;
  opacity: 0.7;
  transform: none !important;
}

.turntable_play_locked:hover {
  transform: none !important;
  cursor: no-drop;
}

/* 按鈕處理中狀態樣式 */
.turntable_play_processing {
  animation: turntable_processing_pulse 1.5s ease-in-out infinite !important;
  cursor: wait !important;
  pointer-events: none;
  transform: none !important;
}

.turntable_play_processing:hover {
  transform: none !important;
  cursor: no-drop;
}

/* 處理中脈衝動畫 */
@keyframes turntable_processing_pulse {
  0% {
    filter: brightness(0.8) saturate(0.8);
    opacity: 0.8;
  }

  50% {
    filter: brightness(1.1) saturate(1.1);
    opacity: 1;
  }

  100% {
    filter: brightness(0.8) saturate(0.8);
    opacity: 0.8;
  }
}

/* 響應式設計 */
@media screen and (max-width: 768px) {
  .turntable {
    width: 80vw;
    height: 80vw;
    top: 46vw;
    left: 9vw;
  }
}