/* =============================================================
   lab-play 设计系统 · 设计 token
   -------------------------------------------------------------
   这是整个游戏系统唯一的视觉来源（single source of truth）。
   所有页面 / play / view 只允许通过下面这些 CSS 变量取值，
   不允许在各自文件里写死颜色、间距、字号——这样才能保证
   无论以后加多少个 play，整站视觉都长在同一套语言里。

   基调：中性色 · light · 简约雅致。
   原则：大量留白、克制的色彩、清晰的排版层级、微妙而非炫技的动效。
   ============================================================= */

:root {
  /* ---------- 中性色阶（近白 → 近黑，全站主色） ---------- */
  --c-bg:          #fafaf9;  /* 页面底色，极浅暖灰白 */
  --c-surface:     #ffffff;  /* 卡片 / 面板底色 */
  --c-surface-alt: #f4f4f2;  /* 次级面板 / hover 底色 */
  --c-line:        #e6e5e2;  /* 分隔线 / 描边 */
  --c-line-strong: #d4d3cf;  /* 需要更明显的描边时 */

  --c-text:        #1c1b19;  /* 主文本，近黑不纯黑，更雅致 */
  --c-text-muted:  #6b6a66;  /* 次要文本 / 说明文字 */
  --c-text-faint:  #9c9b96;  /* 最弱的辅助信息 / 占位符 */

  /* ---------- 强调色（克制，仅用于关键动作 / 焦点） ---------- */
  /* 一个低饱和的墨绿，雅致而不喧宾夺主；点缀用，不铺大面积 */
  --c-accent:        #4a6b57;
  --c-accent-hover:  #3d5a49;
  --c-accent-soft:   #eef2ef;  /* 强调色的极浅背景（选中态 / 标签底） */

  /* 语义色（尽量少用，保持克制） */
  --c-positive:  #4a6b57;  /* 完成 / 正向，复用强调墨绿 */
  --c-negative:  #9c5b52;  /* 跳过 / 负向，低饱和砖红 */

  /* ---------- 稀有度色阶（抽卡牌背 / 卡牌世界观共享） ----------
     纪律：稀有度不引蓝紫金俗套，全部在“中性墨”里做深浅层级——
     稀有度越高，牌背底色越深、描边越考究、金属强调线越亮。
     命名 rar-{档}-{用途}：surface=牌背底、line=描边、ink=纹样/文字、glow=金属强调线。
     全池子（all）= 中性墨居中档；R=最浅；SR=中深；SSR=最深。 */

  /* 全池子：中性墨，不偏任何一档，作为“混抽”的中立底 */
  --rar-all-surface: #f0efec;
  --rar-all-line:    #cfcdc7;
  --rar-all-ink:     #6b6a66;
  --rar-all-glow:    #a8a6a0;

  /* R：最浅，近纸白，描边最轻 */
  --rar-r-surface:   #f6f5f3;
  --rar-r-line:      #dcdad5;
  --rar-r-ink:       #8f8d87;
  --rar-r-glow:      #c3c1ba;

  /* SR：中深墨，描边加重，金属线开始明显 */
  --rar-sr-surface:  #d9d7d1;
  --rar-sr-line:     #9c9a93;
  --rar-sr-ink:      #4a4843;
  --rar-sr-glow:     #b7b3a6;   /* 微暖的金属灰，非亮金 */

  /* SSR：最深，近墨黑牌背，浅色纹样 + 最考究的金属强调 */
  --rar-ssr-surface: #2b2a27;
  --rar-ssr-line:    #4a4843;
  --rar-ssr-ink:     #d8d5cc;   /* 深底上用浅墨走纹样/文字 */
  --rar-ssr-glow:    #b9a77f;   /* 克制的暗金，仅一两根强调线用 */

  /* ---------- 排版 ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* 标题可选用更有性格的衬线，营造"雅致"感；无衬线做正文 */
  --font-serif: "Songti SC", "Noto Serif SC", Georgia, "Times New Roman", serif;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   20px;
  --fs-xl:   28px;
  --fs-2xl:  40px;   /* 主菜单大标题 */

  --lh-tight: 1.25;
  --lh-base:  1.6;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   600;

  /* 字距：大标题略收紧更精致 */
  --ls-tight: -0.01em;
  --ls-wide:  0.04em;   /* 小字标签用宽字距，显克制高级 */

  /* ---------- 间距刻度（8px 基准） ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;   /* 大留白 */

  /* ---------- 圆角 ---------- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 999px;

  /* ---------- 阴影（极轻，light 风格靠描边+微阴影而非重投影） ---------- */
  --shadow-sm: 0 1px 2px rgba(28, 27, 25, 0.04);
  --shadow-md: 0 2px 8px rgba(28, 27, 25, 0.06);
  --shadow-lg: 0 8px 24px rgba(28, 27, 25, 0.08);

  /* ---------- 动效（雅致 = 慢而柔） ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;

  /* ---------- 布局 ---------- */
  --content-max: 960px;   /* 主内容最大宽度 */
  --content-narrow: 560px; /* 单栏 play 页最大宽度 */
}

/* =============================================================
   极简 reset + 全站基线
   页面只需引入本文件即可获得统一的基础排版。
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  font-size: var(--fs-base);
  cursor: pointer;
}

/* 尊重用户的“减少动效”系统偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}