/* 工作台(index) 浮動 3D 贏仔：固定於右上，不擋操作 */
#wlMascotDock{
  position:fixed;
  top:82px;
  right:14px;
  width:104px;
  height:134px;
  z-index:9999;             /* 拉到最上層，避免被工作台元件蓋住 */
  pointer-events:none;     /* 容器本身不攔事件 */
  opacity:.97;
}
/* 只有畫布收事件：hover 判定與拖曳才會生效，也不會擴大擋住底下的操作區 */
#wlMascotDock canvas{display:block;width:100%!important;height:100%!important;pointer-events:auto;cursor:grab}
#wlMascotDock canvas:active{cursor:grabbing}

/* 掛載點作為佔位的定位基準 */
[data-wl-mascot]{position:relative}

/* ---- 載入佔位：呼吸光暈，讓公仔區域第一時間就有東西，不再空白等待 ---- */
.wl-mascot-ph{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transition:opacity .4s ease;
}
.wl-mascot-ph.is-gone{opacity:0}
.wl-ph-glow{
  position:absolute;
  width:78%;
  height:74%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 46%, rgba(240,199,94,.34), rgba(240,199,94,0) 70%);
  animation:wlPhBreath 2.6s ease-in-out infinite;
}
.wl-ph-body{
  position:relative;
  width:36%;
  height:44%;
  border-radius:46% 46% 40% 40%;
  background:linear-gradient(180deg,#2A4A7A,#16294A);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  animation:wlPhBob 2.6s ease-in-out infinite;
}
@keyframes wlPhBreath{0%,100%{transform:scale(.92);opacity:.55}50%{transform:scale(1.06);opacity:.9}}
@keyframes wlPhBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---- 尊重系統「減少動效」設定：佔位不再呼吸 ---- */
@media (prefers-reduced-motion: reduce){
  .wl-ph-glow,.wl-ph-body{animation:none}
  .wl-ph-glow{opacity:.7}
}

/* ---- 終極兜底：3D 都失敗時顯示的靜態公仔（保證看得到公仔圖片）---- */
.wl-mascot-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.wl-mascot-fallback svg{width:62%;height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}

/* ---- 摸摸頭回饋：點一下從公仔頭頂冒出一顆愛心並飄上去 ---- */
.wl-mascot-heart{
  position:absolute;
  left:52%; top:16%;
  transform:translate(-50%,0);
  font-size:22px; line-height:1;
  color:#ff5d73;
  pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.25);
  animation:wlHeartUp 1s ease-out forwards;
}
@keyframes wlHeartUp{
  0%{opacity:0;transform:translate(-50%,8px) scale(.5)}
  22%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-36px) scale(1.15)}
}
@media (prefers-reduced-motion: reduce){ .wl-mascot-heart{animation:none;opacity:.9} }

/* ---- 摸到身體回饋：冒一顆亮片 ✨ ---- */
.wl-mascot-spark{
  position:absolute;
  left:50%; top:20%;
  transform:translate(-50%,0);
  font-size:18px; line-height:1;
  color:#FFD76A;
  pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.25);
  animation:wlSparkUp 1s ease-out forwards;
}
@keyframes wlSparkUp{
  0%{opacity:0;transform:translate(-50%,6px) scale(.5)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-30px) scale(1.15)}
}
@media (prefers-reduced-motion: reduce){ .wl-mascot-spark{animation:none;opacity:.9} }