:root {
  color-scheme: dark;

  /* --- Official Game Palette (#2F2942 Canvas & #201831 Tooltip with #59449B Border) --- */
  --canvas: #2F2942;
  --canvas-subtle: #252035;
  --surface-base: rgba(32, 24, 49, 0.88);
  --surface-solid: #201831;
  --surface-raised: rgba(47, 41, 66, 0.85);
  --surface-overlay: #201831;
  
  /* Precision Borders & Dividers */
  --border-subtle: rgba(89, 68, 155, 0.25);
  --border-medium: #59449B;
  --border-focus: rgba(142, 114, 230, 0.7);
  --divider: rgba(89, 68, 155, 0.35);

  /* High Legibility Typography Tokens */
  --ink-primary: #f8fafc;
  --ink-secondary: #cbd5e1;
  --ink-muted: #9ba3b8;
  --ink-subtle: #798299;
  --ink-inverse: #201831;

  /* --- Perceptually Uniform OKLCH Faction System --- */
  /* 自然 (Nature): Fresh emerald-lime */
  --faction-nature: oklch(0.78 0.18 135);
  --faction-nature-surface: rgba(126, 227, 82, 0.14);
  --faction-nature-border: rgba(126, 227, 82, 0.35);
  --faction-nature-ink: #071203;

  /* 工學 (Engineering): Crisp technical gold/amber */
  --faction-engineering: oklch(0.82 0.16 85);
  --faction-engineering-surface: rgba(245, 211, 88, 0.14);
  --faction-engineering-border: rgba(245, 211, 88, 0.35);
  --faction-engineering-ink: #140d02;

  /* 魔法 (Magic): Luminescent sapphire blue */
  --faction-magic: oklch(0.72 0.16 250);
  --faction-magic-surface: rgba(93, 160, 255, 0.14);
  --faction-magic-border: rgba(93, 160, 255, 0.35);
  --faction-magic-ink: #030c18;

  /* 秩序 (Order): Elegant moonlit lavender (Calibrated brightness for high contrast) */
  --faction-order: oklch(0.75 0.12 300);
  --faction-order-surface: rgba(186, 166, 224, 0.14);
  --faction-order-border: rgba(186, 166, 224, 0.35);
  --faction-order-ink: #11091a;

  /* 渾沌 (Chaos): Vibrant violet-magenta */
  --faction-chaos: oklch(0.70 0.20 325);
  --faction-chaos-surface: rgba(203, 101, 255, 0.14);
  --faction-chaos-border: rgba(203, 101, 255, 0.35);
  --faction-chaos-ink: #14031a;

  /* Active Node Dynamic Faction Color fallback */
  --node-faction: var(--faction-nature);
  --node-faction-surface: var(--faction-nature-surface);
  --node-faction-border: var(--faction-nature-border);
  --node-faction-ink: var(--faction-nature-ink);

  /* Status Colors */
  --accent: #5da0ff;
  --gold-currency: #f5d358;
  --core-currency: #4cd5ff;
  --positive: #7ee352;
  --danger: #ff5c5c;

  /* Multi-Layer Physical Elevation (Key + Ambient + Inset Glare) */
  --elevation-low: 
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  --elevation-panel: 
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 16px 36px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);

  --elevation-modal:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 12px 32px rgba(0, 0, 0, 0.65),
    0 28px 64px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* Concentric Border Radius Tokens: R_outer = R_inner + Padding (統一對齊 Tooltip 16px 系統) */
  --radius-xs: 4px;
  --radius-sm: 6px;     /* Chips, Pills, Kbd */
  --radius-base: 8px;   /* Small cards, list items, buttons */
  --radius-card: 16px;  /* 統一對齊 Tooltip 弧度：Field containers, detail panels, toolbars */
  --radius-panel: 16px; /* Desktop inspector, minimap card, floating tooltip */
  --radius-sheet: 20px; /* Mobile bottom sheet top radius */

  /* Type Scale Tokens */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro TC", "PingFang TC", "Hiragino Sans TC", "Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Segoe UI", Roboto, sans-serif;
  --font-numeric: "SF Pro Rounded", "Arial Rounded MT Bold", "Google Sans", "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--canvas);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  user-select: none;
  -webkit-user-select: none;
}

button,
input,
svg,
.map-viewport,
.map-scene,
.node,
.filter-chip,
.hud-feature-btn,
.toolbar-button {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  outline: none;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
  user-select: none;
  -webkit-user-select: none;
}

button:focus-visible,
input:focus-visible,
.map-viewport:focus-visible {
  outline: 2px solid var(--faction-magic);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Base App Shell & Micro-Grid Atmosphere */
.app-shell {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  overflow: hidden;
  background: var(--canvas);
}

.app-shell::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background-image: 
    radial-gradient(circle at 50% 15%, rgba(93, 160, 255, 0.04), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, transparent 100%);
}

/* ==========================================================================
   HUD Header & Navigation Bar
   ========================================================================== */
.topbar {
  position: absolute;
  z-index: 40;
  top: 14px;
  right: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 靠右對齊搜尋框 */
  gap: 16px;
  pointer-events: none;
}

.search-block,
.minimap-panel,
.map-toolbar,
.statusbar,
.node-tooltip,
.empty-state {
  pointer-events: auto;
}

/* ==========================================================================
   Search HUD Field & Auto-complete Results (主要色彩改為黑色，保留透明度)
   ========================================================================== */
.search-block {
  position: relative;
  z-index: 50;
  width: min(340px, 38vw);
  min-width: 230px;
}

.search-field {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 6px 0 11px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.72); /* 黑色半透明 */
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card); /* R_outer = 12px */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition-property: border-color, box-shadow, background-color;
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.search-field:focus-within {
  background: rgba(0, 0, 0, 0.88);
  border-color: rgba(93, 160, 255, 0.65);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(93, 160, 255, 0.18);
}

.search-icon-svg {
  flex-shrink: 0;
  color: var(--ink-muted);
}

#search-input {
  min-width: 0;
  height: 100%;
  flex: 1;
  padding: 0 8px;
  color: var(--ink-primary);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 13px;
}

#search-input::placeholder {
  color: var(--ink-subtle);
  opacity: 1;
}

.search-kbd {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1;
}

.icon-button {
  position: relative;
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  padding: 0;
  color: var(--ink-muted);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  transition-property: color, background-color, transform;
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Touch Target Minimum 44px expansion */
.icon-button::after {
  content: "";
  position: absolute;
  inset: -8px;
}

.icon-button:hover {
  color: var(--ink-primary);
  background: rgba(255, 255, 255, 0.08);
}

.icon-button:active,
.toolbar-button:active,
.minimap:active,
.search-result:active,
.node-link-pill:active,
.upgrade-btn:active {
  transform: scale(0.96);
}

.search-results {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 60;
  max-height: min(360px, 48vh);
  margin-top: 0;
  padding: 4px;
  overflow: auto;
  background: var(--surface-solid);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-modal);
  backdrop-filter: blur(18px);
}

.search-result {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  text-align: start;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--radius-base);
  transition-property: background-color, transform;
  transition-duration: 100ms;
  transition-timing-function: ease;
}

.search-result:hover,
.search-result[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.07);
}

.search-result-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  background: var(--result-accent, var(--faction-nature));
  border-radius: 50%;
  box-shadow: 0 0 8px var(--result-accent);
}

.search-result-copy {
  min-width: 0;
  flex: 1;
}

.search-result-title {
  display: block;
  overflow: hidden;
  color: var(--ink-primary);
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-meta {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-status {
  margin: 4px 0 0;
  padding-inline: 4px;
  color: var(--ink-muted);
  font-size: 11px;
  text-align: end;
}

/* ==========================================================================
   Map Viewport & SVG Scene Rendering (Vector Crisp Sharpness at All Scales)
   ========================================================================== */
.map-viewport {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  background: transparent;
}

.map-viewport.is-dragging,
.map-viewport.is-navigating {
  cursor: grabbing;
}

/* 在鏡頭運動（平移、縮放、慣性滑動）期間暫時關閉射線 Hit-Testing，消除每幀重排重繪開銷 */
body.is-navigating .map-scene,
body.is-zooming .map-scene,
.map-viewport.is-dragging .map-scene {
  pointer-events: none !important;
}

body.is-navigating .search-field,
body.is-zooming .search-field,
body.is-navigating .minimap-panel,
body.is-zooming .minimap-panel,
body.is-navigating .map-toolbar,
body.is-zooming .map-toolbar,
body.is-navigating .node-tooltip,
body.is-zooming .node-tooltip {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.map-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 4000px;
  height: 3400px;
  transform-origin: 0 0;
  will-change: transform;
  contain: layout style;
  transform: translate(0px, 0px) scale(1);
}

.map-scene > svg {
  display: block;
  width: 4000px;
  height: 3400px;
  overflow: visible;
  user-select: none;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

.map-scene image,
.map-scene use,
.map-scene foreignObject {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

/* ==========================================================================
   Level of Detail (LOD) & Motion GPU Offloader (運動期間即時卸載高斯濾鏡，保障滿幀 60fps)
   ========================================================================== */
/* 1. 運動期間（平移、縮放、雙指拖曳）與遠景時：全面關閉 200+ 節點的高負擔模糊陰影濾鏡，釋放 90% GPU 負載 */
body.is-navigating .map-scene .node-icon,
body.is-navigating .map-scene .node-icon-deep,
body.is-navigating .map-scene .cost-badge,
body.is-navigating .map-scene .rank-badge,
body.is-navigating .map-scene .guide-label,
body.is-navigating .map-scene .tree-center-tree-icon,
body.is-zooming .map-scene .node-icon,
body.is-zooming .map-scene .node-icon-deep,
body.is-zooming .map-scene .cost-badge,
body.is-zooming .map-scene .rank-badge,
body.is-zooming .map-scene .guide-label,
body.is-zooming .map-scene .tree-center-tree-icon,
.map-viewport.is-dragging .map-scene .node-icon,
.map-viewport.is-dragging .map-scene .node-icon-deep,
.map-viewport.is-dragging .map-scene .cost-badge,
.map-viewport.is-dragging .map-scene .rank-badge,
.map-viewport.is-dragging .map-scene .guide-label,
.map-viewport.is-dragging .map-scene .tree-center-tree-icon,
body.is-low-lod .map-scene .node-icon,
body.is-low-lod .map-scene .node-icon-deep,
body.is-low-lod .map-scene .cost-badge,
body.is-low-lod .map-scene .rank-badge,
body.is-low-lod .map-scene .guide-label,
body.is-low-lod .map-scene .tree-center-tree-icon {
  filter: none !important;
}

/* 運動期間（平移、縮放）與拖曳時：關閉全圖 500+ 元素的 CSS 過渡動畫，釋放主線程與 GPU 頻寬，由 GPU 直接進行 60fps 紋理矩陣變換 */
body.is-navigating .map-scene g.node,
body.is-navigating .map-scene path.edge,
body.is-navigating .map-scene line.edge,
body.is-navigating .map-scene path.tree-center-link,
body.is-zooming .map-scene g.node,
body.is-zooming .map-scene path.edge,
body.is-zooming .map-scene line.edge,
body.is-zooming .map-scene path.tree-center-link,
.map-viewport.is-dragging .map-scene g.node,
.map-viewport.is-dragging .map-scene path.edge,
.map-viewport.is-dragging .map-scene line.edge,
.map-viewport.is-dragging .map-scene path.tree-center-link {
  transition: none !important;
}

/* 確保骰子陰影在任何模式與運動中均維持純黑剪影，絕不消失或變白 */
.map-scene .dice-shadow,
body.is-low-lod .map-scene .dice-shadow {
  filter: brightness(0) saturate(100%) !important;
  opacity: 0.34 !important;
}

/* 2. 次像素反閃爍：遠景時平滑淡化文字描邊，消除黑斑重疊與摩爾紋閃爍，肉眼過渡極致自然 */
body.is-low-lod .map-scene text:not(.is-highlighted-text) {
  stroke-width: 0.35px !important;
  stroke-opacity: 0.3 !important;
}

/* 3. 遠景連線抗碎裂：確保線段在縮小後依然平滑連續，無次像素跳動 */
body.is-low-lod .map-scene path.edge,
body.is-low-lod .map-scene line.edge {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 4. 保留當前選取節點與高亮篩選目標的必要光效 */
body.is-low-lod .map-scene g.node.is-selected,
body.is-low-lod .map-scene g.node.is-filter-matched,
body.is-low-lod .map-scene g.node.is-prereq-active {
  filter: drop-shadow(0 0 10px var(--node-hover-color, #ffffff)) !important;
}

/* SVG Node States & Precise Borders */
/* SVG Node States & Game-Accurate Selection Box (#4692F1 + #7CFAFD Rotating Dual Runners) */
.map-scene .node {
  cursor: pointer;
  outline: none;
  pointer-events: all;
  transition: opacity 140ms ease-out, filter 140ms ease-out;
}

.map-scene path.edge,
.map-scene line.edge,
.map-scene path.tree-center-link {
  transition: opacity 280ms cubic-bezier(0.2, 0, 0, 1), stroke 280ms ease, stroke-width 280ms ease;
  will-change: opacity, stroke, stroke-width;
}

.map-scene .node .node-body {
  transform-box: fill-box;
  transform-origin: center center;
  transition: transform 220ms cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.map-scene .node.is-pressing .node-body {
  transform: scale(0.93) !important;
  transition: transform 120ms cubic-bezier(0.2, 0, 0, 1) !important;
}

.map-scene .node * {
  pointer-events: all;
}

.node-selection-layer {
  display: none;
  pointer-events: none;
  isolation: isolate;
}

.map-scene .node.is-selected .node-selection-layer,
.map-scene .node.is-linked-selected .node-selection-layer {
  display: block;
}

/* 統一所有選取框在物理螢幕上的視覺粗細（以骰子 scale(0.72) 為基準） */
.sel-box-base {
  stroke-width: 3px;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

.sel-box-runner {
  stroke-width: 3.8px;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 10px currentColor);
  will-change: stroke-dashoffset;
}

/* 符文節點等比補償（scale(0.56) 下補償 0.72/0.56 ≈ 1.2857 倍，達到與骰子完全一致的物理粗細） */
g[transform^="scale(0.56)"] .sel-box-base,
.node-type-dice-rune .sel-box-base {
  stroke-width: 3.86px;
}

g[transform^="scale(0.56)"] .sel-box-runner,
.node-type-dice-rune .sel-box-runner {
  stroke-width: 4.89px;
}

@keyframes selRunnerSpin {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: calc(var(--path-len, 360) * -1px);
  }
}

.map-scene .node .node-body rect:first-child {
  transition-property: stroke, stroke-width, stroke-opacity;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

.map-scene .node:hover .node-body rect:first-child,
.map-scene .node.is-hovered .node-body rect:first-child {
  stroke: var(--node-hover-color, #ffffff) !important;
  stroke-width: 4px !important;
  stroke-opacity: 1 !important;
}

.map-scene .node:focus-visible .node-body rect:first-child {
  stroke: var(--node-hover-color, #4692F1) !important;
  stroke-width: 4px !important;
}

/* ==========================================================================
/* ==========================================================================
   Minimap Panel (平常隱藏，僅在拖曳、鏡頭移動、縮放時淡入顯示，停止後延遲淡出)
   ========================================================================== */
.minimap-panel {
  position: absolute;
  z-index: 16;
  top: 14px;
  left: 16px;
  width: 216px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.72); /* 搜尋框一樣的半透明黑色，無毛玻璃 */
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-panel);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  opacity: 0; /* 平常靜止時隱藏淡出 */
  pointer-events: none;
  /* 延後消失：操作停止後延遲 1600ms，再以 750ms 柔和曲線優雅淡出，杜絕硬切 */
  transition: opacity 750ms cubic-bezier(0.16, 1, 0.3, 1) 1600ms;
  will-change: opacity;
}

/* 中央骰子樹圖示陰影收斂：僅在下方有陰影，避免四周一圈發黑 */
.map-scene .tree-center-tree-icon {
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4)) !important;
}

.map-scene .tree-center-base {
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35)) !important;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px 6px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
}

.zoom-readout {
  color: var(--ink-primary);
  font-family: var(--font-numeric);
  font-weight: 750;
  font-size: 11px;
  letter-spacing: -0.01em;
}

.minimap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4000 / 3400;
  padding: 0;
  overflow: hidden;
  cursor: crosshair;
  background: #0b0d13;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base); /* R_inner = 16 - 8 = 8px */
}

.minimap-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.minimap-window {
  position: absolute;
  display: block;
  min-width: 2px;
  min-height: 2px;
  background: rgba(93, 160, 255, 0.18);
  border: 1.5px solid #ffffff;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

/* ==========================================================================
   Map Toolbar (Bottom Right HUD)
   ========================================================================== */
.map-toolbar {
  position: absolute;
  z-index: 35;
  right: 16px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.72); /* 搜尋框一樣的半透明黑色，無毛玻璃 */
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card); /* 12px */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.toolbar-button {
  display: inline-grid;
  min-width: 32px;
  height: 32px;
  place-items: center;
  padding: 0 8px;
  color: var(--ink-primary);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: var(--radius-base); /* R_inner = 12 - 4 = 8px */
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  transition-property: color, background-color, border-color, transform;
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.toolbar-button-wide {
  min-width: 44px;
  font-size: 11px;
  font-weight: 700;
}

/* ==========================================================================
   Disclaimer & Copyright Widget (Bottom Left HUD - Emil Fluid Morphing)
   ========================================================================== */
.disclaimer-widget {
  position: absolute;
  z-index: 35;
  left: 16px;
  bottom: 34px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: block;
  transform-origin: bottom left;
  transition: width 340ms cubic-bezier(0.16, 1, 0.3, 1),
              height 340ms cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 340ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 240ms ease,
              border-color 240ms ease,
              box-shadow 240ms ease;
  will-change: width, height, border-radius;
}

.disclaimer-toggle-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #ffffff;
  border-radius: 50%;
  outline: none;
  opacity: 1;
  transition: opacity 160ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.disclaimer-question-icon {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  opacity: 0.92;
  transition: transform 180ms ease, opacity 140ms ease;
  user-select: none;
}

.disclaimer-toggle-btn:hover .disclaimer-question-icon {
  transform: scale(1.12);
  opacity: 1;
}

.disclaimer-toggle-btn:active {
  transform: scale(0.94);
}

/* 內層卡片容器：寬度絕對固定，絕不隨外框過渡縮放而重排文字（徹底根除換行撐高 Bug） */
.disclaimer-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 396px;
  height: auto;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 180ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(6px);
}

.disclaimer-card-inner {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 展開狀態 (長方形圓角卡片) */
.disclaimer-widget.is-expanded {
  width: min(396px, calc(100vw - 32px));
  height: 345px;
  border-radius: var(--radius-panel); /* 16px 統一對齊 Tooltip */
  background: rgba(14, 11, 22, 0.92);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 1px 1px rgba(255, 255, 255, 0.12);
}

.disclaimer-widget.is-expanded .disclaimer-toggle-btn {
  opacity: 0;
  pointer-events: none;
}

.disclaimer-widget.is-expanded .disclaimer-card {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 90ms;
}

.disclaimer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.disclaimer-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.disclaimer-badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: var(--radius-sm);
  background: rgba(69, 145, 240, 0.2);
  color: #6bb0ff;
  border: 1px solid rgba(69, 145, 240, 0.4);
}

.disclaimer-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.disclaimer-close-btn {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.disclaimer-close-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.disclaimer-close-btn:active {
  transform: scale(0.96);
}

.disclaimer-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.disclaimer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.disclaimer-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84);
}

.disclaimer-bullet {
  color: #4591f0;
  font-size: 10px;
  margin-top: 2px;
  flex-shrink: 0;
}

.disclaimer-item-text strong {
  color: #ffffff;
  font-weight: 600;
}

.disclaimer-contact-box {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.disclaimer-takedown-notice {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.68);
  font-style: italic;
}

.disclaimer-inline-link {
  color: #7ab8ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.disclaimer-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.disclaimer-contact-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.disclaimer-email-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: #8ec3ff;
  background: rgba(69, 145, 240, 0.12);
  border: 1px solid rgba(69, 145, 240, 0.28);
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease;
}

.disclaimer-email-link:hover {
  background: rgba(69, 145, 240, 0.22);
  border-color: rgba(69, 145, 240, 0.5);
  color: #ffffff;
  transform: translateY(-1px);
}

.disclaimer-email-link:active {
  transform: scale(0.96);
}

.toolbar-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-subtle);
}

.toolbar-divider {
  width: 1px;
  height: 16px;
  margin: 0 2px;
  background: var(--divider);
}

.toolbar-button-mobile {
  display: none;
}

/* Statusbar */
.statusbar {
  position: absolute;
  z-index: 14;
  right: 16px;
  bottom: 10px;
  left: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink-muted);
  font-size: 11px;
  pointer-events: none;
}

.status-shortcuts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.status-shortcuts kbd {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 9.5px;
}

/* ==========================================================================
   Badges, Chips & Faction Accents (WCAG AAA High-Contrast Text)
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.branch-badge {
  color: var(--node-faction-ink, #071203);
  background: var(--node-faction, var(--faction-nature));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.type-badge {
  color: var(--ink-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
}

.rank-badge {
  color: var(--gold-currency);
  background: rgba(245, 211, 88, 0.12);
  border: 1px solid rgba(245, 211, 88, 0.28);
}

/* ==========================================================================
   Inspector / Node Detail HUD (Docked Right on Desktop / Bottom Sheet on Mobile)
   ========================================================================== */
/* ==========================================================================
   Contextual Floating Node Tooltip (Smart Anchored, High Legibility Bold & Large)
   ========================================================================== */
.node-tooltip {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  width: min(440px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 80px));
  display: flex;
  flex-direction: column;
  overflow: visible;
  color: var(--ink-primary);
  background: #1e172e;
  border: 3px solid #5a3fa2;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 25%;
}

/* Tooltip 正下方水平中心小三角形 */
.node-tooltip::after {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 10px solid #5a3fa2;
  pointer-events: none;
  z-index: 1;
}

/* Tooltip 出現動畫 */
@keyframes tooltip-spring-enter {
  0% {
    opacity: 0;
    transform: scale(0.35, 0.75);
  }
  62% {
    opacity: 1;
    transform: scale(1.045, 1.015);
  }
  82% {
    transform: scale(0.985, 0.995);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* Tooltip 消失動畫 */
@keyframes tooltip-scale-exit {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  30% {
    opacity: 0.95;
    transform: scale(0.92);
  }
  100% {
    opacity: 0;
    transform: scale(0.28);
  }
}

.node-tooltip.is-active {
  opacity: 1;
  pointer-events: auto;
}

.node-tooltip.is-entering {
  transform-origin: 50% 25%;
  animation: tooltip-spring-enter 260ms cubic-bezier(0.18, 0.9, 0.3, 1.15) forwards;
}

.node-tooltip.is-closing {
  pointer-events: none;
  transform-origin: 50% 85%;
  animation: tooltip-scale-exit 140ms cubic-bezier(0.4, 0, 0.9, 0.4) forwards;
}

/* Tooltip 智慧避讓：置於下方時（小三角形位於頂部朝上，由頂部展開） */
.node-tooltip.is-placed-below::after {
  top: auto;
  bottom: calc(100% + 3px);
  border-top: none;
  border-bottom: 10px solid #5a3fa2;
}

.node-tooltip.is-placed-below.is-entering {
  transform-origin: 50% 0%;
}

.node-tooltip.is-placed-below.is-closing {
  transform-origin: 50% 15%;
}

/* Tooltip Header */
.tooltip-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 10px;
  border-bottom: 1px solid rgba(151, 137, 174, 0.2);
}

.tooltip-heading {
  min-width: 0;
  flex: 1;
  padding-right: 8px;
}

.tooltip-title {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.tooltip-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* 非骰子節點（符文、被動、支援等）：標題、徽章與內文一律居中對齊 */
.node-tooltip.is-non-dice .tooltip-header {
  justify-content: center;
}

.node-tooltip.is-non-dice .tooltip-heading {
  padding-right: 0;
  text-align: center;
}

.node-tooltip.is-non-dice .tooltip-title {
  text-align: center;
}

.node-tooltip.is-non-dice .tooltip-badges {
  justify-content: center;
}

.tooltip-badges .badge {
  font-size: 13.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
}

.tooltip-badges .branch-badge {
  background: var(--node-faction, #a83af0);
  color: #ffffff;
  border: none;
}

/* 階級標籤（深灰棕底、粗體白字） */
.tooltip-badges .rank-badge {
  background: #5a4e52 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 6px;
  font-family: var(--font-numeric);
  letter-spacing: -0.01em;
}

/* Tooltip 3 系列 PNG 圖示 */
.tooltip-dice-visual {
  position: relative;
  width: 80px;
  height: 44px;
  flex: 0 0 80px;
  pointer-events: none;
}

.tooltip-dice-img {
  position: absolute;
  right: -8px;
  top: -19px;
  width: 108px;
  height: 108px;
  transform: translateY(-33.33%);
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.tooltip-dice-img[hidden] {
  display: none !important;
}

/* Tooltip Body & Sections */
.tooltip-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.section-label {
  color: #9789AE;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.detail-copy {
  margin: 0;
  color: #9789AE; /* 遊戲內指定說明文案色 */
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.55;
  overflow-wrap: break-word;
}

.node-tooltip.is-non-dice .detail-copy {
  text-align: center;
}

.node-tooltip.is-dice-node .detail-copy {
  text-align: left;
}

/* 內文中標籤對應詞彙（白色文字 + 底線 + 可點擊） */
.tooltip-tag-inline {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  font-weight: 800;
  cursor: pointer;
  transition: color 120ms ease;
}

.tooltip-tag-inline:hover {
  color: #ffd859;
}

/* 綠色升級增量文字 */
.stat-green-add {
  color: #4cd964;
  font-weight: 800;
  font-family: var(--font-numeric);
  letter-spacing: -0.01em;
}

/* 下方 #標籤 晶片列 */
.tooltip-hashtag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.node-tooltip.is-non-dice .tooltip-hashtag-row {
  justify-content: center;
}

.node-tooltip.is-dice-node .tooltip-hashtag-row {
  justify-content: flex-start;
}

.tooltip-hashtag-chip {
  background: #ea7a28;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(234, 122, 40, 0.35);
  transition: transform 120ms ease, filter 120ms ease;
}

.tooltip-hashtag-chip:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.tooltip-hashtag-chip:active {
  transform: scale(0.96);
}

/* 分割線 */
.tooltip-divider {
  border: none;
  border-top: 1.5px solid rgba(151, 137, 174, 0.25);
  margin: 12px 0 10px;
}

/* 骰子專屬 2 欄式屬性網格 */
.dice-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 12px;
}

.dice-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dice-stat-icon-box {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  background: #362c4b;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.dice-stat-icon-box img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.dice-stat-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  justify-content: center;
}

.dice-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: #9789AE;
  line-height: 1.2;
}

.dice-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-top: 1px;
  font-family: var(--font-numeric);
  letter-spacing: -0.01em;
  font-variant-numeric: proportional-nums;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 3px;
}

.stat-base-val {
  color: #ffffff;
  white-space: nowrap;
}

.stat-bonus-val {
  font-size: 18px;
  font-weight: 800;
  font-family: var(--font-numeric);
  letter-spacing: -0.01em;
  font-variant-numeric: proportional-nums;
  display: inline-block;
  white-space: nowrap;
  transition: opacity 180ms ease, transform 180ms ease;
  will-change: opacity, transform;
}

.stat-bonus-val:not([hidden]) {
  animation: bonus-pop-fade 220ms cubic-bezier(0.18, 0.9, 0.3, 1.15) forwards;
}

@keyframes bonus-pop-fade {
  0% {
    opacity: 0.2;
    transform: scale(0.82) translateY(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.stat-bonus-val.is-gold {
  color: #ffd859;
}

.stat-bonus-val.is-purple {
  color: #a875ff;
}

/* 骰子底部切換操作列（強化 / 提升骰點） */
.dice-upgrade-action-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
  width: 100%;
}

.dice-upgrade-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  background: rgba(43, 33, 66, 0.9);
  border: 1.5px solid rgba(138, 106, 214, 0.45);
  border-radius: var(--radius-sm); /* 6px 對齊專案規範 */
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  transition: all 140ms ease;
  user-select: none;
}

.dice-upgrade-btn:hover {
  background: rgba(65, 48, 102, 0.95);
  border-color: rgba(186, 126, 255, 0.7);
  transform: translateY(-1px);
}

.dice-upgrade-btn:active {
  transform: scale(0.97);
}

.dice-upgrade-btn.is-active {
  background: #6c42db;
  border-color: #ba7eff;
  box-shadow: 0 0 14px rgba(168, 109, 245, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* 標籤詳細解釋微型浮窗 (Tag Popover) */
.tag-popover {
  position: fixed;
  z-index: 45;
  background: #181224;
  border: 2px solid #ea7a28;
  border-radius: var(--radius-panel); /* 16px 統一對齊 Tooltip */
  padding: 12px 14px;
  max-width: 280px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #ffffff;
  pointer-events: auto;
  animation: popover-spring-enter 160ms ease-out forwards;
}

@keyframes popover-spring-enter {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.tag-popover-header {
  margin-bottom: 6px;
}

.tag-popover-badge {
  background: #ea7a28;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  display: inline-block;
}

.tag-popover-desc {
  font-size: 13.5px;
  font-weight: 600;
  color: #d8d0ea;
  line-height: 1.45;
  margin: 0;
}

/* Compact Stats Row */
.stat-compact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.stat-compact-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e4e7f0;
  font-weight: 600;
}

.stat-compact-item .stat-label {
  color: #9789AE;
  font-size: 13.5px;
  font-weight: 700;
}

.stat-compact-item .stat-value {
  color: #ffffff;
  font-weight: 800;
  font-family: var(--font-mono);
}

/* Meta Footer Line (Cost & Prerequisite) */
.tooltip-meta-box {
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px; /* 放大 50% */
  font-weight: 600;
}

.meta-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-secondary);
  font-size: 16px;
  font-weight: 600;
}

.meta-cost {
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.currency-icon-svg {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: -3px;
  margin-inline-end: 2px;
  flex-shrink: 0;
  overflow: visible;
  filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, 0.45));
}

.node-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  color: #ffffff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm); /* 6px 統一對齊篩選與膠囊按鈕弧度 */
  font-size: 15px;
  font-weight: 700;
  transition-property: background-color, color, border-color, transform;
  transition-duration: 100ms;
}

.node-link-pill:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
}

.node-link-pill:active {
  transform: scale(0.96);
}

/* ==========================================================================
   Rank Slider Widget (長膠囊滑軌 + 橢圓形微互動滑塊，遵循 better-colors 和諧紫金調色)
   ========================================================================== */
.rank-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(38, 30, 58, 0.75);
  border: 1px solid rgba(138, 106, 214, 0.35);
  border-radius: var(--radius-card); /* 16px 對齊 Tooltip */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.3);
  margin-top: 4px;
}

.slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-secondary);
}

.slider-title {
  color: #9789AE;
  font-size: 12.5px;
}

.slider-rank-display {
  color: #f7f4ff;
  font-family: var(--font-numeric);
  font-size: 13px;
  letter-spacing: -0.01em;
}

.slider-rank-current {
  color: #fce38a;
  font-size: 15.5px;
  font-weight: 800;
  font-family: var(--font-numeric);
}

.slider-track-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  height: 28px; /* 寬裕高度容納雙倍大滑塊破格效果 */
}

/* 核心 input[type="range"] 跨瀏覽器樣式重置 (長膠囊滑軌 + 微橡皮筋拉伸) */
.rank-slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: linear-gradient(to right, #8c5af2 0%, #ba7eff var(--slider-pct, 0%), rgba(20, 15, 32, 0.88) var(--slider-pct, 0%), rgba(20, 15, 32, 0.88) 100%);
  border-radius: 9999px; /* 長膠囊型滑軌 */
  border: 1px solid rgba(186, 126, 255, 0.3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
  outline: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  transform: translateX(calc(var(--overshoot-x, 0px) * 0.25));
  transition: background 60ms linear, transform 0s;
}

.rank-slider-input.is-springing {
  transition: background 60ms linear, transform 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Webkit (Chrome, Edge, Safari) 橢圓形滑塊 */
.rank-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 12px;
  border-radius: 9999px; /* 橫向橢圓形滑塊 */
  background: #fdfcff;
  border: 2px solid #7545de;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 8px rgba(186, 126, 255, 0.5);
  cursor: grab;
  transform-origin: center center;
  transform: translateX(var(--overshoot-x, 0px)) scale(1.0);
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

/* 懸停狀態：滑塊微幅放大 */
.rank-slider-input:hover::-webkit-slider-thumb {
  transform: translateX(var(--overshoot-x, 0px)) scale(1.3);
  background: #ffffff;
  border-color: #8c5af2;
  box-shadow: 0 0 12px rgba(203, 145, 255, 0.8), 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* 按住/拖曳狀態：變成 2 倍大 (Scale 2.0) 且無延遲跟隨阻尼拉伸！ */
.rank-slider-input:active::-webkit-slider-thumb,
.rank-slider-input.is-dragging::-webkit-slider-thumb {
  cursor: grabbing;
  transform: translateX(var(--overshoot-x, 0px)) scale(2.0);
  background: #ffffff;
  border-color: #ab6cf7;
  box-shadow: 0 0 18px rgba(203, 145, 255, 0.95), 0 0 32px rgba(171, 108, 247, 0.6), 0 4px 12px rgba(0, 0, 0, 0.7);
  transition: transform 0s, box-shadow 160ms ease, background-color 160ms ease;
}

/* 釋放回彈彈簧動畫狀態 */
.rank-slider-input.is-springing::-webkit-slider-thumb {
  transition: transform 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 200ms ease;
}

/* Firefox 橢圓形滑塊 */
.rank-slider-input::-moz-range-thumb {
  width: 18px;
  height: 12px;
  border-radius: 9999px;
  background: #fdfcff;
  border: 2px solid #7545de;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 8px rgba(186, 126, 255, 0.5);
  cursor: grab;
  transform-origin: center center;
  transform: translateX(var(--overshoot-x, 0px)) scale(1.0);
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.rank-slider-input:hover::-moz-range-thumb {
  transform: translateX(var(--overshoot-x, 0px)) scale(1.3);
  background: #ffffff;
  border-color: #8c5af2;
  box-shadow: 0 0 12px rgba(203, 145, 255, 0.8), 0 2px 8px rgba(0, 0, 0, 0.6);
}

.rank-slider-input:active::-moz-range-thumb,
.rank-slider-input.is-dragging::-moz-range-thumb {
  cursor: grabbing;
  transform: translateX(var(--overshoot-x, 0px)) scale(2.0);
  background: #ffffff;
  border-color: #ab6cf7;
  box-shadow: 0 0 18px rgba(203, 145, 255, 0.95), 0 0 32px rgba(171, 108, 247, 0.6), 0 4px 12px rgba(0, 0, 0, 0.7);
  transition: transform 0s, box-shadow 160ms ease, background-color 160ms ease;
}

.rank-slider-input.is-springing::-moz-range-thumb {
  transition: transform 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 200ms ease;
}

.rank-slider-input::-moz-range-track {
  height: 8px;
  background: transparent;
  border: none;
}

.slider-cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
}

.slider-cost-label {
  color: #9789AE;
}

.slider-cost-value {
  color: #f7f4ff;
  font-family: var(--font-numeric);
  font-weight: 750;
  letter-spacing: -0.01em;
  font-variant-numeric: proportional-nums;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.slider-rank-current {
  color: #fce38a;
  font-size: 15px;
  font-weight: 800;
  display: inline-block;
}

/* Empty State */
.empty-state {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: var(--ink-secondary);
  background: var(--surface-solid);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-base);
  box-shadow: var(--elevation-modal);
  transform: translate(-50%, -50%);
  font-size: 13px;
}

[hidden] {
  display: none !important;
}

/* ==========================================================================
   Mobile Responsive Viewport (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .topbar {
    top: 8px;
    right: 10px;
    left: 10px;
    gap: 8px;
  }

  .brand-block {
    margin-left: 0;
  }

  .subtitle {
    display: none;
  }

  h1#page-title {
    font-size: 16px;
  }

  .topbar {
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    width: auto;
    padding: 0;
    justify-content: flex-start;
    pointer-events: none;
    z-index: 50;
  }

  .search-block {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    pointer-events: auto;
  }

  /* 手機版搜尋按鈕：40px 舒適大按鈕，點擊展開為膠囊 */
  .search-field {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    overflow: hidden;
    justify-content: center;
    transition: width 280ms cubic-bezier(0.16, 1, 0.3, 1), flex-basis 280ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .search-icon-svg {
    flex: 0 0 40px;
    width: 18px;
    height: 18px;
    color: #ffffff !important;
    stroke: #ffffff !important;
    stroke-width: 2.4;
    margin: 0;
  }

  #search-input {
    opacity: 0;
    width: 0;
    padding: 0;
    font-size: 13px;
    pointer-events: none;
    transition: opacity 160ms ease, width 280ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .search-field.is-expanded,
  .search-field:focus-within {
    flex: 0 0 min(200px, 50vw);
    width: min(200px, 50vw);
    border-radius: 20px;
    padding: 0 8px 0 0;
    justify-content: flex-start;
  }

  .search-field.is-expanded #search-input,
  .search-field:focus-within #search-input {
    opacity: 1;
    width: 100%;
    padding: 0 6px;
    pointer-events: auto;
  }

  .search-kbd {
    display: none;
  }

  /* 手機版篩選：最頂部單排寬裕導航軌（高度 40px，按鈕寬大極易點擊） */
  .filter-bar {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    margin-top: 0 !important;
    padding: 3px 6px;
    gap: 5px;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  }

  .filter-bar::-webkit-scrollbar {
    display: none;
  }

  .filter-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  .filter-chip {
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 700;
    height: 30px;
    line-height: 24px;
    flex-shrink: 0;
    white-space: nowrap;
    border-radius: 7px;
  }

  .filter-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.18);
    margin: 0 2px;
    flex-shrink: 0;
  }

  .filter-clear-btn {
    padding: 3px 8px;
    font-size: 11px;
    height: 30px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .search-status {
    display: none !important;
  }

  /* 手機端小地圖：完全維持原版自動感知淡入淡出邏輯，不搞另類開關 */
  .minimap-panel {
    top: calc(max(8px, env(safe-area-inset-top)) + 46px);
    left: 10px;
    right: auto;
    bottom: auto;
    width: 140px;
    padding: 5px;
  }

  .disclaimer-widget {
    left: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: 34px;
    height: 34px;
  }

  .disclaimer-toggle-btn {
    width: 34px;
    height: 34px;
  }

  .disclaimer-card {
    width: calc(100vw - 20px);
  }

  .disclaimer-card-inner {
    padding: 14px 16px;
    gap: 10px;
  }

  .disclaimer-widget.is-expanded {
    left: 10px;
    right: 10px;
    width: calc(100vw - 20px);
    height: 380px;
    max-width: none;
    z-index: 50;
  }

  .disclaimer-question-icon {
    font-size: 15px;
  }

  .map-toolbar {
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    padding: 3px;
    gap: 3px;
  }

  .toolbar-button {
    min-width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .toolbar-button-wide {
    min-width: 38px;
    font-size: 10.5px;
  }

  .statusbar {
    display: none;
  }

  /* 手機版 HUD 充足點擊熱區 */
  .hud-toggle-group {
    right: 10px;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 44px);
    gap: 8px;
  }

  .hud-feature-btn {
    padding: 4px;
    border-radius: 8px;
  }

  .hud-checkbox-box {
    width: 24px;
    height: 24px;
  }

  .hud-feature-label {
    font-size: 9.5px;
  }

  /* 手機端 Tooltip：100% 共用電腦版定位與動畫，尺寸再縮小更精巧 */
  .node-tooltip {
    width: min(290px, calc(100vw - 32px));
    max-height: min(460px, calc(100vh - 120px));
    border-width: 2.5px;
    border-radius: 16px; /* 統一對齊 16px */
  }

  .tooltip-header {
    padding: 10px 12px 8px;
  }

  .tooltip-title {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .tooltip-badges .badge {
    font-size: 11.5px;
    padding: 1.5px 6px;
    height: 18px;
  }

  .tooltip-dice-visual {
    width: 64px;
    height: 36px;
    flex: 0 0 64px;
  }

  .tooltip-dice-img {
    width: 86px;
    height: 86px;
    right: -4px;
    top: -12px;
  }

  .tooltip-body {
    padding: 10px 12px 12px;
    gap: 10px;
    max-height: calc(min(460px, calc(100vh - 120px)) - 56px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .section-label {
    font-size: 11.5px;
  }

  .detail-copy {
    font-size: 15px;
    line-height: 1.35;
  }

  .stat-grid {
    gap: 5px;
  }

  .dice-stat-grid {
    gap: 8px 8px;
  }

  .dice-stat-icon-box {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 6px;
  }

  .dice-stat-icon-box img {
    width: 20px;
    height: 20px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ==========================================================================
   HUD Feature Toggle Controls (Check Currency & Prerequisite Path Tracker)
   ========================================================================== */
.hud-toggle-group {
  position: absolute;
  right: 16px;
  bottom: 88px; /* 16px + 46px (toolbar) + 26px 寬裕安全間隔，絕對不重疊 */
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: auto;
}

.hud-feature-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 58px;
  height: 60px;
  box-sizing: border-box;
  padding: 6px 4px 5px;
  color: #ffffff;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.72); /* 搜尋框一樣的半透明黑色，無毛玻璃 */
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px; /* 圓角方形 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  overflow: visible; /* 允許大綠勾與文字自由超出 */
  transition: background-color 120ms, transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hud-feature-btn:hover {
  background: rgba(0, 0, 0, 0.85);
}

.hud-feature-btn:active,
.hud-feature-btn.is-pressing {
  background: rgba(0, 0, 0, 0.92);
  transform: scale(0.92) !important;
  transition: transform 50ms ease-out !important;
}

.hud-checkbox-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.65); /* 半透明黑色背景 */
  border: 2px solid #6D48C2;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  overflow: visible; /* 允許大勾超出邊界 */
  transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hud-feature-btn:active .hud-checkbox-box,
.hud-feature-btn.is-pressing .hud-checkbox-box {
  transform: scale(0.88) !important;
}

.hud-check-icon {
  position: absolute;
  top: -11px; /* 綠勾再上移，更鮮明突出 */
  left: -1px;
  width: 32px;
  height: 32px;
  opacity: 0;
  pointer-events: none;
  overflow: visible;
  transition: opacity 120ms ease;
}

.hud-feature-btn.is-active .hud-check-icon,
.hud-checkbox-box.is-checked .hud-check-icon,
.hud-feature-btn[aria-pressed="true"] .hud-check-icon {
  opacity: 1 !important;
  filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.85));
}

.hud-feature-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-align: center;
  line-height: 1.1;
  white-space: nowrap; /* 自由超出，絕不折行 */
  user-select: none;
  overflow: visible;
  margin-top: auto; /* 下移到底部對齊 */
  padding-bottom: 1px;
}

/* ==========================================================================
   Node Currency Badges on Canvas (Smart Toggleable)
   ========================================================================== */
.node-currency-badge,
.map-scene .cost-badge {
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.25, 1, 0.5, 1);
}

body.show-currency-badges .node-currency-badge,
body.show-currency-badges .map-scene .cost-badge {
  opacity: 1;
}

.map-scene .cost-badge text.is-special-cost-text,
.map-scene .cost-badge.is-special-cost-badge text {
  text-anchor: middle !important;
}

/* ==========================================================================

/* ==========================================================================
   UI Controls Always Visible & Minimap Motion Overlay
   ========================================================================== */
/* 永久隱藏左下角無意義狀態提示 */
#interaction-status,
.interaction-status {
  display: none !important;
}

.topbar {
  opacity: 1 !important;
  pointer-events: none !important;
}

.search-block,
.map-toolbar,
.hud-toggle-group {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 小地圖在拖曳、鏡頭移動、縮放、進場展示、或滑鼠懸停時即刻浮現並保持可見 */
body.is-zooming #minimap-panel,
body.is-navigating #minimap-panel,
body.is-minimap-active #minimap-panel,
#minimap-panel:hover {
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 120ms cubic-bezier(0.16, 1, 0.3, 1) 0ms !important;
}

/* Tooltip 在選取後始終保持完全清晰可見，絕不暫時隱藏 */
#tooltip.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   Filter Bar & Multi-dimensional Highlighting
   ========================================================================== */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.72); /* 搜尋框一樣的半透明黑色，無毛玻璃 */
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-panel); /* 16px 統一對齊 Tooltip */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.filter-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 2px;
}

.filter-chip {
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #a19db3;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

.filter-chip:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
}

.filter-chip:active {
  transform: scale(0.94);
}

.filter-chip.is-selected {
  color: #ffffff !important;
  background: var(--chip-color, #6d48c2) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 0 10px var(--chip-color, rgba(109, 72, 194, 0.7));
}

.filter-chip.type-chip.is-selected {
  background: #5046e5 !important;
  box-shadow: 0 0 10px rgba(80, 70, 229, 0.7);
}

.filter-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 80ms ease;
  margin-left: 2px;
}

.filter-clear-btn:hover {
  background: rgba(239, 68, 68, 0.28);
  color: #ffffff;
}

.filter-clear-btn:active {
  transform: scale(0.94);
}

/* ==========================================================================
   Unified Canvas Focus & Topology Highlighting System (Filter, Search & Prerequisite)
   ========================================================================== */
/* 1. 畫布全局暗化：在篩選、搜尋或前置路徑模式下，非匹配節點平滑暗化為 0.12 */
body.has-active-filter .map-scene g.node,
body.has-search-active .map-scene g.node,
body.has-prereq-highlight .map-scene g.node {
  opacity: 0.12;
  transition: opacity 140ms ease-out;
}

/* 2. 匹配/目標節點高亮：純淨白光/陣營光暈，透明度 1.0 */
body.has-active-filter .map-scene g.node.is-filter-matched,
body.has-search-active .map-scene g.node.is-search-matched,
body.has-prereq-highlight .map-scene g.node.is-prereq-active,
body.has-prereq-highlight .map-scene g.node.is-prereq-target {
  opacity: 1 !important;
  filter: drop-shadow(0 0 12px var(--node-hover-color, #ffffff)) !important;
}

/* 2.1 前置節點模式覆蓋：僅在同派系（或無篩選模式）時，非前置路徑上的節點才強制暗化；若顯示其他派系的前置節點，當前篩選派系保持點亮 */
body.has-prereq-highlight.prereq-overrides-filter .map-scene g.node:not(.is-prereq-active):not(.is-prereq-target) {
  opacity: 0.12 !important;
  filter: none !important;
}

/* 3. 畫布連線暗化：非匹配/非活躍連線平滑暗化為 0.08 */
body.has-active-filter .map-scene path.edge,
body.has-active-filter .map-scene line.edge,
body.has-active-filter .map-scene path.tree-center-link,
body.has-search-active .map-scene path.edge,
body.has-search-active .map-scene line.edge,
body.has-search-active .map-scene path.tree-center-link,
body.has-prereq-highlight .map-scene path.edge,
body.has-prereq-highlight .map-scene line.edge,
body.has-prereq-highlight .map-scene path.tree-center-link {
  opacity: 0.08;
  transition: opacity 140ms ease-out;
}

/* 4. 活躍分支/前置連線高亮：乾淨清晰的白銀光澤 (2.2px, 0.8 opacity) */
body.has-active-filter .map-scene path.edge.is-filter-edge,
body.has-active-filter .map-scene line.edge.is-filter-edge,
body.has-active-filter .map-scene path.tree-center-link.is-filter-edge,
body.has-search-active .map-scene path.edge.is-search-edge,
body.has-search-active .map-scene line.edge.is-search-edge,
body.has-search-active .map-scene path.tree-center-link.is-search-edge,
body.has-prereq-highlight .map-scene path.edge.is-prereq-edge,
body.has-prereq-highlight .map-scene line.edge.is-prereq-edge,
body.has-prereq-highlight .map-scene path.tree-center-link.is-prereq-edge {
  opacity: 0.8 !important;
  stroke: rgba(255, 255, 255, 0.75) !important;
  stroke-width: 2.2px !important;
  filter: none !important;
}

/* 4.1 前置連線覆蓋：僅在同派系（或無篩選模式）時，非前置連線才強制暗化 */
body.has-prereq-highlight.prereq-overrides-filter .map-scene path.edge:not(.is-prereq-edge),
body.has-prereq-highlight.prereq-overrides-filter .map-scene line.edge:not(.is-prereq-edge),
body.has-prereq-highlight.prereq-overrides-filter .map-scene path.tree-center-link:not(.is-prereq-edge) {
  opacity: 0.08 !important;
  stroke-width: 1.2px !important;
  filter: none !important;
}

/* 5. 中央陣營標記、名稱與數值：預設暗化，活躍分支保持點亮 */
.map-scene .tree-center-stat-mark,
.map-scene text.tree-center-stat-name,
.map-scene text.tree-center-stat-value {
  transition: opacity 200ms ease;
}

body.has-active-filter .map-scene .tree-center-stat-mark,
body.has-active-filter .map-scene text.tree-center-stat-name,
body.has-active-filter .map-scene text.tree-center-stat-value,
body.has-search-active .map-scene .tree-center-stat-mark,
body.has-search-active .map-scene text.tree-center-stat-name,
body.has-search-active .map-scene text.tree-center-stat-value,
body.has-prereq-highlight .map-scene .tree-center-stat-mark,
body.has-prereq-highlight .map-scene text.tree-center-stat-name,
body.has-prereq-highlight .map-scene text.tree-center-stat-value {
  opacity: 0.08;
}

body.has-active-filter .map-scene text.tree-center-stat-name.is-branch-active,
body.has-active-filter .map-scene text.tree-center-stat-value.is-branch-active,
body.has-search-active .map-scene text.tree-center-stat-name.is-branch-active,
body.has-search-active .map-scene text.tree-center-stat-value.is-branch-active,
body.has-prereq-highlight .map-scene text.tree-center-stat-name.is-branch-active,
body.has-prereq-highlight .map-scene text.tree-center-stat-value.is-branch-active {
  opacity: 1 !important;
}

body.has-active-filter .map-scene .tree-center-stat-mark.is-branch-active,
body.has-search-active .map-scene .tree-center-stat-mark.is-branch-active,
body.has-prereq-highlight .map-scene .tree-center-stat-mark.is-branch-active {
  opacity: 0.5 !important;
}

/* ==========================================================================
   Taste Skill: Monochrome Light & Void Dice Loader (黑白光影大字體粗進度條開場)
   ========================================================================== */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050508;
  overflow: hidden;
  user-select: none;
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  transition: 
    opacity 420ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-screen.is-loaded {
  opacity: 0;
  transform: scale(1.05);
  filter: blur(8px);
  pointer-events: none;
}

.loading-screen.is-hidden {
  display: none !important;
}

.loader-backdrop {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.04) 0%, transparent 40%);
  pointer-events: none;
}

.loader-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* --- 3D Rotating Monochrome Quantum Dice Stage --- */
.loader-dice-stage {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 700px;
}

.loader-ambient-glow {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 70%);
  filter: blur(16px);
  animation: pulseAmbient 2.2s ease-in-out infinite alternate;
}

@keyframes pulseAmbient {
  0% { transform: scale(0.85); opacity: 0.45; }
  100% { transform: scale(1.25); opacity: 0.95; }
}

.loader-energy-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.energy-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
}

.energy-ring.ring-1 {
  width: 130px;
  height: 130px;
  border-top-color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
  animation: ringSpin 3s linear infinite;
}

.energy-ring.ring-2 {
  width: 100px;
  height: 100px;
  border-left-color: #ffffff;
  border-right-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
  animation: ringSpinReverse 2.2s linear infinite;
}

@keyframes ringSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes ringSpinReverse {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* 3D Isometric Monochrome Dice */
.loader-dice-3d {
  position: relative;
  width: 60px;
  height: 60px;
  transform-style: preserve-3d;
  animation: dice3dRotate 4.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes dice3dRotate {
  0% {
    transform: rotateX(-22deg) rotateY(0deg) rotateZ(0deg);
  }
  50% {
    transform: rotateX(158deg) rotateY(180deg) rotateZ(45deg);
  }
  100% {
    transform: rotateX(338deg) rotateY(360deg) rotateZ(360deg);
  }
}

.dice-face {
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(50, 47, 72, 0.90);
  border: 2px solid #ffffff;
  border-radius: 10px;
  box-shadow: 
    inset 0 0 14px rgba(255, 255, 255, 0.35),
    0 0 16px rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.dice-face::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1.5px dashed rgba(255, 255, 255, 0.35);
  border-radius: 5px;
}

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

.dice-quantum-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 
    0 0 16px #ffffff,
    0 0 32px #ffffff,
    0 0 48px rgba(255, 255, 255, 0.85);
  transform: translateZ(0);
  animation: corePulse 1.8s ease-in-out infinite alternate;
}

@keyframes corePulse {
  0% { transform: scale(0.85); opacity: 0.75; }
  100% { transform: scale(1.3); opacity: 1; }
}

/* --- Loader Typography & Large Bold Progress Bar --- */
.loader-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.loader-brand-title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 6px;
  color: #ffffff;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.65), 0 2px 12px rgba(0, 0, 0, 0.9);
}

.loader-brand-sub {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.82);
  margin-top: -6px;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

.loader-progress-track {
  width: 320px;
  height: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 6px;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.loader-progress-fill {
  width: 0%;
  height: 100%;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 
    0 0 14px rgba(255, 255, 255, 1),
    0 0 26px rgba(255, 255, 255, 0.75);
  transition: width 240ms ease-out;
}

.loader-status-label {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.92);
  min-height: 18px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   Warp Portal Entrance Effect (加載結束四周扭曲縮放進場動態)
   ========================================================================== */
body.app-entering .map-viewport {
  animation: warpSceneEntrance 850ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes warpSceneEntrance {
  0% {
    transform: scale(1.09);
    filter: brightness(1.26) contrast(1.12) saturate(1.16);
  }
  55% {
    filter: brightness(1.05) contrast(1.03);
  }
  100% {
    transform: scale(1);
    filter: brightness(1) contrast(1) saturate(1);
  }
}

/* --- Staggered HUD Control Entrance Animations --- */
body.app-entering .topbar {
  animation: hudSlideDown 550ms 100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.app-entering .minimap-panel {
  animation: hudSlideLeft 550ms 160ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.app-entering .hud-toggle-group {
  animation: hudSlideRight 550ms 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.app-entering .map-toolbar {
  animation: hudSlideUp 550ms 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.app-entering .statusbar {
  animation: hudSlideUp 550ms 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes hudSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hudSlideLeft {
  0% {
    opacity: 0;
    transform: translateX(24px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes hudSlideRight {
  0% {
    opacity: 0;
    transform: translateX(-24px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes hudSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}