/* ===== 背景音乐 · 唱片机控件（左下角，work/about 深色 / now 浅色） ===== */
#bgm-tt {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 84px;
  height: 84px;
  cursor: pointer;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s ease;
}
#bgm-tt .tt__deck {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
  border-radius: 14px;
  background: linear-gradient(160deg, #1b1a20, #0c0b10);
  border: 1px solid rgba(139, 123, 168, 0.24);
  box-shadow: 0 10px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
}
#bgm-tt .tt__platter {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #27252e 0%, #131217 62%, #08070a 100%);
  box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(139,123,168,0.16), inset 0 1px 4px rgba(255,255,255,0.04);
  transition: box-shadow 0.5s ease;
}
#bgm-tt.playing .tt__platter {
  box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(139,123,168,0.24), 0 0 18px rgba(139,123,168,0.22), inset 0 1px 4px rgba(255,255,255,0.04);
}
#bgm-tt .tt__record {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,0.11), rgba(255,255,255,0) 42%),
    repeating-radial-gradient(circle at 50% 50%, #16151b 0 1.5px, #0b0a0e 1.5px 2.6px),
    radial-gradient(circle at 50% 50%, #18171d 0 62%, #0a090d 63%);
}
#bgm-tt .tt__record::after {
  content: '';
  position: absolute;
  top: 4%;
  left: 50%;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.32);
}
#bgm-tt .tt__label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(145deg, #a99ac4, #6d5d8f);
  color: #17151c;
  font-size: 8px;
  font-family: Georgia, "Times New Roman", serif;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* 唱臂 */
#bgm-tt .tt__arm {
  position: absolute;
  top: 11px;
  right: 9px;
  width: 34px;
  height: 3px;
  transform-origin: 100% 50%;
  transition: transform 0.7s cubic-bezier(0.23,1,0.32,1);
  z-index: 3;
}
#bgm-tt .tt__arm-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #d3ccde, #8f87a3 55%, #6c647f);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
#bgm-tt .tt__arm-bar::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 50%;
  width: 9px;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 2px 3px 3px 2px;
  background: linear-gradient(180deg, #bcb4cc, #6d657f);
}
#bgm-tt .tt__arm-pivot {
  position: absolute;
  right: -3px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b9b1ce, #4c4560 78%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(139,123,168,0.2);
  z-index: 4;
}
/* 未播放：臂抬起移开；播放：臂落下压在唱片上 */
#bgm-tt:not(.playing) .tt__arm { transform: rotate(18deg); }
#bgm-tt.playing .tt__arm { transform: rotate(-36deg); }

#bgm-tt.muted { opacity: 0.45; }

/* ===== 浅色版（now 页） ===== */
#bgm-tt.tt--light .tt__deck {
  background: linear-gradient(160deg, #f8f6fb, #e8e4f0);
  border-color: rgba(139, 123, 168, 0.35);
  box-shadow: 0 10px 24px rgba(40,35,60,0.18), inset 0 1px 0 rgba(255,255,255,0.85);
}
#bgm-tt.tt--light .tt__platter {
  background: radial-gradient(circle at 50% 42%, #f0edf5, #ddd8e6 62%, #cfc9da);
  box-shadow: 0 6px 16px rgba(40,35,60,0.16), 0 0 0 1px rgba(139,123,168,0.22), inset 0 1px 3px rgba(255,255,255,0.65);
}
#bgm-tt.tt--light.playing .tt__platter {
  box-shadow: 0 6px 16px rgba(40,35,60,0.16), 0 0 0 1px rgba(139,123,168,0.32), 0 0 18px rgba(139,123,168,0.32), inset 0 1px 3px rgba(255,255,255,0.65);
}
#bgm-tt.tt--light .tt__arm-bar {
  background: linear-gradient(180deg, #efeaf6, #b8b0c8 55%, #8f87a3);
  box-shadow: 0 1px 3px rgba(40,35,60,0.22);
}
#bgm-tt.tt--light .tt__arm-bar::after {
  background: linear-gradient(180deg, #d6cfdf, #9a91ad);
}
#bgm-tt.tt--light .tt__arm-pivot {
  background: radial-gradient(circle at 35% 30%, #d8d1e4, #8f87a3 78%);
  box-shadow: 0 1px 3px rgba(40,35,60,0.28), 0 0 0 1px rgba(139,123,168,0.28);
}

@media (max-width: 640px) {
  #bgm-tt { left: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #bgm-tt .tt__arm { transition: none; }
}

/* ===== 手机端待解锁提示：自动播放被拦截时呼吸光环（任意点按页面即响） ===== */
#bgm-tt.tt--waiting::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  border: 1.5px solid rgba(139, 123, 168, 0.6);
  animation: ttWaiting 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes ttWaiting {
  0% { transform: scale(0.96); opacity: 0.85; }
  100% { transform: scale(1.22); opacity: 0; }
}