/* ==========================================================================
   games.zzxcd.cn · base.css
   --------------------------------------------------------------------------
   只放三样东西：
     1. 自托管字体（拉丁/数字子集；中文走系统字体栈）
     2. 设计令牌（四套主题由各页 theme.js 写进 documentElement）
     3. 全局复位与可访问性底线

   各游戏的界面样式在 assets/<游戏>.css 里，各写各的，互不共享类名。
   ========================================================================== */

/* ---------- 1. 字体 ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/display.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/mono.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-display: swap;
}

/* ---------- 2. 令牌 ---------- */
:root {
  /* 主题令牌 —— 四套主题必须覆盖这 11 键（见 docs/TOOLS.md 6.1） */
  --c-bg: #f4f1ea;
  --c-neu-bg: #f4f1ea;
  --c-white: #ffffff;
  --c-neu-shadow-light: #ffffff;
  --c-neu-shadow-dark: #0a0a0a;
  --c-text: #0a0a0a;
  --c-text-sub: #5c5a54;
  --c-glass-bg: rgb(255 255 255 / 92%);
  --c-glass-border: #0a0a0a;
  --c-inset-dark: rgb(10 10 10 / 12%);
  --c-inset-light: rgb(255 255 255 / 90%);

  /* 页面本地令牌 —— 设置面板运行时写入 */
  --c-orange: #b8442a;
  --c-sky: #4a9d9c;

  /* 世界：暴露结构 —— 只有纸、墨、硬投影三种东西 */
  --paper: var(--c-bg);
  --sheet: var(--c-white);
  --ink: var(--c-text);
  --ink-soft: var(--c-text-sub);
  --accent: var(--c-orange);
  --accent-2: var(--c-sky);

  /* 强调色当**字色/描边色**时要兑墨 —— 实测（真实浏览器取元素计算色再按 WCAG 换算）：
     浅色主题下原色压纸面是 4.67~7.82:1 没问题，但暗色主题的纸面是 #242830，
     同一个原色只剩 1.89~3.02:1，答案、最佳成绩这类细字会糊掉。
     65% 原色 + 35% 墨：浅色主题 7.1~9.9:1、暗色主题 3.8~5.0:1，
     四套主题五档色盘全部达标，而且色相还在（不是灰的）。
     ⚠️ 填充色块（.chip / 按钮 / 旗子）继续用 --accent 原色 —— 那是"白字压色块"，
     需要的是色够深，方向正好相反。
     配比是扫出来的：真机实测四套主题 × 五档色盘，40% 最差 5.99、45% 5.49、
     50% 5.02、58% 4.33（不达标）、65% 3.79。取 50% —— 达标且色相保留最多。 */
  --accent-ink: color-mix(in srgb, var(--accent) 50%, var(--ink));

  /* 压在强调色上的文字固定为白。
     ⚠️ 前提是强调色本身够深 —— 实测白字压 #FF6B35 只有 2.84:1，
     压 DESIGN.md 那份强调色盘则全部达标（#b8442a 5.39 / #1f6f4a 6.12 /
     #1f4fa0 7.82 / #6b3fa0 7.38 / #8a6d1f 4.90）。
     所以各页的默认强调色与色盘都换成了那一份；混墨或混纸的方案更差（最低 1.14:1），别试。 */
  --on-accent: #ffffff;

  --rule: 2px solid var(--ink);
  --rule-thin: 1px solid var(--ink-soft);
  --shadow: 4px 4px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow-lg: 6px 6px 0 var(--ink);
  --scrim: rgb(10 10 10 / 72%);

  /* 字体 */
  --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-scale: 1;

  /* 节奏 */
  --sp-1: 0.35rem;
  --sp-2: 0.6rem;
  --sp-3: 0.9rem;
  --sp-4: 1.3rem;
  --sp-5: 1.9rem;
  --sp-6: 2.6rem;

  /* 动效 */
  --dur: 150ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 3. 复位与底线 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  /* 结构缝网格：与计算器/翻译页同一套（两条 1px 硬停止线，不产生色彩过渡） */
  background-image: linear-gradient(
      to right,
      color-mix(in srgb, var(--ink) 7%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size: 2rem 2rem;
  color: var(--ink);
  font-size: calc(1rem * var(--font-scale, 1));
  line-height: 1.55;  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

h1,
h2,
h3,
ul,
p {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

canvas {
  display: block;
}

.hidden {
  display: none !important;
}

/* 焦点可见：键盘用户必须看得见自己在哪 */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* 背景装饰层：七个页面 markup 里都留着上一版的 .bg-orb 柔光球容器。
   这个世界不用柔光球，底纹也统一交给 body 的结构缝网格（与计算器/翻译页同一套），
   所以这两个容器一律不渲染 —— 之前给它铺了斜纹，半透明遮罩下会透出来，
   打开设置抽屉时的底色就和计算器不一样了。 */
.bg-orb {
  display: none;
}

/* 两个变体各自的类必须留一条规则（静态自检会检查「markup 用到的类都有样式」），
   值都是 none —— 留着是为了让 markup 里那一对 div 有对应声明，不是要画东西。 */
.bg-orb.a,
.bg-orb.b {
  display: none;
}

/* 尊重系统设置：动画一律退化为瞬时 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}