/* GODHAND X — 2077 主題（D2）
   放在 #root 之後載入，才能蓋過 bundle 內建的 <style>。
   色票：底 #0b0d10 / 面板 #14171b / 線 #2a2c2f / 字 #e9e4d4 / 次字 #bdb8a6
         黃 #e0cb2a（主色）/ 青 #3ef2ff（連結、焦點）/ 紅 #ff2e4d（警示、括號角） */

:root{--y:#e0cb2a;--c:#3ef2ff;--r:#ff2e4d;--bg:#0b0d10;--panel:#14171b;--line:#2a2c2f;--txt:#e9e4d4;--sub:#bdb8a6;
  --ease:cubic-bezier(.2,.8,.2,1)}

/* ---- 底：掃描線＋細格，取代藍色網格與透視地板 ---- */
body{
  font-family:'Noto Sans TC',-apple-system,'PingFang TC','Microsoft JhengHei',sans-serif !important;
  background-color:var(--bg) !important;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px),
    linear-gradient(90deg,rgba(62,242,255,.03) 1px,transparent 1px) !important;
  background-size:auto,64px 64px !important;
}
.gx-fx .floor{display:none}
.gx-fx .vig{background:radial-gradient(ellipse at 50% 30%,transparent 55%,rgba(0,0,0,.6) 100%)}
::selection{background:rgba(224,203,42,.35);color:#fff}

/* 數字、代號、英文標籤 */
.gx-sec,.gx-tab,.gx-cta{font-family:'Rajdhani','Noto Sans TC',sans-serif}

/* ---- 區段標題：黃色斜切標籤 ---- */
.gx-sec{color:var(--y) !important;text-shadow:none !important;font-size:14px !important;letter-spacing:3px !important}
.gx-sec::before{content:"" !important;width:10px;height:10px;background:var(--y);
  clip-path:polygon(0 0,100% 0,100% 100%,30% 100%,0 70%)}
.gx-sec::after{background:linear-gradient(90deg,var(--line),transparent) !important}

/* ---- 導覽分頁 ---- */
.gx-tab{position:relative;color:var(--sub);border:0 !important;transition:color .18s,background .18s,transform .18s var(--ease)}
.gx-tab::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;
  background:linear-gradient(90deg,var(--y),var(--c));transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.gx-tab:hover{color:var(--y) !important}
.gx-tab:hover::after,.gx-tab:focus-visible::after{transform:scaleX(1)}
.gx-tab:active{transform:translateY(1px)}
.gx-tab.on{background:var(--y) !important;color:var(--bg) !important;font-weight:800;text-shadow:none !important;
  animation:cy-boot .35s steps(4) 1}
.gx-tab.on::after{display:none}
@keyframes cy-boot{0%{clip-path:polygon(0 0,0 0,0 100%,0 100%);filter:brightness(2)}
  50%{clip-path:polygon(0 0,60% 0,60% 100%,0 100%)}100%{filter:none}}

/* ---- 按鈕：掃光＋紅青錯位抖動＋右下角閃爍方塊；按下會沉 ---- */
button,.gx-cta{position:relative;overflow:hidden;cursor:pointer;
  transition:transform .18s var(--ease),filter .18s,box-shadow .25s,color .18s}
.gx-cta{box-shadow:none !important;text-shadow:none !important}
button::after,.gx-cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);opacity:0}
button:hover::after,.gx-cta:hover::after{animation:cy-sweep .55s ease-out}
@keyframes cy-sweep{0%{left:-60%;opacity:1}100%{left:130%;opacity:0}}
button:hover,.gx-cta:hover{animation:cy-jit .3s steps(3) 1;filter:brightness(1.12)}
.gx-cta:hover{box-shadow:inset 0 0 22px -6px currentColor !important}
@keyframes cy-jit{0%{transform:translate(0);text-shadow:none}
  33%{transform:translate(-2px,1px);text-shadow:-2px 0 var(--r),2px 0 var(--c)}
  66%{transform:translate(2px,-1px);text-shadow:2px 0 var(--r),-2px 0 var(--c)}
  100%{transform:translate(0);text-shadow:none}}
button:active,.gx-cta:active{transform:translateY(2px) scale(.97);filter:brightness(1.4)}
.gx-cta::before{content:"";position:absolute;right:5px;bottom:5px;width:6px;height:6px;background:currentColor;opacity:0;pointer-events:none}
.gx-cta:hover::before{animation:cy-blink .5s steps(1) infinite}
@keyframes cy-blink{50%{opacity:1}}

/* ---- 卡片：右上／左下紅色括號角（另外兩角是斜切），滑過上浮、括號外擴、底部泛青光 ---- */
.gx-card{position:relative;background:var(--panel) !important;border-color:var(--line) !important}
.gx-card::before,.gx-card::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--r);
  pointer-events:none;transition:width .25s var(--ease),height .25s var(--ease)}
.gx-card::before{top:-1px;right:-1px;border-left:0;border-bottom:0}
.gx-card::after{bottom:-1px;left:-1px;border-right:0;border-top:0}
.gx-card.hov{transition:transform .18s var(--ease),box-shadow .25s,border-color .18s}
.gx-card.hov:hover{transform:translateY(-3px) !important;border-color:rgba(224,203,42,.6) !important;
  box-shadow:inset 0 -48px 64px -44px rgba(62,242,255,.22) !important;background:var(--panel) !important}
.gx-card.hov:hover::before,.gx-card.hov:hover::after{width:28px;height:28px}
.gx-card.hov:active{transform:translateY(0) scale(.99) !important}

/* ---- 輸入框 ---- */
.gx-input:focus{border-color:var(--y) !important;box-shadow:0 0 0 1px var(--y) !important}

/* ---- 教學文章 ---- */
.gx-article h2{color:var(--y) !important;text-shadow:none !important}
.gx-article blockquote{border-left-color:var(--c) !important}

/* ---- 標題故障閃爍：紅／青 ---- */
.gx-glitch::before{color:var(--r) !important}
.gx-glitch::after{color:var(--c) !important}

/* ---- 頁尾：免責聲明對比拉到 4.5:1 以上 ---- */
footer{color:#8e8a7c !important;border-top-color:var(--line) !important}
footer a{color:var(--sub) !important}
footer a:hover{color:var(--y) !important}

/* ---- 鍵盤焦點：青色虛線輕微脈動 ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.gx-tab:focus-visible{
  outline:2px dashed var(--c) !important;outline-offset:3px;animation:cy-focus .9s ease-in-out infinite alternate}
@keyframes cy-focus{to{outline-offset:6px}}

/* ---- 系統開「減少動態效果」：全部停，只留顏色變化 ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .gx-fx{display:none}
}