/* ======================================================== */
/* FANTASY // SUITE - Core Design System & NieR UI Style    */
/* ======================================================== */

/* 字型改由各 HTML <head> 用非阻塞 preload 方式載入，見 BUILD.md */

:root {
  --bg-base: #000000;         /* 絕對純黑 */
  --yorha-bone: #dcdbce;      /* 尼爾骨白色 / 沙色 */
  --yorha-dark: #1a1a17;      /* 極深黑褐色 */
  --text-muted: #737267;      /* 暗沙色 (用於次要文字) */
  --accent-gold: #c3b091;     /* 尼爾微金 (偶爾點綴) */
}

/* 絕對視覺禁令：禁止圓角與柔和過渡 */
* {
  border-radius: 0 !important;
}

body {
  background-color: var(--bg-base);
  color: var(--yorha-bone);
  font-family: 'Noto Sans TC', sans-serif;
  overflow: hidden;
  user-select: none;
  margin: 0;
}

.font-mono-code {
  font-family: 'JetBrains Mono', monospace;
}

/* --- 尼爾風格環境特效 --- */
.bg-grid {
  background-size: 24px 24px;
  background-image: radial-gradient(circle, rgba(220, 219, 206, 0.1) 1px, transparent 1px);
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.scanlines {
  background: linear-gradient(to bottom, transparent 50%, rgba(220, 219, 206, 0.03) 50%);
  background-size: 100% 4px;
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.06'/%3E%3C/svg%3E");
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0.04;
}

/* 終端機游標閃爍 */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.animate-blink {
  animation: blink 1s step-end infinite;
}

/* --- 骨白全息方塊 --- */
.cube-container {
  perspective: 1200px;
}

.cube {
  width: 140px;
  height: 140px;
  transform-style: preserve-3d;
  animation: cube-rotate 24s infinite linear, cube-float 5s infinite ease-in-out alternate;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), width 0.8s, height 0.8s;
}

.cube-face {
  position: absolute;
  width: 140px;
  height: 140px;
  background: #000000;
  border: 1px solid var(--yorha-bone);
  box-shadow: 0 0 25px rgba(220, 219, 206, 0.3), inset 0 0 15px rgba(220, 219, 206, 0.15);
  transition: width 0.8s, height 0.8s, transform 0.8s;
}

.cube-face.front  { transform: rotateY(  0deg) translateZ(70px); }
.cube-face.back   { transform: rotateY(180deg) translateZ(70px); }
.cube-face.right  { transform: rotateY( 90deg) translateZ(70px); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(70px); }
.cube-face.top    { transform: rotateX( 90deg) translateZ(70px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(70px); }

@keyframes cube-rotate {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(180deg); }
}

@keyframes cube-float {
  0% { translate: 0 0; }
  100% { translate: 0 -20px; }
}

/* 狀態：大廳主面板啟動，方塊移至頂部微縮 */
.cube.system-active {
  width: 70px;
  height: 70px;
  animation: cube-rotate 40s infinite linear; /* 變慢 */
}
.cube.system-active .cube-face {
  width: 70px;
  height: 70px;
}
.cube.system-active .cube-face.front  { transform: rotateY(  0deg) translateZ(35px); }
.cube.system-active .cube-face.back   { transform: rotateY(180deg) translateZ(35px); }
.cube.system-active .cube-face.right  { transform: rotateY( 90deg) translateZ(35px); }
.cube.system-active .cube-face.left   { transform: rotateY(-90deg) translateZ(35px); }
.cube.system-active .cube-face.top    { transform: rotateX( 90deg) translateZ(35px); }
.cube.system-active .cube-face.bottom { transform: rotateX(-90deg) translateZ(35px); }


/* --- 尼爾全息雷達與瞄準框架 --- */
.cube-container {
  perspective: 1200px;
  position: relative;
}

/* 圓形雷達虛線圈 */
.radar-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  border: 1px dashed rgba(220, 219, 206, 0.22);
  border-radius: 50% !important; /* 雷達瞄準圈保持圓形 */
  pointer-events: none;
  z-index: 10;
  animation: radar-spin-clockwise 30s infinite linear;
  transition: width 0.8s, height 0.8s, opacity 0.8s;
}

/* 方形瞄準角架 */
.target-brackets {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  pointer-events: none;
  z-index: 11;
  animation: radar-spin-counter 25s infinite linear;
  transition: width 0.8s, height 0.8s, opacity 0.8s;
}

.bracket-edge {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(220, 219, 206, 0.35);
}
.bracket-edge.top-left     { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.bracket-edge.top-right    { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.bracket-edge.bottom-left  { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.bracket-edge.bottom-right { bottom: 0; right: 0; border-left: 0; border-top: 0; }

@keyframes radar-spin-clockwise {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes radar-spin-counter {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* 狀態：大廳主面板啟動，雷達環跟隨微縮淡出 */
.cube.system-active ~ .radar-circle {
  width: 120px;
  height: 120px;
  opacity: 0.1;
}
.cube.system-active ~ .target-brackets {
  width: 140px;
  height: 140px;
  opacity: 0.1;
}


/* --- CTA 按鈕與微十字標記 --- */
.btn-yorha {
  border: 1px solid var(--yorha-bone);
  color: var(--yorha-bone);
  position: relative;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.btn-yorha:hover {
  background-color: var(--yorha-bone);
  color: var(--yorha-dark);
  box-shadow: 0 0 20px rgba(220, 219, 206, 0.4);
  animation: glitch-skew 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

.btn-yorha:hover .hover-text-dark {
  color: var(--yorha-dark) !important;
}

.cross-tl, .cross-tr, .cross-bl, .cross-br {
  position: absolute;
  width: 7px;
  height: 7px;
  pointer-events: none;
  transition: top 0.18s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.18s cubic-bezier(0.16, 1, 0.3, 1), left 0.18s cubic-bezier(0.16, 1, 0.3, 1), right 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.cross-tl { top: -4px; left: -4px; }
.cross-tr { top: -4px; right: -4px; }
.cross-bl { bottom: -4px; left: -4px; }
.cross-br { bottom: -4px; right: -4px; }

/* Hover 時十字架向外擴散 4px 提升動態細緻感 */
.btn-yorha:hover .cross-tl,
.hud-node:hover .node-title .cross-tl { top: -8px; left: -8px; }
.btn-yorha:hover .cross-tr,
.hud-node:hover .node-title .cross-tr { top: -8px; right: -8px; }
.btn-yorha:hover .cross-bl,
.hud-node:hover .node-title .cross-bl { bottom: -8px; left: -8px; }
.btn-yorha:hover .cross-br,
.hud-node:hover .node-title .cross-br { bottom: -8px; right: -8px; }

.cross-line-h {
  position: absolute;
  top: 3px;
  left: 0;
  width: 7px;
  height: 1px;
  background: var(--yorha-bone);
  transition: background 0.15s;
}
.cross-line-v {
  position: absolute;
  top: 0;
  left: 3px;
  width: 1px;
  height: 7px;
  background: var(--yorha-bone);
  transition: background 0.15s;
}

.btn-yorha:hover .cross-line-h,
.btn-yorha:hover .cross-line-v,
.hud-node:hover .cross-line-h,
.hud-node:hover .cross-line-v,
.node-title.active .cross-line-h,
.node-title.active .cross-line-v {
  background: var(--yorha-dark);
}

@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  20% { transform: skew(-4deg); }
  40% { transform: skew(4deg); }
  60% { transform: skew(-2deg); }
  80% { transform: skew(2deg); }
  100% { transform: skew(0deg); }
}

/* --- 正交折線路徑 --- */
.svg-path {
  stroke: rgba(220, 219, 206, 0.12); /* 降低常態明度至 12% */
  stroke-width: 1px;
  fill: none;
  transition: stroke 0.3s, stroke-width 0.3s, filter 0.3s;
}
.svg-path.active {
  stroke: rgba(220, 219, 206, 0.95);
  stroke-width: 2px;
  filter: drop-shadow(0 0 5px rgba(220, 219, 206, 0.6));
  stroke-dasharray: 8 8;
  animation: svg-line-flow 1.5s linear infinite;
}

@keyframes svg-line-flow {
  to {
    stroke-dashoffset: -16;
  }
}

/* --- 跑馬燈動畫 --- */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 25s linear infinite;
}

/* 節點選單條樣式 */
.node-title {
  border: 1px solid rgba(220, 219, 206, 0.25);
  color: var(--yorha-bone);
  background-color: rgba(0, 0, 0, 0.65);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.node-title.active {
  border-color: var(--yorha-bone);
  color: var(--yorha-dark);
  background-color: var(--yorha-bone);
  box-shadow: 0 0 15px rgba(220, 219, 206, 0.35);
}

/* 確保選單內部的子標籤 span 與邊框，能在 active 或 hover 時同步反色為深色 */
.node-title.active span,
.hud-node:hover .node-title span {
  color: var(--yorha-dark) !important;
  border-color: rgba(26, 26, 23, 0.25) !important;
  opacity: 1 !important;
}

/* 雙方塊指針 */
.menu-pointer {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out, color 0.15s;
}

/* 懸停視覺回饋 */
.hud-node:hover .node-title {
  border-color: var(--yorha-bone);
  background-color: var(--yorha-bone);
  color: var(--yorha-dark);
  box-shadow: 0 0 15px rgba(220, 219, 206, 0.35);
}
.hud-node:hover .menu-pointer {
  opacity: 1;
  transform: translateX(0);
  color: var(--yorha-dark);
}
.node-title.active .menu-pointer {
  opacity: 1;
  transform: translateX(0);
  color: var(--yorha-dark);
}

.node-anchor {
  background-color: #000;
  border-color: var(--yorha-bone);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.node-anchor.active {
  background-color: var(--yorha-bone);
  box-shadow: 0 0 10px rgba(220, 219, 206, 0.8);
}

.node-anchor-inner {
  background-color: rgba(220, 219, 206, 0.5);
  transition: background-color 0.2s;
}
.node-anchor-inner.active {
  background-color: var(--yorha-dark);
}

/* --- 系統控制面板系統 (NieR System Panels) --- */
.system-panel {
  position: absolute;
  top: 15%;
  left: 5%;
  width: 90%;
  height: 72%;
  background-color: rgba(26, 26, 23, 0.96); /* yorha-dark 半透明 */
  border: 1px solid var(--yorha-bone);
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  transform: scaleY(0.005) scaleX(1);
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease-out;
}

/* 面板展開特效：仿尼爾先橫線、後上下展開 */
.system-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: scaleY(1) scaleX(1);
}

.panel-header {
  border-bottom: 1px solid rgba(220, 219, 206, 0.2);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

/* 客製化滾動條 */
.panel-content::-webkit-scrollbar {
  width: 4px;
}
.panel-content::-webkit-scrollbar-track {
  background: rgba(220, 219, 206, 0.05);
}
.panel-content::-webkit-scrollbar-thumb {
  background: var(--yorha-bone);
}

/* --- Before/After 對比滑桿組件 --- */
.comparison-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.comparison-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-after {
  z-index: 10;
}

.image-before {
  z-index: 20;
  /* 預設裁切一半 */
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: var(--yorha-bone);
  z-index: 30;
  transform: translateX(-50%);
  cursor: ew-resize;
  pointer-events: auto;
  box-shadow: 0 0 10px rgba(220, 219, 206, 0.8);
}

.slider-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: var(--yorha-dark);
  border: 1px solid var(--yorha-bone);
  color: var(--yorha-bone);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 10px;
  font-weight: bold;
  pointer-events: none;
}

.slider-label {
  position: absolute;
  bottom: 10px;
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  z-index: 25;
  border: 1px solid rgba(220, 219, 206, 0.2);
}

.label-before { left: 10px; color: var(--accent-gold); }
.label-after { right: 10px; color: var(--yorha-bone); }

/* --- 裝飾與排版元件 --- */
.decor-dot {
  width: 4px;
  height: 4px;
  background-color: var(--yorha-bone);
  display: inline-block;
}
.decor-line {
  height: 1px;
  background-color: rgba(220, 219, 206, 0.15);
  width: 100%;
}
.decor-sub-border {
  border-left: 3px solid var(--yorha-bone);
  padding-left: 0.75rem;
}

/* 文字複製成功動畫 */
@keyframes copy-popup {
  0% { transform: translateY(0) scale(0.9); opacity: 0; }
  10% { transform: translateY(-10px) scale(1); opacity: 1; }
  90% { transform: translateY(-10px) scale(1); opacity: 1; }
  100% { transform: translateY(-20px) scale(0.9); opacity: 0; }
}
.copy-toast {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--yorha-bone);
  color: var(--yorha-dark);
  padding: 6px 16px;
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: bold;
  z-index: 200;
  animation: copy-popup 2s forwards;
  pointer-events: none;
}

/* 互動式拓撲圖 */
.topo-node {
  cursor: pointer;
}
.topo-node rect {
  transition: fill 0.25s, stroke 0.25s, stroke-width 0.25s;
}
.topo-node text {
  transition: fill 0.25s;
}
.topo-node:hover rect {
  stroke-width: 1.5px;
  fill: var(--yorha-dark);
  stroke: var(--yorha-bone);
  filter: drop-shadow(0 0 5px rgba(220, 219, 206, 0.6));
}
.topo-node:hover text {
  fill: var(--yorha-bone);
}

/* ======================================================== */
/* FANTASY // SUITE - Widescreen Vignette & Custom Cursor   */
/* ======================================================== */

/* 隱藏預設游標 */
body, a, button, .hud-node, .node-title, .node-anchor, .cube-container {
  cursor: none !important;
}

/* 自訂 HUD 十字點陣游標 */
#hud-custom-cursor {
  width: 24px;
  height: 24px;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10100; /* 須高於全站最高層的教學影片 Lightbox (10050)，否則游標會被蓋住而消失 */
  mix-blend-mode: difference;
  /* transform (position + centering) is set entirely by app.js per mousemove
     frame — no static transform here, so there's nothing for the JS write to
     fight with. top/left stay at 0 as the translate3d() anchor point. */
  transition: width 0.18s cubic-bezier(0.16, 1, 0.3, 1), height 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: none; /* 由 JS 啟用，防行動端觸控干擾 */
}

/* 十字瞄準線 */
#hud-custom-cursor::before,
#hud-custom-cursor::after {
  content: '';
  position: absolute;
  background-color: #ffffff; /* 純白，以利 mix-blend-difference 翻轉成純黑 */
  transition: background-color 0.2s;
}

/* 橫向瞄準線 */
#hud-custom-cursor::before {
  top: 11px;
  left: 0;
  width: 24px;
  height: 2px;
}

/* 垂直瞄準線 */
#hud-custom-cursor::after {
  top: 0;
  left: 11px;
  width: 2px;
  height: 24px;
}

/* 當游標處於點擊懸停狀態時 (Hovering) */
#hud-custom-cursor.hovering {
  width: 14px;
  height: 14px;
}
#hud-custom-cursor.hovering::before {
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
}
#hud-custom-cursor.hovering::after {
  top: 0;
  left: 6px;
  width: 2px;
  height: 14px;
}

/* 主畫面深邃全息漸層暗角 */
.vignette-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, transparent 45%, rgba(0, 0, 0, 0.68) 100%);
  pointer-events: none;
  z-index: 10;
}

/* --- 3D 核心全息鎖定共鳴動畫 --- */
.cube-container:hover .radar-circle {
  animation: radar-spin-clockwise 5s infinite linear; /* 加速旋轉 */
  border-color: rgba(220, 219, 206, 0.45); /* 稍微變亮 */
  width: 240px; /* 微微縮緊 */
  height: 240px;
}

.cube-container:hover .target-brackets {
  animation: radar-spin-counter 4s infinite linear, target-bracket-glitch 0.25s infinite linear;
  width: 260px; /* 縮緊 20px */
  height: 260px;
}

.cube-container:hover .bracket-edge {
  border-color: rgba(220, 219, 206, 0.65);
}

@keyframes target-bracket-glitch {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  33% { transform: translate(-52%, -48%) rotate(-1deg) scale(0.99); }
  66% { transform: translate(-48%, -52%) rotate(1deg) scale(1.01); }
}

/* 自訂游標中心鎖定小點 (方案 C) */
.cursor-dot {
  position: absolute;
  top: 11px;
  left: 11px;
  width: 2px;
  height: 2px;
  background-color: #ffffff;
  opacity: 0;
  transition: opacity 0.15s, top 0.18s, left 0.18s;
}

#hud-custom-cursor.hovering .cursor-dot {
  opacity: 1;
  top: 6px;
  left: 6px;
}

/* 按鈕點擊「數據寫入 Glitch 閃爍」動畫 (方案 B) */
@keyframes click-glitch {
  0%, 100% {
    background-color: var(--yorha-bone);
    color: var(--yorha-dark);
  }
  20%, 60% {
    background-color: var(--yorha-dark);
    color: var(--yorha-bone);
  }
  40%, 80% {
    background-color: var(--yorha-bone);
    color: var(--yorha-dark);
  }
}

.animate-click-glitch {
  animation: click-glitch 0.15s steps(1) infinite !important;
}

/* 當按鈕點擊閃爍時，讓十字裝飾線也同步閃爍反色 */
.animate-click-glitch .cross-line-h,
.animate-click-glitch .cross-line-v {
  animation: click-glitch-cross 0.15s steps(1) infinite;
}

@keyframes click-glitch-cross {
  0%, 100% { background: var(--yorha-dark); }
  20%, 60% { background: var(--yorha-bone); }
  40%, 80% { background: var(--yorha-dark); }
}

/* 選單 Hover / Active 時小標籤與中文反白可讀性優化 */
.hud-node:hover .node-title span.opacity-60,
.node-title.active span.opacity-60 {
  opacity: 1 !important;
}

/* 子網頁雙欄滾動解耦：電腦版鎖死 body 滾動，手機版自適應 */
@media (min-width: 768px) {
  body.subpage-mode {
    height: 100vh !important;
    overflow: hidden !important;
  }
}

/* ======================================================== */
/* FANTASY // SUITE - NieR x AC6 Hybrid HUD Styles          */
/* ======================================================== */

/* 2. 尼爾不對稱卡片基礎與 Hover 反色 */
.nier-card {
  position: relative;
  transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              color 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}

/* 斜線陰影格柵 */
.card-slash-grid {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(220, 219, 206, 0.03) 8px, rgba(220, 219, 206, 0.03) 9px);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nier-card:hover .card-slash-grid,
.nier-card.hover-state .card-slash-grid {
  opacity: 1;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(26, 26, 23, 0.04) 8px, rgba(26, 26, 23, 0.04) 9px);
}

/* 卡片 Hover 觸發反色 */
.nier-card:hover,
.nier-card.hover-state {
  background-color: var(--yorha-bone) !important;
  color: var(--yorha-dark) !important;
  border-color: var(--yorha-bone) !important;
  box-shadow: 0 0 30px rgba(220, 219, 206, 0.35);
}

/* 強制子元素在卡片 Hover 時同步反色 */
.nier-card:hover h3,
.nier-card.hover-state h3,
.nier-card:hover p,
.nier-card.hover-state p,
.nier-card:hover span,
.nier-card.hover-state span,
.nier-card:hover div:not(.en-charge-bar):not(.fcs-bracket-edge),
.nier-card.hover-state div:not(.en-charge-bar):not(.fcs-bracket-edge) {
  color: var(--yorha-dark) !important;
  border-color: rgba(26, 26, 23, 0.15) !important;
}

.nier-card:hover .light-dot,
.nier-card.hover-state .light-dot {
  background-color: var(--yorha-dark) !important;
}

/* 當卡片被 Hover 時，使價格盒子的背景變為淡黑色透明，並將邊框改為深色，防止字體糊在一起 */
.nier-card:hover .inline-flex.items-baseline,
.nier-card.hover-state .inline-flex.items-baseline {
  background-color: rgba(26, 26, 23, 0.08) !important;
  border-color: rgba(26, 26, 23, 0.25) !important;
}

/* 反色的按鈕交互 (按鈕反色成黑色底，骨白字) */
.nier-card:hover .btn-yorha,
.nier-card.hover-state .btn-yorha {
  background-color: var(--yorha-dark) !important;
  color: var(--yorha-bone) !important;
  border-color: var(--yorha-dark) !important;
}

/* 上面「強制子元素反色」規則會把按鈕內的 span 文字也蓋成深色，
   導致深底配深字看不清楚，這裡把按鈕內文字強制拉回骨白色 */
.nier-card:hover .btn-yorha span,
.nier-card.hover-state .btn-yorha span {
  color: var(--yorha-bone) !important;
}

.nier-card:hover .btn-yorha .cross-line-h,
.nier-card.hover-state .btn-yorha .cross-line-h,
.nier-card:hover .btn-yorha .cross-line-v,
.nier-card.hover-state .btn-yorha .cross-line-v {
  background: var(--yorha-bone) !important;
}

/* 3. AC6 火控瞄準鎖定框 (FCS Brackets) */
.fcs-brackets {
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nier-card:hover .fcs-brackets,
.nier-card.hover-state .fcs-brackets {
  opacity: 1;
  transform: scale(1);
}

.fcs-bracket-edge {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--yorha-dark); /* 預設深色，因為僅在 Hover (已反色) 時顯現 */
  transition: border-color 0.2s;
}

.fcs-bracket-edge.top-left     { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.fcs-bracket-edge.top-right    { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.fcs-bracket-edge.bottom-left  { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.fcs-bracket-edge.bottom-right { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.fcs-lock-text {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--yorha-dark) !important;
}

@keyframes fcs-lock-glitch {
  0% { inset: 6px; }
  100% { inset: 8px; }
}

/* 4. EN 能量計量槽樣式 */
.en-charge-bar {
  width: 0%;
  height: 100%;
  background-color: var(--yorha-bone);
  transition: background-color 0.2s;
  animation: initial-en-load 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes initial-en-load {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* 卡片 Hover 時，EN 充能槽反色為深色並重新充電 */
.nier-card:hover .en-charge-bar,
.nier-card.hover-state .en-charge-bar {
  background-color: var(--yorha-dark) !important;
  animation: hover-en-charge 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes hover-en-charge {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* 微型自訂滾動條，適配 HUD 面板 */
.scrollbar-thin::-webkit-scrollbar {
  width: 3px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: rgba(220, 219, 206, 0.03);
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(220, 219, 206, 0.15);
}
.nier-card:hover .scrollbar-thin::-webkit-scrollbar-thumb,
.nier-card.hover-state .scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(26, 26, 23, 0.2);
}

/* ======================================================== */
/* 方案 A (暗色提亮) - subpage-mode 全域優化                 */
/* ======================================================== */
body.subpage-mode {
  background-color: #0c0c0a !important; /* 底色加深，使畫面更沉穩，拉開明暗對比 */
  --text-muted: #8e8d80;                 /* 調亮暗沙色以提升文字可讀性 */
}

/* 提亮背景圖片不透明度並做適度收斂，使廢墟輪廓浮現且維持沉穩 */
body.subpage-mode .fixed.z-0 {
  opacity: 0.42 !important;
  filter: brightness(1.05) contrast(1.1) grayscale(100%);
}

/* 提亮點陣網格與 CRT 掃描線 */
body.subpage-mode .bg-grid {
  background-image: radial-gradient(circle, rgba(220, 219, 206, 0.14) 1px, transparent 1px);
}
body.subpage-mode .scanlines {
  background: linear-gradient(to bottom, transparent 50%, rgba(220, 219, 206, 0.05) 50%);
  background-size: 100% 4px;
}

/* 將右側 Workspace 控制台主面板重塑為「5% 骨白半透明全息光幕」，拉開層次感 */
body.subpage-mode section {
  background-color: rgba(220, 219, 206, 0.05) !important;
  border-color: rgba(220, 219, 206, 0.32) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55), 
              inset 0 0 25px rgba(220, 219, 206, 0.04); /* 內發光全息邊緣 */
}

/* 提亮普通的裝飾細線邊框（不影響 YoRHa 按鈕與選單標題） */
body.subpage-mode .border:not(.btn-yorha):not(.node-title) {
  border-color: rgba(220, 219, 206, 0.28) !important;
}

/* 特別優化：讓 Sidebar 與 Workspace 的主標題在提亮背景下顯得更清爽 */
body.subpage-mode .decor-sub-border {
  border-bottom-color: rgba(220, 219, 206, 0.35) !important;
}

/* 讓子網頁卡片底色為深碳黑色，在半透明光幕上呈現極高的實虛對比 */
body.subpage-mode .nier-card {
  background-color: rgba(18, 18, 16, 0.95) !important;
}
body.subpage-mode .nier-card:hover {
  background-color: var(--yorha-bone) !important;
}

/* ======================================================== */
/* YoRHa OS - Virtual Desktop & Window Manager System        */
/* ======================================================== */
.yorha-desktop {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(220, 219, 206, 0.02);
  display: flex;
  flex-direction: column;
  user-select: none;
}

/* 頂部狀態列 */
.desktop-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(220, 219, 206, 0.2);
  padding: 8px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--yorha-bone);
  background: rgba(26, 26, 23, 0.4);
  letter-spacing: 0.05em;
}

/* 電腦桌面圖示區域 */
.desktop-icons-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  grid-auto-rows: max-content;
  gap: 16px;
  padding: 24px;
  overflow-y: auto;
  padding-bottom: 60px; /* 留出底部工作列的空間 */
  align-content: start;
}

/* 桌面圖示 */
.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 8px;
  border: 1px dashed rgba(220, 219, 206, 0.2);
  background: rgba(18, 18, 16, 0.6);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.desktop-icon::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 3px;
  height: 3px;
  background: var(--yorha-bone);
}

.desktop-icon:hover {
  background: var(--yorha-bone);
  color: var(--yorha-dark);
  border: 1px solid var(--yorha-bone);
}

.desktop-icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  margin-bottom: 8px;
  transition: transform 0.2s;
}

.desktop-icon:hover svg {
  transform: scale(1.08);
}

.desktop-icon-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  line-height: 1.2;
  word-break: break-all;
}

.desktop-icon-title {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 10px;
  font-weight: bold;
  margin-top: 4px;
  opacity: 0.8;
}

.desktop-icon:hover .desktop-icon-title {
  opacity: 1;
}

/* 尼爾風多視窗容器 */
.yorha-window {
  position: absolute;
  min-width: 320px;
  min-height: 240px;
  border: 1px solid var(--yorha-bone);
  background: rgba(18, 18, 16, 0.98);
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
  z-index: 10;
  transition: opacity 0.15s, transform 0.15s;
}

.yorha-window.maximized {
  top: 29px !important; /* 頂部狀態列高度 */
  left: 0 !important;
  width: 100% !important;
  height: calc(100% - 65px) !important; /* 扣除頂部+底部工作列 */
  transform: none !important;
  z-index: 90 !important;
}

.yorha-window.minimized {
  display: none !important;
}

/* 視窗頂部標題列 (拖曳手柄) */
.window-header {
  background: var(--yorha-bone);
  color: var(--yorha-dark);
  padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
  user-select: none;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--yorha-bone);
}

.window-title {
  display: flex;
  align-items: center;
}

.window-title::before {
  content: '■';
  margin-right: 6px;
  font-size: 8px;
}

/* 視窗控制按鈕 */
.window-controls {
  display: flex;
  gap: 6px;
}

.window-btn {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 900;
  cursor: pointer;
  border: 1px solid var(--yorha-dark);
  background: transparent;
  color: var(--yorha-dark);
  transition: all 0.1s;
  user-select: none;
}

.window-btn:hover {
  background: var(--yorha-dark);
  color: var(--yorha-bone);
}

/* 視窗內容區 */
.window-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  font-size: 11px;
  line-height: 1.6;
  color: var(--yorha-bone);
  user-select: text; /* 允許文字選取以便閱讀教程 */
  background-image: radial-gradient(circle, rgba(220, 219, 206, 0.01) 1px, transparent 1px);
  background-size: 12px 12px;
}

/* 滾動條客製化 */
.window-body::-webkit-scrollbar {
  width: 4px;
}
.window-body::-webkit-scrollbar-track {
  background: rgba(220, 219, 206, 0.02);
}
.window-body::-webkit-scrollbar-thumb {
  background: rgba(220, 219, 206, 0.25);
}
.window-body::-webkit-scrollbar-thumb:hover {
  background: var(--yorha-bone);
}

/* 視窗開啟全息掃描動畫 */
@keyframes window-scan-open {
  0% {
    clip-path: polygon(0 48%, 100% 48%, 100% 52%, 0 52%);
    opacity: 0.4;
    transform: scaleY(0.01);
  }
  40% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 0.9;
    transform: scaleY(1);
  }
  60% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.window-opening {
  animation: window-scan-open 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 底部工作任務列 */
.yorha-taskbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 36px;
  border-top: 1px solid rgba(220, 219, 206, 0.2);
  background: rgba(18, 18, 16, 0.95);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
  z-index: 99;
}

.taskbar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: var(--text-muted);
  margin-right: 6px;
  letter-spacing: 0.05em;
}

/* 任務列收納 App 標籤 */
.taskbar-item {
  height: 22px;
  border: 1px solid rgba(220, 219, 206, 0.3);
  padding: 0 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--yorha-bone);
  background: rgba(26, 26, 23, 0.6);
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.taskbar-item::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--yorha-bone);
  margin-right: 6px;
}

.taskbar-item:hover {
  border-color: var(--yorha-bone);
  background: rgba(220, 219, 206, 0.1);
}

.taskbar-item.active {
  background: var(--yorha-bone);
  color: var(--yorha-dark);
  border-color: var(--yorha-bone);
}

.taskbar-item.active::before {
  background: var(--yorha-dark);
}

/* 教程內容細節美化 */
.tutorial-section {
  border-left: 2px solid rgba(220, 219, 206, 0.3);
  padding-left: 12px;
  margin-bottom: 20px;
}

.tutorial-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--yorha-bone);
  margin-bottom: 10px;
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
}

.tutorial-step {
  margin-bottom: 12px;
  background: rgba(220, 219, 206, 0.02);
  border: 1px solid rgba(220, 219, 206, 0.1);
  padding: 10px 14px;
}

.tutorial-step-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--accent-gold);
  margin-bottom: 4px;
  font-weight: bold;
}

.tutorial-tag-chip {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  border: 1px solid var(--yorha-bone);
  padding: 1px 6px;
  color: var(--yorha-bone);
  background: rgba(220, 219, 206, 0.05);
  margin: 2px;
}

/* 手機版 RWD 適應 */
@media (max-width: 767px) {
  .yorha-window {
    top: 29px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100% - 65px) !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .window-header {
    cursor: default;
  }
  .window-btn[data-action="maximize"] {
    display: none !important; /* 手機版不提供最大化切換，預設就是最大化 */
  }
}

/* ======================================================== */
/* YoRHa OS - Split Layout & Interactive Simulators          */
/* ======================================================== */

/* 視窗內容雙欄佈局 */
.window-split-layout {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 20px;
  overflow: hidden;
}

/* 左欄：教學文字說明區 */
.split-left-tutorial {
  flex: 0 0 42%;
  height: 100%;
  overflow-y: auto;
  border-right: 1px dashed rgba(220, 219, 206, 0.2);
  padding-right: 16px;
}

/* 右欄：互動模擬器區 */
.split-right-simulator {
  flex: 1;
  height: 100%;
  background: rgba(220, 219, 206, 0.02);
  border: 1px solid rgba(220, 219, 206, 0.1);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

/* 模擬器頂部 HUD 標籤 */
.sim-hud-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(220, 219, 206, 0.1);
  padding-bottom: 4px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
}

/* 模擬輸入框與群組 */
.sim-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--yorha-bone);
  margin-bottom: 4px;
}

/* 模擬器主按鈕 (尼爾直角風) */
.btn-sim-action {
  width: 100%;
  border: 1px solid var(--yorha-bone);
  background: rgba(26, 26, 23, 0.6);
  color: var(--yorha-bone);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: bold;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  position: relative;
}

.btn-sim-action:hover {
  background: var(--yorha-bone);
  color: var(--yorha-dark);
}

/* 模擬晶片互動 (解析與畫布) */
.sim-prompt-box {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(220, 219, 206, 0.2);
  padding: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-muted);
  min-height: 45px;
  margin-bottom: 12px;
}

.sim-chips-container {
  min-height: 80px;
  border: 1px dashed rgba(220, 219, 206, 0.15);
  padding: 8px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-content: start;
}

.sim-chip {
  cursor: pointer;
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  border: 1px solid rgba(220, 219, 206, 0.4);
  padding: 2px 6px;
  color: var(--yorha-bone);
  background: rgba(220, 219, 206, 0.04);
  margin: 3px;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.sim-chip:hover {
  border-color: var(--yorha-bone);
  background: rgba(220, 219, 206, 0.12);
  transform: translateY(-1px);
}

.sim-chip.selected {
  opacity: 0.35;
  border-style: dashed;
  cursor: not-allowed;
  transform: none;
}

/* 模擬畫布區 */
.sim-canvas-area {
  min-height: 70px;
  border: 1px solid var(--yorha-bone);
  background: rgba(18, 18, 16, 0.95);
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 4px;
}

.canvas-chip {
  display: flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  background: var(--yorha-bone);
  color: var(--yorha-dark);
  padding: 1px 4px;
  font-weight: bold;
}

.canvas-chip-delete {
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.1s;
}

.canvas-chip-delete:hover {
  opacity: 1;
}

/* 模擬 AI 智慧歸檔 (樹狀與資料夾) */
.sim-archive-pool {
  border: 1px dashed rgba(220, 219, 206, 0.2);
  padding: 8px;
  min-height: 50px;
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.archive-tag-node {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  background: rgba(195, 176, 145, 0.05);
  padding: 2px 6px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.archive-tag-node.archiving {
  transform: scale(0.1);
  opacity: 0;
}

.sim-folders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}

.sim-folder {
  border: 1px solid rgba(220, 219, 206, 0.25);
  background: rgba(26, 26, 23, 0.8);
  padding: 12px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sim-folder-icon {
  font-size: 16px;
  margin-bottom: 4px;
}

.sim-folder-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--yorha-bone);
  font-weight: bold;
}

.sim-folder-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: var(--text-muted);
  margin-top: 2px;
}

.sim-folder.active-pulse {
  border-color: var(--yorha-bone);
  background: var(--yorha-bone);
  color: var(--yorha-dark);
  box-shadow: 0 0 15px rgba(220, 219, 206, 0.3);
}

.sim-folder.active-pulse .sim-folder-name,
.sim-folder.active-pulse .sim-folder-count {
  color: var(--yorha-dark);
}

/* 動作導演循環流程圖 */
.sim-loop-diagram-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.loop-nodes-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 12px;
}

.loop-node-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 320px;
  align-items: center;
}

.loop-step-box {
  width: 100px;
  border: 1px solid rgba(220, 219, 206, 0.4);
  background: rgba(18, 18, 16, 0.9);
  padding: 8px 4px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--yorha-bone);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  user-select: none;
}

.loop-step-box::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 2px;
  height: 2px;
  background: var(--yorha-bone);
}

.loop-step-box:hover {
  border-color: var(--yorha-bone);
  background: rgba(220, 219, 206, 0.08);
}

.loop-step-box.active {
  border-color: var(--yorha-bone);
  background: var(--yorha-bone);
  color: var(--yorha-dark);
  font-weight: bold;
}

.loop-step-box.active::before {
  background: var(--yorha-dark);
}

/* 流程線與流向指示 */
.loop-arrow-v {
  width: 1px;
  height: 16px;
  background: rgba(220, 219, 206, 0.25);
  position: relative;
}

.loop-arrow-v::after {
  content: '↓';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  color: rgba(220, 219, 206, 0.4);
}

.loop-arrow-v.active {
  background: var(--yorha-bone);
}

.loop-arrow-v.active::after {
  color: var(--yorha-bone);
  animation: arrow-bounce 0.6s infinite alternate;
}

@keyframes arrow-bounce {
  0% { transform: translate(-50%, -30%); }
  100% { transform: translate(-50%, -70%); }
}

/* 手機版雙欄 RWD 解耦 */
@media (max-width: 767px) {
  .window-split-layout {
    flex-direction: column;
    overflow-y: auto;
  }
  .split-left-tutorial {
    flex: none;
    border-right: none;
    border-bottom: 1px dashed rgba(220, 219, 206, 0.2);
    padding-right: 0;
    padding-bottom: 16px;
    height: auto;
    overflow: visible;
  }
  .split-right-simulator {
    flex: none;
    height: auto;
    margin-top: 16px;
    overflow: visible;
  }
}

/* 教學步驟高亮 */
.tutorial-step {
  border: 1px solid rgba(220, 219, 206, 0.15);
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tutorial-step:hover {
  border-color: rgba(220, 219, 206, 0.5);
  background: rgba(220, 219, 206, 0.03);
}

.tutorial-step.active-step {
  border-color: var(--yorha-bone) !important;
  background: rgba(220, 219, 206, 0.08) !important;
}

.tutorial-step.active-step .tutorial-step-header {
  color: var(--accent-gold) !important;
}

/* 全息圖片檢視器與 CRT 掃描線 */
.tutorial-image-viewer {
  position: relative;
  border-radius: 0 !important;
}

/* CRT 濾鏡與單色遮罩 */
.crt-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(rgba(220, 219, 206, 0.05) 50%, rgba(0, 0, 0, 0.15) 50%),
              linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  background-size: 100% 3px, 3px 100%;
  z-index: 10;
  transition: opacity 0.3s ease;
  filter: sepia(35%) contrast(1.1) brightness(0.95);
  mix-blend-mode: color-burn;
}

.video-trigger-card:hover .crt-overlay {
  opacity: 0.25;
}

/* ==========================================
   教學影片觸發卡片 + Lightbox 播放器
   ========================================== */
.video-trigger-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(220, 219, 206, 0.08), rgba(0, 0, 0, 0.6) 70%),
              repeating-linear-gradient(45deg, rgba(220, 219, 206, 0.03) 0 2px, transparent 2px 8px);
  border: 1px solid rgba(220, 219, 206, 0.25);
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  border-radius: 0 !important;
}

.video-trigger-card:hover {
  border-color: var(--accent-gold);
  box-shadow: 0 0 22px rgba(205, 178, 114, 0.25);
}

.video-trigger-play {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--yorha-bone);
  color: var(--yorha-bone);
  font-size: 16px;
  padding-left: 3px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-trigger-card:hover .video-trigger-play {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: #121210;
  box-shadow: 0 0 18px rgba(205, 178, 114, 0.6);
  transform: scale(1.08);
}

.video-trigger-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  text-align: left;
}

.video-trigger-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--accent-gold);
  text-transform: uppercase;
}

.video-trigger-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--yorha-bone);
}

.tutorial-video-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.tutorial-video-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.tutorial-video-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(220, 219, 206, 0.4);
  color: var(--yorha-bone);
  width: 30px;
  height: 30px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font-mono);
  opacity: 0.55;
  transition: all 0.15s ease;
  border-radius: 0 !important;
}

.tutorial-video-close:hover {
  opacity: 1;
  background: var(--yorha-bone);
  color: #121210;
  box-shadow: 0 0 14px rgba(220, 219, 206, 0.45);
}

.tutorial-video-body {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}

.tutorial-video-body video,
.tutorial-video-body iframe {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
  border: 0;
}

.tutorial-video-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--accent-gold);
}

/* ==========================================
   Gallery 頁籤系統 (UI演示 / 圖片解析功能 / 提示詞生成)
   ========================================== */
.gallery-tab-bar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid rgba(220, 219, 206, 0.15);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.gallery-tab-btn {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 13px 22px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(220, 219, 206, 0.15);
  border-bottom: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  position: relative;
  top: 1px;
}
.gallery-tab-btn:hover {
  color: var(--yorha-bone);
}
.gallery-tab-btn.active {
  color: var(--accent-gold);
  background: rgba(205, 178, 114, 0.08);
  border-color: rgba(205, 178, 114, 0.4);
  border-bottom: 1px solid #0e0e0d;
}
.gallery-tab-panel {
  display: none;
}
.gallery-tab-panel.active {
  display: block;
}

.gallery-subtab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 1rem;
}
.gallery-subtab-btn {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 9px 20px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(220, 219, 206, 0.2);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.gallery-subtab-btn:hover {
  color: var(--yorha-bone);
  border-color: rgba(220, 219, 206, 0.4);
}
.gallery-subtab-btn.active {
  color: #121210;
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  font-weight: 700;
}
.gallery-subtab-panel {
  display: none;
}
.gallery-subtab-panel.active {
  display: block;
}

/* 提示詞生成效果 Midjourney 圖片瀑布流 (Pinterest 式 CSS columns 排版) */
.gallery-masonry-item {
  width: 100%;
  display: block;
  margin-bottom: 12px;
  break-inside: avoid;
  border: 1px solid rgba(220, 219, 206, 0.15);
  filter: grayscale(0.15);
  transition: filter 0.25s ease, border-color 0.25s ease;
}
.gallery-masonry-item:hover {
  filter: grayscale(0);
  border-color: rgba(220, 219, 206, 0.4);
}

/* UI 演示 輪播 */
.ui-carousel-wrap {
  width: 100%;
  position: relative;
}
.ui-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border: 1px solid rgba(220, 219, 206, 0.2);
  background: #0e0e0d;
  scrollbar-width: none;
}
.ui-carousel-track::-webkit-scrollbar {
  display: none;
}
.ui-carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 16 / 9;
}
.ui-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0e0e0d;
  user-select: none;
  pointer-events: none;
}
.ui-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(220, 219, 206, 0.3);
  color: var(--yorha-bone);
  font-size: 20px;
  cursor: pointer;
  z-index: 5;
  transition: all 0.2s ease;
}
.ui-carousel-arrow:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  background: rgba(0, 0, 0, 0.85);
}
.ui-carousel-arrow-prev {
  left: 10px;
}
.ui-carousel-arrow-next {
  right: 10px;
}
.ui-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.ui-carousel-dot {
  width: 6px;
  height: 6px;
  background: rgba(220, 219, 206, 0.25);
  cursor: pointer;
  transition: background 0.2s ease;
  padding: 0;
  border: none;
}
.ui-carousel-dot.active {
  background: var(--accent-gold);
}

/* ==========================================
   全息環形艙體控制台 (Orbital HUD Control Panel) 專屬樣式
   ========================================== */

.orbital-hud-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  padding: 16px;
  gap: 20px;
  align-items: stretch;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.hud-panel {
  background: rgba(18, 18, 16, 0.9);
  border: 1px solid rgba(220, 219, 206, 0.15);
  position: relative;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  border-radius: 0 !important;
}

.hud-panel:hover {
  border-color: rgba(220, 219, 206, 0.35);
  box-shadow: 0 0 15px rgba(220, 219, 206, 0.05);
}

.hud-panel-header {
  height: 36px;
  border-bottom: 1px solid rgba(220, 219, 206, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  background: rgba(220, 219, 206, 0.03);
  color: var(--yorha-bone);
  flex-shrink: 0;
  border-radius: 0 !important;
}

.hud-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 讓 flex 子項的 overflow-y 起作用 */
}

/* 3D 偏轉 */
.hud-panel-left {
  flex: 0 0 28%;
  transform: rotateY(12deg) translateZ(-20px);
  transform-origin: right center;
}

.hud-panel-center {
  flex: 1 1 auto;
  transform: translateZ(0);
  z-index: 10;
}

.hud-panel-right {
  flex: 0 0 34%;
  transform: rotateY(-12deg) translateZ(-20px);
  transform-origin: left center;
}

/* 選單與列表樣式 */
.hud-menu-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hud-menu-item {
  border: 1px solid rgba(220, 219, 206, 0.15);
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  border-radius: 0 !important;
}

.hud-menu-item:hover {
  border-color: rgba(220, 219, 206, 0.6);
  background: rgba(220, 219, 206, 0.03);
}

.hud-menu-item.active {
  border-color: var(--yorha-bone) !important;
  background: rgba(220, 219, 206, 0.08) !important;
}

.hud-menu-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--accent-gold);
}

.hud-menu-item .menu-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--yorha-bone);
  margin-bottom: 4px;
}

.hud-menu-item.active .menu-title {
  color: var(--accent-gold) !important;
  font-weight: bold;
}

.hud-menu-item .menu-desc {
  font-size: 9px;
  color: rgba(220, 219, 206, 0.6);
}

/* 淡出淡入動畫轉換 */
.hud-fade-out {
  opacity: 0;
  transform: scale(0.98) translateY(5px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hud-fade-in {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* RWD 解耦：在小螢幕時平攤面板，關閉 3D 偏轉 */
@media (max-width: 1024px) {
  .orbital-hud-wrapper {
    flex-direction: column;
    perspective: none;
    overflow-y: auto;
    gap: 16px;
    padding: 10px;
  }
  .hud-panel {
    height: auto;
    min-height: 350px;
  }
  .hud-panel-left, .hud-panel-center, .hud-panel-right {
    flex: none;
    width: 100%;
    transform: none !important;
    transform-origin: center center !important;
  }
  .hud-panel-body {
    overflow-y: visible;
  }
}

/* ==========================================
   戰術索敵 3D 節點地圖 (Tactical 3D Node Map) 專屬樣式
   ========================================== */

.tactical-map-scene {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  overflow: hidden;
  background: rgba(12, 12, 10, 0.4);
  box-sizing: border-box;
}

/* 緩慢自轉與 3D 傾斜的雷達地圖 */
.tactical-radar-map {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transform: rotateX(55deg) rotateZ(-12deg);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3D 網格背景與雷達圈 (最外層，維持最淡，做出縱深感的起點) */
.radar-grid-bg {
  position: absolute;
  width: 900px;
  height: 900px;
  border: 1px dashed rgba(220, 219, 206, 0.10);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0,0,0,0) 30%, rgba(18, 18, 16, 0.7) 90%),
    repeating-linear-gradient(0deg, rgba(220, 219, 206, 0.025) 0px, rgba(220, 219, 206, 0.025) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(220, 219, 206, 0.025) 0px, rgba(220, 219, 206, 0.025) 1px, transparent 1px, transparent 40px);
  animation: radar-sweep-bg 32s linear infinite;
  pointer-events: none;
  transform: translateZ(0px);
  transition: filter 0.3s ease;
}

/* 最外層：自轉同時做微幅垂直呼吸，貼近地面基準 */
@keyframes radar-sweep-bg {
  0%   { transform: translateZ(0px) rotate(0deg); }
  25%  { transform: translateZ(5px) rotate(90deg); }
  50%  { transform: translateZ(0px) rotate(180deg); }
  75%  { transform: translateZ(-5px) rotate(270deg); }
  100% { transform: translateZ(0px) rotate(360deg); }
}

/* 第二層逆時針旋轉虛線金屬環 (最內層，離中心 Hub 最近，亮度最高，鎖定節點時反應最明顯，浮空幅度也最大) */
.radar-ring-2 {
  position: absolute;
  width: 700px;
  height: 700px;
  border: 2px dashed rgba(205, 178, 114, 0.34);
  border-radius: 50%;
  animation: radar-sweep-ring2 24s linear infinite, ring2-glitch-flicker 7s infinite steps(1, end);
  pointer-events: none;
  transform: translateZ(30px);
  transition: filter 0.3s ease;
}

/* 內層：反向自轉同時做大幅垂直呼吸，浮最高、最靠近觀察者 */
@keyframes radar-sweep-ring2 {
  0%   { transform: translateZ(30px) rotate(360deg); }
  25%  { transform: translateZ(40px) rotate(270deg); }
  50%  { transform: translateZ(30px) rotate(180deg); }
  75%  { transform: translateZ(20px) rotate(90deg); }
  100% { transform: translateZ(30px) rotate(0deg); }
}

/* 中層框不定期故障閃爍 */
@keyframes ring2-glitch-flicker {
  0%, 94%, 100% { opacity: 1; filter: brightness(1); }
  94.3% { opacity: 0.15; filter: brightness(1); }
  94.6% { opacity: 1; filter: brightness(2.4); }
  95%   { opacity: 0.3; filter: brightness(0.8); }
  95.4% { opacity: 1; filter: brightness(1); }
}

/* 第三層順時針細密刻度環 (中間層，亮度、浮空高度都介於內外之間) */
.radar-ring-3 {
  position: absolute;
  width: 820px;
  height: 820px;
  border: 1px dotted rgba(205, 178, 114, 0.18);
  border-radius: 50%;
  animation: radar-sweep-ring3 45s linear infinite;
  pointer-events: none;
  transform: translateZ(15px);
  transition: filter 0.3s ease;
}

/* 中層：自轉同時做中幅垂直呼吸 */
@keyframes radar-sweep-ring3 {
  0%   { transform: translateZ(15px) rotate(0deg); }
  25%  { transform: translateZ(22px) rotate(90deg); }
  50%  { transform: translateZ(15px) rotate(180deg); }
  75%  { transform: translateZ(8px) rotate(270deg); }
  100% { transform: translateZ(15px) rotate(360deg); }
}

/* 節點鎖定回饋：滑鼠 hover 任一戰術節點時，3 層雷達框一起反應，離中心最近的內層反應最強、並加速旋轉 */
.tactical-radar-map:has(.tactical-node:hover) .radar-ring-2 {
  filter: brightness(2.2);
  animation-duration: 6s, 7s;
}
.tactical-radar-map:has(.tactical-node:hover) .radar-ring-3 {
  filter: brightness(1.6);
}
.tactical-radar-map:has(.tactical-node:hover) .radar-grid-bg {
  filter: brightness(1.3);
}

/* 中心雷達 Hub 標記 (6 節點放射狀佈局的圓心，貼在地面不隨節點做billboard反向旋轉) */
.radar-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%) translateZ(2px);
  pointer-events: none;
  z-index: 3;
}

.radar-hub-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(205, 178, 114, 0.35);
  border-radius: 50%;
}

.radar-hub-ring::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(220, 219, 206, 0.2);
  border-radius: 50%;
}

.radar-hub-cross::before,
.radar-hub-cross::after {
  content: '';
  position: absolute;
  background: var(--accent-gold);
  opacity: 0.6;
}

.radar-hub-cross::before {
  top: 50%;
  left: 8px;
  right: 8px;
  height: 1px;
  transform: translateY(-50%);
}

.radar-hub-cross::after {
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 1px;
  transform: translateX(-50%);
}

/* SVG 戰術路徑連線 */
.tactical-paths-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2;
  transform: translateZ(2px); /* 降至地面層，避免橫切文字 */
}

/* 開場破譯掃描動畫：輻條與節點進場前先隱藏，由 JS (playRadarBootSequence) 依序點亮 */
.tactical-paths-svg line {
  transition: opacity 0.5s ease;
}
.tactical-paths-svg line.spoke-pending {
  opacity: 0;
}

.radar-hub {
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.radar-hub.pre-reveal {
  opacity: 0;
  transform: translate(-50%, -50%) translateZ(2px) scale(0.3);
}

.tactical-node.pre-reveal {
  opacity: 0;
}

/* 節點解密浮現：短暫故障閃爍後定格，模擬掃描線掃過並破譯出資料 */
@keyframes node-decrypt-in {
  0%   { opacity: 0; filter: brightness(3) blur(2px); }
  20%  { opacity: 1; filter: brightness(2.2) blur(0); }
  35%  { opacity: 0.15; filter: brightness(1); }
  50%  { opacity: 1; }
  65%  { opacity: 0.35; }
  100% { opacity: 1; filter: brightness(1); }
}
.tactical-node.decrypt-in {
  animation: node-decrypt-in 0.55s steps(1, end) forwards;
}

/* 浮空節點 */
.tactical-node {
  position: absolute;
  /* 固定錨在容器正中央 (50%,50%)，再用 --nx/--ny (各節點 inline style 帶入的中心偏移 px) 放射狀展開，
     確保 6 個節點永遠以雷達視覺中心為圓心對稱分佈，不受容器實際尺寸/比例影響 (與 SVG 輻條、radar-hub 同一個中心點) */
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  cursor: pointer;
  /* 3D Billboard 反向旋轉：抵消父容器的 rotateX(55deg) rotateZ(-12deg)，設定 45px 浮空高空位移 */
  transform: translate(calc(-50% + var(--nx, 0px)), calc(-50% + var(--ny, 0px))) rotateZ(12deg) rotateX(-55deg) translateZ(45px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, filter 0.4s ease;
  z-index: 5;
}

.tactical-node-inner {
  background: rgba(18, 18, 16, 0.95);
  border: 1px solid rgba(220, 219, 206, 0.22);
  padding: 10px 16px;
  color: var(--yorha-bone);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  position: relative;
  border-radius: 0 !important;
  text-align: center;
  white-space: nowrap;
  transform: scale(1.5); /* 卡片文字太小難以辨識，整體放大 1.5 倍，圍繞節點錨點置中 */
}

/* 英文模式下標籤文字明顯變長，縮小放大倍率並允許換行，避免節點方塊互相重疊蓋字 */
html[lang="en"] .tactical-node-inner {
  transform: scale(1.15);
  white-space: normal;
  max-width: 150px;
}

.tactical-node:hover {
  /* Hover 向上飄移至 65px 高空並微幅放大 */
  transform: translate(calc(-50% + var(--nx, 0px)), calc(-50% + var(--ny, 0px))) rotateZ(12deg) rotateX(-55deg) translateZ(65px) scale(1.08) !important;
  z-index: 10;
}

.tactical-node:hover .tactical-node-inner {
  border-color: var(--accent-gold);
  background: rgba(220, 219, 206, 0.1);
  box-shadow: 0 8px 24px rgba(205, 178, 114, 0.2);
}

.tactical-node.active {
  /* 選中時維持 Billboard 立體姿態，高度設定為 55px */
  transform: translate(calc(-50% + var(--nx, 0px)), calc(-50% + var(--ny, 0px))) rotateZ(12deg) rotateX(-55deg) translateZ(55px) scale(1.04) !important;
  z-index: 100 !important;
}

.tactical-node.active .tactical-node-inner {
  border-color: var(--accent-gold) !important;
  background: rgba(205, 178, 114, 0.08) !important;
  box-shadow: 0 0 15px rgba(205, 178, 114, 0.25);
}

/* 未選中的其他節點變暗、輕微模糊以突出焦點 */
.tactical-node.unfocused {
  opacity: 0.22 !important;
  filter: blur(0.5px) grayscale(40%) !important;
}

.node-id {
  font-size: 8px;
  color: var(--accent-gold);
  margin-bottom: 2px;
  opacity: 0.8;
}

.node-title {
  font-weight: bold;
}

/* 側邊全息破譯面板 ➔ 升級為懸浮科幻大視窗 (置中彈出) */
.decryption-hud-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 680px;
  height: auto;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  background: rgba(18, 18, 16, 0.98);
  border: 1px solid rgba(220, 219, 206, 0.4);
  z-index: 9999; /* 確保懸浮在最上層 */
  /* 初始狀態縮小、淡出隱藏 */
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.95);
  border-radius: 0 !important;
}

.decryption-hud-panel.open {
  /* 啟用狀態，在螢幕中央置中顯現 */
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* 拖曳時即時移動，禁用 transition 緩動 */
.decryption-hud-panel.dragging {
  transition: none !important;
  cursor: grabbing !important;
}

.decryption-hud-header {
  height: 38px;
  border-bottom: 1px solid rgba(220, 219, 206, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  background: rgba(220, 219, 206, 0.05);
  color: var(--yorha-bone);
  flex-shrink: 0;
  border-radius: 0 !important;
  cursor: grab; /* 提示可以拖曳 */
}

/* SVG 連線在聚焦時淡出以解決 Z-Fighting 模糊與橫切文字 */
.tactical-paths-svg.hidden-paths {
  opacity: 0.04 !important;
  filter: blur(0.5px) !important;
  transition: opacity 0.6s ease, filter 0.6s ease !important;
}

/* 教程控制按鈕與模擬器按鈕高畫質對比度優化 */
.hud-control-btn, .btn-sim-action {
  background: rgba(18, 18, 16, 0.9) !important;
  border: 1px solid rgba(220, 219, 206, 0.38) !important;
  color: var(--yorha-bone) !important;
  font-family: var(--font-mono) !important;
  transition: all 0.2s ease !important;
  text-shadow: 0 0 2px rgba(220, 219, 206, 0.3);
  border-radius: 0 !important;
  font-size: 10px !important;
  padding: 6px 14px !important;
}

.hud-control-btn:hover:not(:disabled), .btn-sim-action:hover:not(:disabled) {
  background: var(--yorha-bone) !important;
  color: #121210 !important;
  border-color: var(--yorha-bone) !important;
  box-shadow: 0 0 12px rgba(220, 219, 206, 0.45) !important;
}

.hud-control-btn:disabled {
  opacity: 0.2 !important;
  border-color: rgba(220, 219, 206, 0.12) !important;
  cursor: not-allowed !important;
}

/* 儲存啟用按鈕 active-pulse 發光 */
.btn-sim-action.active-pulse {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 14px rgba(205, 178, 114, 0.45) !important;
  animation: pulse-sim-btn 1.5s infinite;
}

@keyframes pulse-sim-btn {
  0%, 100% { box-shadow: 0 0 6px rgba(205, 178, 114, 0.2); }
  50% { box-shadow: 0 0 16px rgba(205, 178, 114, 0.65); }
}

.decryption-hud-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.hud-close-btn {
  background: none;
  border: none;
  color: rgba(220, 219, 206, 0.6);
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  border-radius: 0 !important;
}

.hud-close-btn:hover {
  color: var(--accent-gold);
  border-color: var(--accent-gold);
  background: rgba(205, 178, 114, 0.05);
}

/* 戰術控制按鈕與字幕進度 */
.subtitle-step-bar {
  border-top: 1px dashed rgba(220, 219, 206, 0.2);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.subtitle-step-header {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-gold);
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.subtitle-step-desc {
  font-size: 9.5px;
  color: var(--yorha-bone);
  line-height: 1.6;
  min-height: 32px;
}

.hud-step-dots {
  font-family: var(--font-mono);
  font-size: 8px;
  color: rgba(220, 219, 206, 0.3);
  letter-spacing: 0.15em;
}

.hud-step-dots span.fill {
  color: var(--accent-gold);
  font-weight: bold;
}

.hud-control-btn {
  border: 1px solid rgba(220, 219, 206, 0.3);
  background: rgba(0, 0, 0, 0.5);
  color: var(--yorha-bone);
  font-family: var(--font-mono);
  font-size: 8px;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 0 !important;
}

.hud-control-btn:hover:not(:disabled) {
  background: var(--yorha-bone);
  color: #121210;
  border-color: var(--yorha-bone);
}

.hud-control-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* RWD 解耦：手機端平攤，關閉 3D 偏轉，面板蓋滿螢幕
   斷點從 1024px 拉高到 1400px：側欄 (w-80=320px) 吃掉版面寬度後，
   剩餘空間在 1024-1400px 之間不夠放 ±329px 的放射狀節點展開，
   會被 .tactical-map-scene 的 overflow:hidden 裁掉節點文字左緣
   (例如「1. System Setup」被裁成「. System Setup」)。拉高斷點讓
   這個寬度區間直接落回已經驗證過的平攤版型，不夠寬時就不用 3D 放射狀。 */
@media (max-width: 1400px) {
  .tactical-radar-map {
    transform: none !important;
    position: relative;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px;
    box-sizing: border-box;
  }
  .radar-grid-bg, .tactical-paths-svg {
    display: none !important;
  }
  .tactical-node {
    position: static !important;
    transform: none !important;
    width: 100%;
  }
  .tactical-node-inner {
    transform: none !important;
    text-align: left;
  }
  .decryption-hud-panel {
    width: calc(100% - 24px) !important;
    right: -110% !important;
    left: 12px;
  }
  .decryption-hud-panel.open {
    right: 12px !important;
  }
}

/* ==========================================
   低效能/減少動態偏好保護
   使用者在作業系統開啟「減少動態效果」時，通常是刻意為了
   效能或暈眩問題設定的，全站所有無限循環動畫一律關閉
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}