/* ShootingX 訪客官網：手感層樣式（只有首頁載入；程式在 js/feel.js。Tina 2026-11-12 定：找回參考網站的互動手感，維持靶場實戰風格） */

/* ---------- 準星游標：系統游標藏起來，文字輸入框照舊 ---------- */
html.sx-cur, html.sx-cur *{cursor:none!important}
html.sx-cur input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]), html.sx-cur textarea, html.sx-cur select, html.sx-cur [contenteditable="true"]{cursor:auto!important}

/* 掛在最外層（不跟著整頁縮放），所以顏色直接寫：米白 #ece6d8、紅 #d11f26，跟官網同色 */
#sxcur{position:fixed;left:0;top:0;width:0;height:0;z-index:2147483000;pointer-events:none;opacity:0;transition:opacity .15s}
#sxcur.show{opacity:1}
#sxcur.native{opacity:0}
#sxcur .sxc-xh, #sxcur .sxc-fr{position:absolute;left:0;top:0;will-change:transform}

/* 中心準星：十字四段＋中間留空＋紅點。米白線加一圈深色邊，亮的畫面上也看得到 */
#sxcur .sxc-k{position:absolute;left:0;top:0;width:0;height:0;filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000)}
#sxcur .sxc-k i{position:absolute;background:#ece6d8;transition:opacity .15s}
#sxcur .sxc-k i:nth-child(1){left:-1px;top:-13px;width:2px;height:8px}
#sxcur .sxc-k i:nth-child(2){left:-1px;top:5px;width:2px;height:8px}
#sxcur .sxc-k i:nth-child(3){left:-13px;top:-1px;width:8px;height:2px}
#sxcur .sxc-k i:nth-child(4){left:5px;top:-1px;width:8px;height:2px}
#sxcur .sxc-k b{position:absolute;left:-2px;top:-2px;width:4px;height:4px;background:#d11f26}
/* 鎖定在按鈕上：十字變淡，不壓住按鈕上的字；紅色主按鈕上紅點改白點 */
#sxcur.wrap .sxc-k i{opacity:.3}
#sxcur.red .sxc-k b{background:#fff}
/* 開槍：準星往上跳一下再回來，中心點閃一下 */
#sxcur .sxc-k.fire{animation:sxKick .16s cubic-bezier(.48,.08,0,1)}
#sxcur .sxc-k.fire b{animation:sxFlash .16s ease-out}
@keyframes sxKick{0%{transform:none}25%{transform:translateY(-6px) rotate(-3deg)}100%{transform:none}}
@keyframes sxFlash{0%{transform:scale(2.2);background:#fff}100%{transform:none}}

/* 外框四角：跟在後面，移到能按的東西上就鎖定（主要按鈕變紅，其他維持米白）。加深色邊，米色、天空這類亮底上也看得到 */
#sxcur .sxc-fr{width:34px;height:34px;filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000)}
#sxcur .sxc-fr i{position:absolute;width:8px;height:8px;border:0 solid rgba(236,230,216,.7);transition:border-color .2s,width .2s,height .2s}
#sxcur .sxc-fr i:nth-child(1){left:0;top:0;border-left-width:2px;border-top-width:2px}
#sxcur .sxc-fr i:nth-child(2){right:0;top:0;border-right-width:2px;border-top-width:2px}
#sxcur .sxc-fr i:nth-child(3){left:0;bottom:0;border-left-width:2px;border-bottom-width:2px}
#sxcur .sxc-fr i:nth-child(4){right:0;bottom:0;border-right-width:2px;border-bottom-width:2px}
#sxcur.lock .sxc-fr i{border-color:#ece6d8}
#sxcur.red .sxc-fr i{border-color:#d11f26}
#sxcur.wrap .sxc-fr i{width:12px;height:12px}

/* 預告片播放器開著：換回系統游標（影片控制列要點得準），準星藏起來 */
body.tmodal-on ~ #sxcur{display:none}
html.sx-cur body.tmodal-on *{cursor:auto!important}
html.sx-cur body.tmodal-on .tmodal button, html.sx-cur body.tmodal-on .tmodal a{cursor:pointer!important}

/* 按鈕按下去沉一下（0.98、0.09 秒），放開 0.18 秒彈回；放開才觸發，跟原本一樣 */
.btn{transition:scale .18s cubic-bezier(.2,0,0,1)}
.btn:active{scale:.98;transition-duration:.09s}

/* ---------- 瞄準鏡進場（程式在 feel.js 第 3 段） ---------- */
/* 不用模糊：實測模糊會讓第一次進場卡住；只動透明度、縮放 */
.sx-go{transition:opacity .8s cubic-bezier(.2,0,0,1) var(--sxd,0ms),scale .8s cubic-bezier(.2,0,0,1) var(--sxd,0ms)}
.sx-pre.sx-dim{opacity:.4;scale:1.05}   /* 小圖（右側大槍、靶紙）：在深色底上淡＝暗 */
.sx-pre.sx-zoom{scale:1.03}
.sx-veil{position:absolute;inset:0;pointer-events:none;background:#0d0c0a;opacity:.6;transition:opacity .8s cubic-bezier(.2,0,0,1) var(--sxd,0ms)}
.sx-in > .sx-veil{opacity:0}
/* 四角刻度：從外面 34 收到區塊外 10 停住，停一下再淡出 */
#mrow{position:relative}
.sx-br{position:absolute;inset:-34px;z-index:3;pointer-events:none;opacity:0}
.sx-br i{position:absolute;width:14px;height:14px;border:0 solid rgba(236,230,216,.85)}
.sx-br i:nth-child(1){left:0;top:0;border-left-width:2px;border-top-width:2px}
.sx-br i:nth-child(2){right:0;top:0;border-right-width:2px;border-top-width:2px}
.sx-br i:nth-child(3){left:0;bottom:0;border-left-width:2px;border-bottom-width:2px}
.sx-br i:nth-child(4){right:0;bottom:0;border-right-width:2px;border-bottom-width:2px}
.sx-in > .sx-br{animation:sxBr 1.1s linear var(--sxd,0ms) forwards}
@keyframes sxBr{
  0%{inset:-34px;opacity:0}
  14%{inset:-34px;opacity:1;animation-timing-function:cubic-bezier(.2,0,0,1)}
  32%{inset:-10px;opacity:1}
  75%{inset:-10px;opacity:1}
  100%{inset:-10px;opacity:0}
}

@media (prefers-reduced-motion: reduce){
  #sxcur{transition:none}
  #sxcur .sxc-k.fire, #sxcur .sxc-k.fire b{animation:none}
  .btn, .btn:active{transition:none;scale:none}
}