.t180-hotspot{
  position:absolute;
  transform:translate(-50%,-50%);
  border:3px solid #e53935;
  border-radius:50%;
  background:rgba(229,57,53,0.12);
  cursor:pointer;
  box-sizing:border-box;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.t180-hotspot.playing{
  animation:t180-pulse .6s infinite;
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
}

/* EQ 播放時：不使用紅框脈動（只顯示 EQ 直條動畫） */
.t180-hotspot.eq-playing{
  animation: none !important;
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
}

/* 額外動作（沿用 v2.4.xx 手感：播放時才動） */
.t180-hotspot.playing.t180-anim-bounce{ animation: t180-pulse .6s infinite, t180-bounce .9s ease-in-out infinite; }
.t180-hotspot.playing.t180-anim-shake{  animation: t180-pulse .6s infinite, t180-shake .5s ease-in-out infinite; }
.t180-hotspot.playing.t180-anim-circle{ animation: t180-pulse .6s infinite, t180-circle 1.4s linear infinite; }
.t180-hotspot.playing.t180-anim-music{  animation: t180-pulse .6s infinite; }

@keyframes t180-pulse{
  0%{box-shadow:0 0 6px rgba(229,57,53,0.6);}
  50%{box-shadow:0 0 16px rgba(229,57,53,0.9);}
  100%{box-shadow:0 0 6px rgba(229,57,53,0.6);}
}

@keyframes t180-bounce{
  0%,100%{transform:translate(-50%,-50%) translateY(0);}
  50%{transform:translate(-50%,-50%) translateY(-10px);}
}
@keyframes t180-shake{
  0%,100%{transform:translate(-50%,-50%) translateX(0);}
  25%{transform:translate(-50%,-50%) translateX(-10px);}
  75%{transform:translate(-50%,-50%) translateX(10px);}
}
@keyframes t180-circle{
  0%{transform:translate(-50%,-50%) translate(0,-10px);}
  25%{transform:translate(-50%,-50%) translate(10px,0);}
  50%{transform:translate(-50%,-50%) translate(0,10px);}
  75%{transform:translate(-50%,-50%) translate(-10px,0);}
  100%{transform:translate(-50%,-50%) translate(0,-10px);}
}

/* 前台熱點 & 圖層容器 */
.t180-hotspot-layer{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  /* 讓點擊落到圖片本身（可用點圖片切換顯示/隱藏），熱點本身再單獨接收點擊 */
  pointer-events:none;

  z-index:9999;
}
.t180-hotspot-layer .t180-hotspot{
  pointer-events:auto;
}

.t180-layer-container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:auto;

  position:absolute;
  top:0;left:0;width:100%;height:100%;z-index:9998;pointer-events:auto;
}

/* 圖層 PNG：預設顯示（跟著主圖對齊），不吃點擊 */
.t180-layer-png{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  object-fit:contain;
  /* 圖層只顯示不吃點擊，避免擋住點圖切換 */
  pointer-events:none;
  user-select:none;
}

/* 音樂播放動畫（musicbars thin7） */
.t180-music-bars{
  position:absolute;
  left:0;
  right:0;
  bottom:4px;
  height:44%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:2px;
  padding:2px 6px;
  box-sizing:border-box;
  opacity:0;
  pointer-events:auto;
}
.t180-hotspot.playing .t180-music-bars,
.t180-hotspot.eq-playing .t180-music-bars{ opacity:1; }

.t180-music-bar{
  flex:0 0 2px;
  border-radius:999px;
  background:var(--t180-eq-color, #4FC3F7);
  opacity:0.95;
  height:40%;
  transform-origin:bottom center;
}

/* wrapper RWD */
.t180-hotspot-wrapper{max-width:100%;}
.t180-hotspot-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px;}
.t180-hotspot-container{position:relative;display:inline-block;max-width:100%;}
.t180-hotspot-image{display:block;max-width:100%;height:auto;position:relative;z-index:1;}
@media (max-width: 600px){
  .t180-hotspot-controls .button{width:46%;}
}

/* EQ bars (real-time analyser, centered up/down) */
.t180-music-bars.t180-eq-bars{
  position:absolute;
  left:50%;
  bottom:8%;
  transform:translateX(-50%);
  display:flex;
  gap:3px;
  width:78%;
  height:72%;
  align-items:stretch;
  pointer-events:auto;
}
.t180-music-bars.t180-eq-bars .t180-music-bar{
  flex:1;
  position:relative;
  opacity:0.95;
}
.t180-music-bars.t180-eq-bars .t180-eq-fill{
  background:var(--t180-eq-color, #4FC3F7);
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  height:28%;
  border-radius:2px;
  opacity:0.95;
  transition:height 0.05s linear;
}

.t180-layer-container{pointer-events:none !important;}
.t180-music-bars{cursor:pointer;}


/* v2.5.18.2 safety: ensure layers are on top even under aggressive themes */
.t180-hotspot-container{position:relative !important;}

/* v2.5.18.3 safety: themes may force display:contents !important */
.t180-hotspot-container{display:inline-block !important;max-width:100% !important;}
.t180-hotspot-wrapper{display:block !important;}


/* Stable stage wrapper to match admin alignment & sizing */
.t180-stage{
  position:relative;
}
.t180-stage > img{
  display:block;
}
.t180-stage .t180-hotspot-layer,
.t180-stage .t180-layer-container{
  position:absolute;
  left:0; top:0;
}


/* v2.5.18.21 align hardening */
.t180-hotspot-container{
  display:flex !important;
  width:100% !important;
  max-width:100% !important;
  align-items:flex-start !important;
}
.t180-stage{
  flex:0 0 auto !important;
  margin-left:0 !important;
  margin-right:0 !important;
}