/* ============================================
   base.css — 变量 / 字体 / 重置 / 全局背景
   ============================================ */

@font-face {
  font-family: 'PressStart2P';
  src: url('../fonts/PressStart2P.ttf?v=2') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Zpix';
  src: url('../fonts/zpix.ttf?v=2') format('truetype');
  font-display: swap;
}

:root {
  --bg: #0d0b2e;
  --bg-2: #1b1852;
  --dark: #17123a;
  --dark-2: #2e2568;
  --blue: #3d5aff;
  --cyan: #6ef3ff;
  --cyan-light: #d6fbff;
  --pink: #ff6ec7;
  --pink-light: #ffb3e2;
  --white: #fdf6ff;
  --bevel-light: #ffffff;
  --bevel-dark: #2a1f6e;

  /* 文本色 */
  --ink: #fdf6ff;
  --cyan-text: #6ef3ff;
  --pink-text: #ffb3e2;

  --font-en: 'PressStart2P', monospace;
  --font-cn: 'Zpix', 'PressStart2P', monospace;
  --font-mix: 'PressStart2P', 'Zpix', monospace; /* 中英混排标题：英文走像素英文，中文回落 Zpix 而非系统字体 */
  --zh-lift: -0.08em; /* Zpix 在大标题里的垂直视觉补偿 */

  --topbar-h: 56px;
  --sidebar-w: 220px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-color: var(--pink) var(--dark); }

body {
  font-family: var(--font-cn);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--bg);
  /* 装饰性双层像素网格背景（细格 + 大格，纯 CSS 无图片） */
  background-image:
    linear-gradient(rgba(110, 243, 255, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 110, 199, .1) 1px, transparent 1px),
    linear-gradient(rgba(61, 90, 255, .28) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 110, 199, .28) 2px, transparent 2px);
  background-size:
    24px 24px,
    24px 24px,
    120px 120px,
    120px 120px;
  background-attachment: fixed;
}

::selection { background: var(--pink); color: var(--white); }

a { color: var(--cyan-text); text-decoration: none; }
a:hover { color: var(--pink-light); text-decoration: underline; }

img { image-rendering: pixelated; }

/* 像素风滚动条（WebKit） */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb {
  background: var(--pink);
  border: 2px solid var(--dark);
}
::-webkit-scrollbar-thumb:hover { background: var(--pink-light); }

/* 通用工具类 */
.font-en { font-family: var(--font-en); }
.c-cyan { color: var(--cyan); }
.c-pink { color: var(--pink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
}