/* 網頁版快速入口：放在首頁 hero 左上角那塊留白（大標題左上方）。
   角色是官網管理工具可設定的「網頁版遊戲」快速入口，
   圖是像素角色（image-rendering:pixelated 保持銳利），下面是說明標籤。
   連結由 site-config.js 的 webVersion 提供，可用官網管理工具修改。 */
/* 按鈕浮在 hero 上緣之外，所以 hero 不能裁切內容 */
.hero{overflow:visible}
.hero::after,.hero::before{pointer-events:none}
.web-version-button{
  --wv-char:clamp(120px,8.2vw,140px);
  position:absolute;
  left:clamp(200px,24.5vw,416px);
  top:clamp(-176px,-19.4vh,-148px);
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:max-content;
  text-decoration:none;
  outline:none;
  filter:drop-shadow(0 6px 14px rgba(3,12,24,.5));
  animation:wv-float 3.6s ease-in-out infinite;
  transition:transform .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.web-version-button[hidden]{display:none!important}
/* 後台開關關閉時，連上方讓出的留白也一起收掉，版面回到原本的樣子 */
html:not(.web-version-on) .hero .hero-copy{padding-top:72px}

/* 像素角色本體 */
.wv-art{
  position:relative;
  display:block;
  width:var(--wv-char);
  filter:drop-shadow(0 10px 16px rgba(3,12,24,.55));
  transition:filter .3s ease;
}
.wv-anim{
  display:block;
  width:100%;
  height:auto;
  image-rendering:pixelated;
}

/* 說明標籤 */
.wv-bubble{
  position:relative;
  width:max-content;
  max-width:44vw;
  margin-top:10px;
  padding:10px 16px 11px;
  border-radius:13px;
  background:linear-gradient(165deg,#fffdf7 0%,#fff4dc 60%,#ffe9c4 100%);
  border:1px solid rgba(233,180,92,.95);
  box-shadow:0 10px 20px rgba(3,12,24,.45),inset 0 1px 0 rgba(255,255,255,.9);
  text-align:center;
}
.wv-bubble::after{
  content:"";
  position:absolute;
  left:50%;
  top:-7px;
  width:13px;
  height:13px;
  margin-left:-6.5px;
  border-radius:3px;
  transform:rotate(45deg);
  background:#fffbef;
  border-left:1px solid rgba(233,180,92,.95);
  border-top:1px solid rgba(233,180,92,.95);
}
.wv-say{
  display:block;
  font-size:clamp(14px,1.15vw,17px);
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.4;
  color:#2b1c07;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}
.wv-say span{display:block;white-space:nowrap}

.web-version-button:hover,.web-version-button:focus-visible{
  transform:translateY(-6px) scale(1.06);
  animation-play-state:paused;
}
.web-version-button:hover .wv-art,.web-version-button:focus-visible .wv-art{
  filter:drop-shadow(0 12px 20px rgba(3,12,24,.6)) drop-shadow(0 0 18px rgba(244,200,107,.7));
}
.web-version-button:active{transform:translateY(-1px) scale(1.0)}
@keyframes wv-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

@media(max-width:1180px){
  .web-version-button{--wv-char:clamp(104px,9.4vw,128px);left:clamp(220px,26vw,396px)}
  .wv-bubble{max-width:40vw}
}
@media(min-width:821px){
  /* 讓出 hero 左上角這塊留白給網頁版入口按鈕（手機版不需要）。
     features.css 用 .hero .hero-copy 指定內距，這裡要用同等權重才蓋得過。 */
  .hero .hero-copy{padding-top:186px}
}
@media(max-width:820px){
  /* 手機版：縮小放在 hero 下方的空位並置中，不壓到文案與輪播 */
  .web-version-button{
    --wv-char:clamp(58px,15vw,78px);
    left:50%;
    right:auto;
    top:auto;
    bottom:clamp(74px,10vh,104px);
    transform:translateX(-50%);
  }
  .web-version-button:hover,.web-version-button:focus-visible{
    transform:translateX(-50%) translateY(-6px) scale(1.05);
  }
  .wv-bubble{max-width:64vw}
  @keyframes wv-float-mobile{
    0%,100%{transform:translateX(-50%) translateY(0)}
    50%{transform:translateX(-50%) translateY(-7px)}
  }
  .web-version-button{animation-name:wv-float-mobile}
}
@media(prefers-reduced-motion:reduce){
  .web-version-button{animation:none}
}