/* ============================================================
   Code-Wanderer — 主样式表（CSS 变量 + 全局样式 + 布局）
   ============================================================ */

/* ---- CSS 自定义属性（赛博朋克主题色）---- */
:root {
  --color-primary: #00f0ff;
  --color-primary-dim: #00a0b0;
  --color-primary-glow: rgba(0, 240, 255, 0.4);
  --color-danger: #ff0055;
  --color-danger-glow: rgba(255, 0, 85, 0.4);
  --color-gold: #ffcc00;
  --color-gold-glow: rgba(255, 204, 0, 0.4);
  --color-success: #00ff88;
  --bg-deep: #0a0a1a;
  --bg-panel: rgba(10, 10, 30, 0.75);
  --bg-glass: rgba(15, 15, 40, 0.65);
  --text-primary: #e0e8ff;
  --text-secondary: #8899bb;
  --text-dim: #556688;
  --border-neon: 1px solid rgba(0, 240, 255, 0.3);
  --border-danger: 1px solid rgba(255, 0, 85, 0.4);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
  --font-sans: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---- 全局重置 ---- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- 全屏应用容器 ---- */
#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ---- Canvas 背景层 ---- */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---- UI 层 ---- */
#ui-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}
#ui-layer > * { pointer-events: auto; }

/* ---- 遮罩/弹窗层 ---- */
#overlay-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: none;
}
#overlay-layer > * { pointer-events: auto; }

/* ---- 毛玻璃面板基础 ---- */
.glass-panel {
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: var(--border-neon);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 20px var(--color-primary-glow), inset 0 0 20px rgba(0, 240, 255, 0.05);
}

/* ---- 霓虹文字 ---- */
.neon-text {
  color: var(--color-primary);
  text-shadow: 0 0 7px var(--color-primary), 0 0 20px var(--color-primary-glow);
}
.neon-text-danger {
  color: var(--color-danger);
  text-shadow: 0 0 7px var(--color-danger), 0 0 20px var(--color-danger-glow);
}

/* ---- 隐藏 ---- */
.hidden { display: none !important; }

/* ---- 滚动条 ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(0, 240, 255, 0.05); }
::-webkit-scrollbar-thumb { background: rgba(0, 240, 255, 0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 240, 255, 0.5); }