/* ═══════════════════════════════════════════════════════════
   设计令牌 —— 「深夜合租屋里的那块屏幕」
   底色是上海的夜，主体是一部手机，手机里是微信。
   叙事层用宋体，界面层用系统无衬线：模拟的日常 vs 真实的孤独。
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── 墨色阶（背景 / 容器） ── */
  --ink-950: #05070c;
  --ink-900: #080b13;
  --ink-850: #0b0f1a;
  --ink-800: #0e1320;
  --ink-700: #141a2b;
  --ink-600: #1b2237;
  --ink-500: #232c45;
  --ink-400: #2e3956;
  --line: #26304a;
  --line-soft: rgba(140, 160, 210, 0.13);

  /* ── 纸 / 文字 ── */
  --paper: #f4f1e8;
  --paper-2: #e8e4d8;
  --text: #e9e7e0;
  --text-dim: #97a0b6;
  --text-mute: #626b83;
  --text-faint: #434b60;

  /* ── 强调色：每个都有明确语义，不要混用 ── */
  --chili: #ff4d3d;        /* 辣椒红 —— 催婚 / 压力 / 警报 */
  --chili-deep: #c92f22;
  --pepper: #2fd3a8;       /* 花椒青 —— 你自己 / 好消息 / 正向 */
  --neon: #ffd166;         /* 霓虹黄 —— 钱 */
  --violet: #8b7fd4;       /* 雾紫 —— 暧昧 / 情感 */
  --wechat: #3ecf8e;       /* 气泡绿 —— 微信自己的消息 */
  --wechat-deep: #2ba471;

  /* ── 微信群界面（深夜 21:40，手机是深色模式） ── */
  --wx-bg: #ededed;
  --wx-bg-dark: #111417;
  --wx-bubble-other: #ffffff;
  --wx-bubble-other-dark: #26292e;
  --wx-text: #191919;
  --wx-text-dark: #d6d6d6;
  --wx-time: #b2b2b2;
  /* 注意：屏幕主体是深色，所以 chrome 也必须是深色，
     否则会出现「浅底 + 浅字」的隐形文字。 */
  --wx-bar: #1b1e23;
  --wx-bar-line: rgba(255, 255, 255, 0.075);

  /* ── 字体：三层对比是本设计的核心概念 ── */
  --font-ui: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun",
    "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", Consolas,
    "Liberation Mono", monospace;
  --font-hand: "Kaiti SC", "KaiTi", "STKaiti", var(--font-serif);

  /* ── 尺度 ── */
  --r-xs: 4px;
  --r-sm: 7px;
  --r-md: 13px;
  --r-lg: 20px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ── 阴影 ── */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 10px 30px rgba(0, 0, 0, 0.5);
  --sh-3: 0 30px 80px rgba(0, 0, 0, 0.72);
  --sh-glow-pepper: 0 0 24px rgba(47, 211, 168, 0.35);
  --sh-glow-chili: 0 0 34px rgba(255, 77, 61, 0.42);

  /* ── 动效 ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.16s;
  --t-mid: 0.3s;
  --t-slow: 0.6s;

  /* ── 布局 ── */
  --phone-w: 400px;
  --phone-h: 828px;
  --rail-w: 268px;
  --gap: 18px;
}

/* 小游戏统一前缀 .mg- ，各小游戏自带 css 字符串注入 */